chore: upgrade to Linaria v4

package.json

@@ -120,8 +120,11 @@
     "@babel/template": "^7.12.13",
     "@babel/traverse": "^7.12.13",
     "@emotion/hash": "^0.8.0",
-    "@linaria/babel-preset": "^3.0.0-beta.23",
-    "@linaria/shaker": "^3.0.0-beta.22",
+    "@linaria/babel-preset": "^4.3.3",
+    "@linaria/shaker": "^4.2.7",
+    "@linaria/tags": "^4.3.0",
+    "@linaria/utils": "^4.3.0",
+    "@linaria/webpack-loader": "^4.1.11",
     "@swc/core": "^1.3.19",
     "@typescript-eslint/utils": "^5.20.0",
     "ajv": "^8.4.0",

packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts

@@ -1,15 +1,13 @@
+import { __styles as _styles } from '@griffel/react';
 import _asset2 from './empty.jpg';
 import _asset from './blank.jpg';
-import { __styles } from '@griffel/react';
-import blank from './blank.jpg';
-import empty from './empty.jpg';
-export const useStyles = __styles(
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
-      Bcmaq0h: 'fp00rh9',
+      Bcmaq0h: 'f1surbjy',
     },
   },
   {
-    d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
+    d: [`.f1surbjy{background-image:url(${_asset}),url(${_asset2});}`],
   },
 );

packages/babel-preset/__fixtures__/assets-reset-styles/output.ts

@@ -1,11 +1,9 @@
-import _asset2 from './empty.jpg';
+import { __resetStyles as _resetStyles } from '@griffel/react';
+import _asset3 from './empty.jpg';
+import _asset2 from './blank.jpg';
 import _asset from './blank.jpg';
