chore: upgrade to Linaria v4

change/@griffel-babel-preset-b40a43d0-1b08-4469-8ac1-c1d56a93523d.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "BREAKING: update to Linaria v4",
+  "packageName": "@griffel/babel-preset",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-linaria-processor-b20f4e52-7e3f-4efc-ac1d-6157f9fb99ee.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "chore: initial release",
+  "packageName": "@griffel/linaria-processor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-react-0d6fd156-25c5-453b-a0d6-633a6c4adcb8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add meta to package.json for @griffel/processor",
+  "packageName": "@griffel/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-webpack-loader-294e1c0f-f12b-4129-b5dc-27cdebd726d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "BREAKING: update to Linaria v4",
+  "packageName": "@griffel/webpack-loader",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

e2e/nextjs/project.json

@@ -2,7 +2,7 @@
   "root": "e2e/nextjs",
   "sourceRoot": "e2e/nextjs/src",
   "projectType": "library",
-  "implicitDependencies": ["@griffel/webpack-loader"],
+  "implicitDependencies": ["@griffel/linaria-processor", "@griffel/webpack-loader"],
   "targets": {
     "test": {
       "executor": "@nrwl/workspace:run-commands",

e2e/nextjs/src/test.ts

@@ -22,6 +22,7 @@ async function performTest() {
     const resolutions = await Promise.all([
       packLocalPackage(rootDir, tempDir, '@griffel/core'),
       packLocalPackage(rootDir, tempDir, '@griffel/react'),
+      packLocalPackage(rootDir, tempDir, '@griffel/linaria-processor'),
       packLocalPackage(rootDir, tempDir, '@griffel/webpack-extraction-plugin'),
       packLocalPackage(rootDir, tempDir, '@griffel/webpack-loader'),
       packLocalPackage(rootDir, tempDir, '@griffel/next-extraction-plugin'),

package.json

@@ -26,6 +26,7 @@
     "type-check": "nx affected --target=type-check"
   },
   "devDependencies": {
+    "@babel/generator": "^7.12.13",
     "@babel/preset-typescript": "7.12.13",
     "@codesandbox/sandpack-react": "1.18.4",
     "@codesandbox/sandpack-themes": "1.17.0",
@@ -117,20 +118,19 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.13",
-    "@babel/generator": "^7.12.13",
     "@babel/helper-module-imports": "^7.12.13",
     "@babel/helper-plugin-utils": "^7.12.13",
-    "@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",
     "browserslist": "^4.19.1",
     "csstype": "^3.0.10",
-    "enhanced-resolve": "^5.8.2",
     "rtl-css-js": "^1.16.0",
     "source-map-js": "1.0.2",
     "stylis": "^4.0.13",

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__/duplicated-imports/code.ts

@@ -1,12 +1,10 @@
-// @ts-expect-error This module does not exist, but will be resolved via aliases
-import { createStylesA } from 'custom-package';
-// @ts-expect-error This module does not exist, but will be resolved via aliases
-import { createStylesB } from 'custom-package';
+import { makeStyles as makeStylesA } from '@griffel/react';
+import { makeStyles as makeStylesB } from '@griffel/react';
 
-export const useClassesA = createStylesA({
+export const useClassesA = makeStylesA({
   root: { color: 'red' },
 });
 
-export const useClassesB = createStylesB({
+export const useClassesB = makeStylesB({
   root: { color: 'yellow' },
 });

packages/babel-preset/__fixtures__/duplicated-imports/output.ts

@@ -1,8 +1,6 @@
-// @ts-expect-error This module does not exist, but will be resolved via aliases
-import { __styles } from 'custom-package';
-// @ts-expect-error This module does not exist, but will be resolved via aliases
-import { createStylesB } from 'custom-package';
-export const useClassesA = __styles(
+import { __styles as _styles2 } from '@griffel/react';
+import { __styles as _styles } from '@griffel/react';
+export const useClassesA = /*#__PURE__*/ _styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -12,8 +10,13 @@ export const useClassesA = __styles(
     d: ['.fe3e8s9{color:red;}'],
   },
 );
-export const useClassesB = createStylesB({
-  root: {
-    color: 'yellow',
+export const useClassesB = /*#__PURE__*/ _styles2(
+  {
+    root: {
+      sj55zd: 'f1aqe04n',
+    },
   },
-});
+  {
+    d: ['.f1aqe04n{color:yellow;}'],
+  },
+);

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',