[React] CSS specificity issue: extend imported component

[PierreGUI]

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

[PierreGUI]

@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

[Anber]

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.

[PierreGUI]

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 🙏

[Anber]

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 #1405. I will test it a bit more and release it later today or tomorrow.