feat: upgrade stylis to v4 (#1373)

* feat: upgrade stylis to v4

Update stylis in both the babel and atomic packages, along with their
respective test snapshots.

The babel snapshots updated in an innocuous way: the newer stylis
includes a space where it didn't previously.

The atomic snapshots updated in a way where something that was
previously broken one way (`200;px`) is broken in a different way
(`200 px`). Not a regression, so no reason to fix as part of this
change.

BREAKING CHANGE: stylis v4 handles nested pseudo-classes differently from v3.
The old version joined `.x { :is(.y) }` to `.x:is(.y)` whereas the new version
separates them `.x :is(.y)`. The new behavior matches how SCSS and other
preprocessors work. Linaria consumers will need to check and possibly
update their styles for the new behavior.

* chore: changeset for #1373

---------

Co-authored-by: Anton Evzhakov <anton@evz.name>

.changeset/grumpy-flowers-watch.md

@@ -0,0 +1,7 @@
+---
+'@linaria/atomic': patch
+'@linaria/babel-preset': patch
+'@linaria/testkit': patch
+---
+
+Stylis has been upgraded from v3 to v4.

packages/atomic/package.json

@@ -56,12 +56,13 @@
     "@linaria/utils": "workspace:^",
     "known-css-properties": "^0.24.0",
     "postcss": "^8.4.31",
-    "stylis": "^3.5.4",
+    "stylis": "^4.3.0",
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
     "@babel/types": "^7.22.15",
-    "@types/node": "^17.0.39"
+    "@types/node": "^17.0.39",
+    "@types/stylis": "^4.2.1"
   },
   "peerDependencies": {
     "react": ">=16"

packages/atomic/src/processors/helpers/atomize.ts

@@ -1,7 +1,7 @@
 import { all as knownProperties } from 'known-css-properties';
 import type { Document, AtRule, Container, Rule } from 'postcss';
 import postcss from 'postcss';
-import stylis from 'stylis';
+import { compile, serialize, stringify } from 'stylis';
 
 import { slugify } from '@linaria/utils';
 
@@ -38,10 +38,6 @@ const parseCss = (cssText: string) => {
 };
 
 export default function atomize(cssText: string, hasPriority = false) {
-  stylis.set({
-    prefix: false,
-    keyframe: false,
-  });
   const atomicRules: {
     className?: string;
     cssText: string;
@@ -109,7 +105,8 @@ export default function atomize(cssText: string, hasPriority = false) {
       getPropertyPriority(decl.prop) +
       (hasAtRule ? 1 : 0) +
       (hasPriority ? 1 : 0);
-    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);
+    const selector = `.${className}`.repeat(propertyPriority);
+    const processedCss = serialize(compile(`${selector} {${css}}`), stringify);
 
     atomicRules.push({
       property: atomicProperty.join(' '),

packages/babel/package.json

@@ -47,7 +47,7 @@
     "cosmiconfig": "^8.0.0",
     "happy-dom": "10.8.0",
     "source-map": "^0.7.3",
-    "stylis": "^3.5.4",
+    "stylis": "^4.3.0",
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
@@ -58,6 +58,7 @@
     "@types/babel__traverse": "^7.20.1",
     "@types/jest": "^28.1.0",
     "@types/node": "^17.0.39",
+    "@types/stylis": "^4.2.1",
     "dedent": "^1.5.1",
     "jest": "^29.6.2",
     "strip-ansi": "^5.2.0",

packages/babel/src/transform/generators/extract.ts

@@ -2,14 +2,20 @@ import path from 'path';
 
 import type { Mapping } from 'source-map';
 import { SourceMapGenerator } from 'source-map';
-import stylis from 'stylis';
+import {
+  compile,
+  serialize,
+  stringify,
+  middleware,
+  prefixer,
+  namespace,
+} from 'stylis';
 
 import type { Replacements, Rules } from '@linaria/utils';
 
 import type { Options, PreprocessorFn } from '../../types';
 import type { IExtractAction, SyncScenarioForAction } from '../types';
 
-const STYLIS_DECLARATION = 1;
 const posixSep = path.posix.sep;
 
 export function transformUrl(
@@ -32,6 +38,33 @@ export function transformUrl(
   return relative.split(platformPath.sep).join(posixSep);
 }
 
+function createStylisPreprocessor(options: Options) {
+  function stylisPreprocess(selector: string, text: string): string {
+    return serialize(
+      compile(`${selector} {${text}}\n`),
+      middleware([
+        (element: { return: string; type: string; value: string }) => {
+          const { outputFilename } = options;
+          if (element.type === 'decl' && outputFilename) {
+            // When writing to a file, we need to adjust the relative paths inside url(..) expressions.
+            // It'll allow css-loader to resolve an imported asset properly.
+            // eslint-disable-next-line no-param-reassign
+            element.return = element.value.replace(
+              /\b(url\((["']?))(\.[^)]+?)(\2\))/g,
+              (match, p1, p2, p3, p4) =>
+                p1 + transformUrl(p3, outputFilename, options.filename) + p4
+            );
+          }
+        },
+        namespace,
+        prefixer,
+        stringify,
+      ])
+    );
+  }
+  return stylisPreprocess;
+}
+
 function extractCssFromAst(
   rules: Rules,
   originalCode: string,
@@ -52,22 +85,7 @@ function extractCssFromAst(
         break;
       case 'stylis':
       default:
-        stylis.use(null)((context, decl) => {
-          const { outputFilename } = options;
-          if (context === STYLIS_DECLARATION && outputFilename) {
-            // When writing to a file, we need to adjust the relative paths inside url(..) expressions
-            // It'll allow css-loader to resolve an imported asset properly
-            return decl.replace(
-              /\b(url\((["']?))(\.[^)]+?)(\2\))/g,
-              (match, p1, p2, p3, p4) =>
-                p1 + transformUrl(p3, outputFilename, options.filename) + p4
-            );
-          }
-
-          return decl;
-        });
-
-        preprocessor = stylis;
+        preprocessor = createStylisPreprocessor(options);
     }
   }
 

packages/testkit/src/__snapshots__/babel.test.ts.snap

@@ -96,8 +96,8 @@ exports[`strategy shaker compiles atomic css with at-rules and property prioriti
 
 CSS:
 
-@media (max-width:500px){.atm_1h9nsec_idpfg4.atm_1h9nsec_idpfg4{padding:0;}}
-@media (min-width:300px){.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu:hover{padding-top:5px;}}
+@media (max-width: 500px){.atm_1h9nsec_idpfg4.atm_1h9nsec_idpfg4{padding:0;}}
+@media (min-width: 300px){.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu.atm_7xgmf7_14y27yu:hover{padding-top:5px;}}
 .atm_ci1k5c_i2wt44.atm_ci1k5c_i2wt44:enabled{padding-left:6px;}
 .atm_le_1v6z61t.atm_le_1v6z61t{padding-bottom:7px;}
 
@@ -116,8 +116,8 @@ exports[`strategy shaker compiles atomic css with at-rules and pseudo classes 2`
 
 CSS:
 
-@media (max-width:500px){.atm_1apu8aw_13q2bts.atm_1apu8aw_13q2bts{background:blue;}}
-@media (min-width:300px){.atm_1yli2by_1cnho6b.atm_1yli2by_1cnho6b:hover{background:purple;}}
+@media (max-width: 500px){.atm_1apu8aw_13q2bts.atm_1apu8aw_13q2bts{background:blue;}}
+@media (min-width: 300px){.atm_1yli2by_1cnho6b.atm_1yli2by_1cnho6b:hover{background:purple;}}
 .atm_1hwwax4_1osqo2v:enabled{width:100%;}
 .atm_26_5scuol{background:red;}
 .atm_e2_12xxubj{height:100px;}
@@ -1483,7 +1483,7 @@ exports[`strategy shaker handles interpolation in css function followed by unit
 CSS:
 
 .atm_tr_18309cv{transform:rotate(var(--y6125t));}
-.atm_vy_1783zgq{width:200;px;}
+.atm_vy_1783zgq{width:200 px;}
 
 Dependencies: NA