The addVariant discussion

[ben-rogerson]

This is a discussion about implementing addVariant - which is the only remaining missing plugin function in twin.

Update: twin v3 will include support for addVariant 🎉

[ben-rogerson]

I'm starting to plan a "hooks" project with twin that'll allow changes to the styles twin generates.
I was thinking it would be a great place to offer a hook that allows the customisation of variants.

[anark]

addVariant would really help me with a workaround for supporting focus-visible in older browsers. I'll describe what I am trying to do below

Problem Description

I'm trying again to get some reliable browser support for tailwinds focus-visible variant. Their docs state that you need to use a js polyfill(no problem there) and a postcss polyfill(https://www.npmjs.com/package/postcss-focus-visible).

It looks like all the postcss polyfill does is convert

:focus:not(:focus-visible) {
  outline: none;
}

To

:focus:not(.focus-visible) {
  outline: none;
}
 
:focus:not(:focus-visible) {
  outline: none;
}

My question is if there is anyway with twin to make it so that when you use the focus-visible variant it writes the styles in the polyfilled way(for use with the js polyfill).

Basically when we use the focus-visible: variant it would need to add the normal :focus-visible rule along with the same rules for .focus-visible to use the js polyfill

If not would it be possible to write a plugin that allows this?

I find focus-visible to be a great way to define focus styles for keyboard only uses but to allow for more subtle focus states(or hidden ones) for mouse users, but the lack of support in Safari makes it so I cannot use this on a grand scale

I believe I can add this with a minimal plugin in tailwind.config.js

  plugins: [
    require('@tailwindcss/forms'),
    plugin(function ({ addVariant, e }) {
      addVariant('focus-visible', ({ modifySelectors }) => {
        modifySelectors(({ className }) => {
          return `.${e(`${className}`)}:focus-visible, .${e(`${className}`)}.focus-visible`
        })
      })
    }),
  ],

But this doesn't seem to work with twin as twin doesn't support addVariant.

[anark]

Currently you can use the focus-visible js polyfill that adds the class focus-visible to correct element based on user interaction automatically. https://www.npmjs.com/package/focus-visible. This is needed when using standard tailwind(without twin) to get the focus-visible variant to have full browser support(https://tailwindcss.com/docs/hover-focus-and-other-states#focus-visible).

The js polyfill handles adding the focus-visible class to the right element so all we would need would be a way to adjust the selector to use either the :focus-visible psuedo selector(as it does now) but also the .focus-visible class.

[ben-rogerson]

Here's a workaround for now that I think may work for your use case:

1. Install patch package (or make a fork)
2. Update the variantConfig to 'focus-visible': ':focus-visible, &.focus-visible',

Usage after the change:

tw`focus-visible:block`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  ":focus-visible, &.focus-visible": {
    "display": "block"
  }
});

Edit: Actually I don't think this will work as the rule needs to be separated into two separate rulesets. I think the whole ruleset may get discarded once an unrecognised selector (:focus-visible) is found. In that case, I'm out of good ideas again :(

[anark]

Is there any other way we can add full browser support for the focus-visible: variant? This is a feature of tailwind that is very useful(allows for a focus state when using tabbed browsing that doesn't show up on mouse interactions) and is supported by tailwind(though you need the js polyfill and the postcss polyfill that allows you to use the class instead of the css pseudo selector).

The implementation is so close to working, all it needs to to select based on :focus-visible like it does now and additionally the .focus-visible class to support older browsers. The class is already added via the js polyfill so it is just changing the css selector. Would really make our focus states better.

addVariant support seems like the cleanest way to support this(or another way to modify the selectors) but having trouble finding out how to do this via twin.

[anark]

As a workaround I can just do the following

const Button = styled.button(() => [
  tw`focus-visible:ring-2`,
  css`
    &.focus-visible{
      ${tw`ring-2`}
    }
  `
])

The tw`focus-visible:ring-2` will work for modern browsers to add the ring class only when navigating with keyboard(tab) and not when clicking, while the

  css`
    &.focus-visible{
      ${tw`ring-2`}
    }
  `

Section will do the same for older browsers(and safari). It would just be nice if there was a way to make this automatically work with just the focus-visible: variant in twin the same way you can with postcss-focus-visible-polyfill when using standard tailwind

This workaround works great, just is a little verbose with the only purpose being browser support and would be annoying to have to repeat yourself everywhere you want to use this in your app.

[ben-rogerson]

As of [email protected], we can add custom selectors within square brackets.
Using the new feature, the example can now also be added with a much more brief syntax:

const Button = tw.button`[:focus-visible, &.focus-visible]:ring-2`

More about arbitrary variants →

[lightyen]

We need a more friendly addVariant API like this.

The type definitions may be:

declare function addVariant(variantName: string, variantFunction: string | string[]): void

[ben-rogerson]

I'll see what I can do - I've had issues implementing this in the past but perhaps there's something I can do with the new api.

[ben-rogerson]

Hey folks, some good news - addVariant() will work with the next version of twin (rc-2) 👍