Cross reference using classNames

[alexrah]

in styled-component
ref: Pseudoelements, pseudoselectors, and nesting

the following code is valid:

const HeadingLiteral = styled.h2`
  &.solid-variant {
  font-weight: bold;
  }
  
  & .child-item {
    color: red;
  }  
`

but it doesn't seem to work in next-yak

demo repo

Do you have any plan of adding this feature?

[Mad-Kat]

Hey @alexrah

Thank you so much for your time to investigate and opening an issue. I had a quick look and it looks like you want to mix classes outside of next-yak with component styles managed by yak. As next-yak compiles the CSS under the hood to css-modules, you would need to specify the selectors the same way as you would do it in css-modules (related documentation from css-modules).

For your case that would mean that you would have to write it like this:

const Heading = styled.h2`
  background-color: cyan;

  &:global(.solid-variant) {
    color: purple;
  }

  & :global(.child-item) {
    color: red;
  }
`;

We definitely need to add this to our documentation! I will keep the issue open until that is merged

[alexrah]

Thanks for your explanation, I didn't play with CSS modules enough to know about it.

[jantimon]

@alexrah I guess you directly stumbled across a tricky problem - we have an issue to inject :global automatically: #53

However it is not that easy to do it correctly so we put in hold for now

Feel free to ask any further questions here - is it okay for you to close this issue?

[alexrah]

No problem at all for me, but I think would be better to highlight this pattern in the documentation, perhaps in Migration from styled-components considering [#53] I don't see an easy path to solve this neither by codemod once during migration or by automatic injection.

[jantimon]

Thanks we will update the documentation soon