Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ben-rogerson opened this issue Jun 15, 2023 · 0 comments · Fixed by #816
Closed

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

ben-rogerson opened this issue Jun 15, 2023 · 0 comments · Fixed by #816

Comments

@ben-rogerson
Copy link
Owner

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))"
    }
});
ben-rogerson added a commit that referenced this issue Jul 23, 2023
This PR adds support for forward slashes within certain classes:

```js
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant