search

ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.92k stars 183 forks source link

Support for @headlessui/tailwindcss prefixes in inner classes #811

Closed gbirman closed 1 year ago

gbirman commented 1 year ago

Although selectors such as ui-active for HeadlessUI components are working on parent components as of https://github.com/ben-rogerson/twin.macro/issues/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 commented 1 year ago

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

ben-rogerson commented 1 year ago

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