Classes with modifiers apply to children instead of the component itself about twin.macro HOT 4 CLOSED

Looks like an issue with styled-component 6.

If you install [email protected] and @babel/[email protected], the hover modifier works as expected.

from twin.macro.

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 "[email protected] 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.

from twin.macro.

I just figured out, that the problem can also be solved by setting sassyPseudo: true in the twin config as described in the docs.

from twin.macro.

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.

from twin.macro.