Linaria 6: broken :global selector (regression)

[PierreGUI]

Environment

Linaria version: 6
Bundler: Webpack 5

Description

Original question: "Linaria 6: space between classname and pseudo element selector (regression)", rephrased based on answers, see below.
This code generates a class name with an unwanted space: .dhnsy8v ::after {

const Decorated = styled.h1`
  ::after {
     ...
  }
`;

The expected behaviour is no space between classname and ::after

Reproducible Demo

https://stackblitz.com/edit/linaria-bug-y4gxid?file=src%2FTitle.tsx

• It works with Linaria 5
• It works when written &::after { ... }

[PierreGUI]

PS: same problem with :hover -> .dhnsy8v :hover { ❌
(and :first-of-type, etc...)

[PierreGUI]

BTW this is the reason why Linaria's own website looks a bit off https://linaria.dev

[agriffis]

This isn't really a regression, rather it's a breaking change in v6. It's because of stylis v4, see #1373

The new behavior matches SCSS and other preprocessors. Linaria was previously an outlier, and anyone migrating had to change their nested selectors.

[alekseykulikov]

I confirm that the documented :global() selector doesn't work in v6 (https://linaria.dev is an excellent proof). Do you have any suggestions on how to define global styles with v6?

[agriffis]

I confirm that the documented :global() selector doesn't work in v6 (https://linaria.dev is an excellent proof). Do you have any suggestions on how to define global styles with v6?

I'm finding the same thing. It seems Linaria or wyw-in-js needs an adjustment to enable global styles with Stylis v4, but I haven't yet traced the code to understand how it is intended to work.

[agriffis]

So it appears that we need the namespace middleware to support :global() rules.

When I add it to wyw like this:

diff --git a/packages/transform/src/transform/generators/extract.ts b/packages/transform/src/transform/generators/extract.ts
index 215d27b..66aec9f 100644
--- a/packages/transform/src/transform/generators/extract.ts
+++ b/packages/transform/src/transform/generators/extract.ts
@@ -2,7 +2,14 @@ import path from 'path';
 
 import type { Mapping } from 'source-map';
 import { SourceMapGenerator } from 'source-map';
-import { compile, serialize, stringify, middleware, prefixer } from 'stylis';
+import {
+  compile,
+  serialize,
+  stringify,
+  middleware,
+  namespace,
+  prefixer,
+} from 'stylis';
 
 import type { Replacements, Rules } from '@wyw-in-js/shared';
 
@@ -50,6 +57,7 @@ function createStylisPreprocessor(options: Options) {
             );
           }
         },
+        namespace,
         prefixer,
         stringify,
       ])

then :global(html) {...} works but :global() {html {...}} doesn't. It's progress but still broken.

Unfortunately the code for the namespace middleware is questionable at best. It might be faster to come up with a new replacement middleware than to debug it.

[jancajthaml]

Any update or plan to tackle this issue?

[layershifter]

I kinda agree with :hover behavior as it's also how styled-components work:

• https://stackblitz.com/edit/stackblitz-starters-wrkniy
• https://styled-components.com/docs/basics#extending-styles

---

However, the issue with :global() is a real problem.

I will work on the plugin to stylis as namespace plugin from it does not do what is expected and I had to write a plugin for Griffel before (https://github.com/microsoft/griffel/blob/45e2a6b41596862bc2c54efbcbe746dc041e025e/packages/core/src/runtime/stylis/globalPlugin.ts#L1).

[layershifter]

The fix was done in Anber/wyw-in-js#37 and released in @wyw-in-js/*@0.2.3.

[Dozalex]

@layershifter Thanks for your fix! But I see another problem with :global

If i do

const globals = css`
  :global() {
    body {
      .someClassName {
        color: red;
      }
    }
  }
`

then I get the error Failed to match :global() selector in ".someClassName". Please report a bug if it happens.

If i do

const globals = css`
  :global() {
    body.someClassName {
      color: red;
    }
  }
`

then no error.

It's not a big problem, but before version 6 it worked this way and that way.

[nihgwu]

Ran into the same issue as @Dozalex and it's a big issue for me as I'm using nested style with &, don't know how to workaround it

UPDATE: here is the workaround

[layershifter]

@Dozalex seems that my change should be improved 🤔 I will try to fix it next week until somebody will do it earlier 🐱

[nihgwu]

can we just have a globalCss instead 🤔