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

Handle arbitrary variants with commas #757

Closed ben-rogerson closed 1 year ago

ben-rogerson commented 1 year ago

This PR adds an error when we attempt to create a class that contains:

eg: [.class1,.class2]:first:bg-black

Reason: Multi selectors are unsupported by tailwind and only the first selector is used.

More at https://github.com/ben-rogerson/twin.macro/discussions/756

Fixed a bug where arbitrary variants aren't visited individually to add the auto parent selector:

tw`[.this,.that]:block`
// ↓ ↓ ↓ ↓ ↓ ↓
{ "& .this, .that": { display: "block" } // < Fixes missing parent selector on 2nd+ selector

Also fixed an encoding bug in arbitrary variants when a number is added directly after a comma:

tw`[path[fill="rgb(1,1,1)"]]:block`