Escape selectors containing forward slashes

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

Escape selectors containing forward slashes #816

Closed ben-rogerson closed 1 year ago

ben-rogerson commented 1 year ago

This PR adds support for forward slashes within certain classes:

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

// ↓ ↓ ↓ ↓ ↓ ↓

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

Closes #808

andymerskin commented 1 year ago

Excited for this — been wondering why this hadn't been working! Thanks for the fix! :)