linaria
linaria copied to clipboard
callstack
[React] CSS specificity issue: extend imported component
Environment
Linaria version: 5.0.3 Bundler: Webpack 5
Description
When extending a component with styled function (const B = styled(A)``;) I expect the resulting component's CSS to have higher specificity.
When the components are declared in the same file, Linaria seems to append the parent's classname to the child's (.B.A -> increased specificity) ✅
When the component to extend from is imported, Linaria doesn't append its classname. The new component's specificity is the same as its parent component ❌
This result is mismatching style when a child component inherits from a complex parent component, defined in another file:
In this example the classname for Red is .Red_rhnsy8v which has lower specificity than .Blue_b7lcn1q.Base_b15uhwgc, therefore the text isn't red but blue.
It should be .Red_rhnsy8v.Blue_b7lcn1q.Base_b15uhwgc in order to override its parent's style correctly.
See the reproduction demo for source code.
Reproducible Demo
https://stackblitz.com/edit/linaria-bug-kahsvz?file=src%2FTitle.tsx
@Anber nice release yesterday 👌 I like the way this project is going.
Would you mind having a look at this issue, please? I believe it is rather serious one because it can break styles on production in an unpredictable way (since this is "just" CSS specificity).
The only workaround I could find is to find those style overrides manually and artificially increase specificity (&& { /* css */ }).
Thanks
Hi @PierreGUI
Unfortunately, I haven't had enough time for the last two months. And I will be completely offline for the next two and a half weeks. I will take a look as soon as I return.
Hey @Anber , friendly reminder of this troubling issue. Any chance you'll have a look at it soonish?
I'm currently not confident writing styles when extending components from my design system.
Thanks 🙏
Hi @PierreGUI
Sorry for such a late response. It appeared that styled couldn't resolve imported components, so they were ignored. Hopefully, this has been fixed in https://github.com/callstack/linaria/pull/1405. I will test it a bit more and release it later today or tomorrow.