Support for @headlessui/tailwindcss prefixes in inner classes

[gbirman]

Although selectors such as ui-active for HeadlessUI components are working on parent components as of #741, the selectors do not work for inner elements, even though the syntax is supported on the HeadlessUI documentation. However, I've only tested with the Switch component. You can find more details and a code sandbox in the issue I created in the headless ui repo, where the verdict was that the problem lay with twin.macro.

[ben-rogerson]

Thanks I'll take a look and get back to you

[ben-rogerson]

Hey there

Looks like twin is correctly generating the classes and this is due to a bug with styled-components and how it interprets the selector.
I updated styled-components to v6.0.4 and the Switch component became togglable.

After the upgrade you'll see that pseudo selectors won't be working correctly but adding sassyPseudo: true to your twin config will fix it for now. The next version of twin won't require this - it's due out within a few days.

The selector that isn't supported in styled-components < 6 is:

":where([data-headlessui-state~=\"checked\"]) &": { ... }

Related #818