-import { __resetStyles } from '@griffel/react';
-import blank from './blank.jpg';
-import blankDuplicate from './blank.jpg';
-import empty from './empty.jpg';
-export const useStyles = __resetStyles('ra9m047', null, [
-  `.ra9m047{background-image:url(${_asset});}`,
-  `.ra9m047:hover{background-image:url(${_asset});}`,
-  `.ra9m047:focus{background-image:url(${_asset2});}`,
+export const useStyles = /*#__PURE__*/ _resetStyles('rzkd6zb', null, [
+  `.rzkd6zb{background-image:url(${_asset});}`,
+  `.rzkd6zb:hover{background-image:url(${_asset2});}`,
+  `.rzkd6zb:focus{background-image:url(${_asset3});}`,
 ]);

packages/babel-preset/__fixtures__/assets-urls/output.ts

@@ -1,5 +1,5 @@
-import { __styles } from '@griffel/react';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     httpUrl: {
       Bcmaq0h: 'f405sdg',

packages/babel-preset/__fixtures__/assets/output.ts

@@ -1,30 +1,26 @@
-import _asset3 from './a.svg';
+import { __styles as _styles } from '@griffel/react';
 import _asset2 from './empty.jpg';
 import _asset from './blank.jpg';
-import { __styles } from '@griffel/react';
-import blank from './blank.jpg';
-import blankDuplicate from './blank.jpg';
-import empty from './empty.jpg';
-export const useStyles = __styles(
+export const useStyles = /*#__PURE__*/ _styles(
   {
     rootA: {
-      Bcmaq0h: 'fnwsaxv',
+      Bcmaq0h: 'f1lg9ji5',
     },
     rootB: {
-      Bcmaq0h: 'fnwsaxv',
+      Bcmaq0h: 'f1lg9ji5',
     },
     rootC: {
-      Bcmaq0h: 'f1ryfumh',
+      Bcmaq0h: 'feire57',
     },
     assetWithHash: {
-      Bhu2qc9: 'fv04sme',
+      Bhu2qc9: 'f12vvth1',
     },
   },
   {
     d: [
-      `.fnwsaxv{background-image:url(${_asset});}`,
-      `.f1ryfumh{background-image:url(${_asset2});}`,
-      `.fv04sme{-webkit-filter:url(${_asset3}#a);filter:url(${_asset3}#a);}`,
+      `.f1lg9ji5{background-image:url(${_asset});}`,
+      `.feire57{background-image:url(${_asset2});}`,
+      `.f12vvth1{-webkit-filter:url(./a.svg#a);filter:url(./a.svg#a);}`,
     ],
   },
 );

packages/babel-preset/__fixtures__/config-babel-options/output.ts

@@ -1,13 +1,5 @@
-import { __styles } from '@griffel/react';
-const func = () => {
-  // This assignment has no sense, but it will prevent us from evaluation in AST
-  // This fixture uses "colorRenamePlugin.js" in transformPlugin's config so input we should get a different color
-  const color = 'red';
-  return {
-    color,
-  };
-};
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'f163i14w',

packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-import { colorRed } from './consts';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'f163i14w',

packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js

@@ -1,10 +1,17 @@
 // @ts-check
 
-/** @type {import("@linaria/babel-preset").Evaluator} */
+/** @type {import("@linaria/utils").Evaluator} */
 const sampleEvaluator = () => {
-  // Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect
-  // that results will be available as "exports.__mkPreval", this evaluator mocks it
-  const result = `exports.__mkPreval = [{ root: { color: 'blue' } }]`;
+  // Evaluators transform input code to something that will be evaluated by Node
+  // later. Linaria expects that results will be available as
+  // "exports.__linariaPreval", this evaluator mocks it
+  const result = `
+    exports.__linariaPreval = {
+      _exp: () => ({
+        root: { color: 'blue' }
+      })
+    };
+  `;
 
   return [result, null];
 };

packages/babel-preset/__fixtures__/function-mixin/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-import { createMixin } from './mixins';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     avatar: {
       sj55zd: 'f1817uup',

packages/babel-preset/__fixtures__/import-alias/output.ts

@@ -1,5 +1,5 @@
-import { __styles } from '@griffel/react';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',

packages/babel-preset/__fixtures__/keyframes/output.ts

@@ -1,5 +1,5 @@
-import { __styles } from '@griffel/react';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     single: {
       Bv12yb3: ['f1g6ul6r', 'f1fp4ujf'],

packages/babel-preset/__fixtures__/multiple-declarations/output.ts

@@ -1,5 +1,6 @@
-import { __styles } from '@griffel/react';
-export const useStyles1 = __styles(
+import { __styles as _styles2 } from '@griffel/react';
+import { __styles as _styles } from '@griffel/react';
+export const useStyles1 = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -9,7 +10,7 @@ export const useStyles1 = __styles(
     d: ['.fe3e8s9{color:red;}'],
   },
 );
-export const useStyles2 = __styles(
+export const useStyles2 = /*#__PURE__*/ _styles2(
   {
     root: {
       sj55zd: 'fka9v86',

packages/babel-preset/__fixtures__/object-computed-keys/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-const rootSlot = 'root';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',

packages/babel-preset/__fixtures__/object-imported-keys/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-import { className, selector } from './consts';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       B0egftl: 'f1wgwx3x',

packages/babel-preset/__fixtures__/object-mixins/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-import { flexStyles, gridStyles, typography } from './mixins';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       mc9l5x: 'f22iagw',

packages/babel-preset/__fixtures__/object-nesting/output.ts

@@ -1,6 +1,5 @@
-import { __styles } from '@griffel/react';
-import { colorBlue } from './consts';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       mc9l5x: 'f22iagw',

packages/babel-preset/__fixtures__/object-sequence-expr/code.ts

@@ -1,4 +1,5 @@
-import { makeStyles, GriffelStyle } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
 
 const switchClassName = 'fui-Switch';
 let _a: Record<string, GriffelStyle>;

packages/babel-preset/__fixtures__/object-sequence-expr/output.ts

@@ -1,7 +1,6 @@
-import { __styles, GriffelStyle } from '@griffel/react';
-const switchClassName = 'fui-Switch';
-let _a: Record<string, GriffelStyle>;
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+import type { GriffelStyle } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       ozcac4: 'f1cm6cy7',

packages/babel-preset/__fixtures__/object-variables/output.ts

@@ -1,7 +1,5 @@
-import { __styles } from '@griffel/react';
-import { colorGreen, theme } from './vars';
-const colorRed = 'red';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',

packages/babel-preset/__fixtures__/object/output.ts

@@ -1,5 +1,5 @@
-import { __styles } from '@griffel/react';
-export const useStyles = __styles(
+import { __styles as _styles } from '@griffel/react';
+export const useStyles = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',