Classes with modifiers apply to children instead of the component itself
J61n opened this issue · comments
I have set up a project with Twin, Next.js (App Router), Styled Components and Typescript by following these guides:
When using modifiers such as hover: or active:, I noticed that Tailwind classes with these modifiers have no effect. Using the browser tools, I found out that the generated styles do not have the proper selectors. Mind the space between the class and the pseudo-class:
.jOlSJg{/* minified css */}
.jOlSJg :hover{/* minified css */}
.jOlSJg :active{/* minified css */}In fact, when I nest elements inside the component that the styles apply to, I see the expected behavor on these nested elements. For example, a button that has the tailwind classes bg-blue-500 and hover:bg-blue-400 does not change its background color when hovered. However, a nested code element inside that button changes its background color to bg-blue-400 when the containing button is hovered:
<button tw="bg-blue-500 hover:bg-blue-400">
Example with <code>styled components</code>
</button>I reproduced this behavior in this repository.
Looks like an issue with styled-component 6.
If you install styled-components@5.3.6 and @babel/core@7.21.0, the hover modifier works as expected.
Downgrading styled components and installing babel core as mentioned indeed solves the problem. It also doesn't seem to cause any problems with server-side rendering.
The CSS-in-JS Guide by Next.js mentioned "styled-components@v6.0.0-rc.1 or greater", why I supposed that Next.js 13 with app router requires styled components 6.
It seems like the problem I mentioned in the beginning still with v6.0.0-rc.3.
I just figured out, that the problem can also be solved by setting sassyPseudo: true in the twin config as described in the docs.
Interesting stuff and well done finding a fix. Looks like the new styled-components requires the pesudo selector now. May have to look at changing the default once a proper release is out.