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.89k stars 184 forks source link

`group-x` classes containing `/` aren't working correctly #808

Closed ben-rogerson closed 1 year ago

ben-rogerson commented 1 year ago

There's currently a bug with twins conversion of group- classes when they contain a /.

For example:

tw`group-hover/link:bg-black`

// ↓ ↓ ↓ ↓ ↓ ↓

({
    ".group/link:hover &": { // < this resulting class should be escaped
      "--tw-bg-opacity": "1",
      "backgroundColor": "rgb(0 0 0 / var(--tw-bg-opacity))"
    }
});

When the class twin creates should be escaped:

tw`group-hover/link:bg-black`

// ↓ ↓ ↓ ↓ ↓ ↓

({
    ".group\\/link:hover &": { // < correctly escaped class name
      "--tw-bg-opacity": "1",
      "backgroundColor": "rgb(0 0 0 / var(--tw-bg-opacity))"
    }
});