Lazy loaded Linaria components have wrong specificity when decorated with `styled()`

[jalooc]

Environment

• Linaria version: 6.2.0
• Linaria React version: 6.2.1
• Bundler (+ version): Vite @5.2.13
• Node.js version: v22.2.0
• OS: MacOS

Description

When decorating Linaria components with styled(), the resulting class has proper specificity achieved by chaining classes: .classBaseComponent.classDecoratingComponent, but that does not work if the base component is lazy-loaded.

Reproducible Demo

https://stackblitz.com/edit/stackblitz-starters-ldrzpa

[KutnerUri]

I had a similar problem (with CRA 4.x), and I had to work around to make it work.

Usually you can resolve specificity by keeping correct order, for example:

.base { 
  background: blue;
}

.override {
  background: green;
}

// color will be green

this is true also with imports, ie

import 'base.css';
import 'override.css';

The problem is that lazy loads the base css later, giving it a higher specificity.

This probably would happen also with other libraries.
Maybe it's something styled-components could resolve? (if they detect a lazy component, etc.)