chore: upgrade to Linaria v5

Author: layershifter

apps/website/docs/react/ahead-of-time-compilation/with-babel.md

@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
 <TabItem value="yarn" label="Yarn">
 
 ```shell
-yarn add --dev @griffel/babel-preset
+yarn add --dev @griffel/babel-preset @griffel/tag-processor
 ```
 
 </TabItem>
 <TabItem value="npm" label="NPM">
 
 ```shell
-npm install --save-dev @griffel/babel-preset
+npm install --save-dev @griffel/babel-preset @griffel/tag-processor
 ```
 
 </TabItem>

apps/website/docs/react/ahead-of-time-compilation/with-webpack.md

@@ -13,14 +13,14 @@ import TabItem from '@theme/TabItem';
 <TabItem value="yarn" label="Yarn">
 
 ```shell
-yarn add --dev @griffel/webpack-loader
+yarn add --dev @griffel/tag-processor @griffel/webpack-loader
 ```
 
 </TabItem>
 <TabItem value="npm" label="NPM">
 
 ```shell
-npm install --save-dev @griffel/webpack-loader
+npm install --save-dev @griffel/tag-processor @griffel/webpack-loader
 ```
 
 </TabItem>

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/tag-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

@@ -3,7 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "e2e/nextjs/src",
   "projectType": "library",
-  "implicitDependencies": ["@griffel/webpack-loader"],
+  "implicitDependencies": ["@griffel/tag-processor", "@griffel/webpack-loader"],
   "targets": {
     "test": {
       "executor": "nx:run-commands",

e2e/nextjs/src/test.ts

@@ -23,6 +23,7 @@ async function performTest() {
       packLocalPackage(rootDir, tempDir, '@griffel/style-types'),
       packLocalPackage(rootDir, tempDir, '@griffel/core'),
       packLocalPackage(rootDir, tempDir, '@griffel/react'),
+      packLocalPackage(rootDir, tempDir, '@griffel/tag-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-react": "^7.14.5",
     "@babel/preset-typescript": "7.12.13",
     "@codesandbox/sandpack-react": "1.18.4",
@@ -50,6 +51,7 @@
     "@storybook/builder-webpack5": "6.5.15",
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
+    "@swc/core": "^1.3.19",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "13.4.0",
     "@tsconfig/docusaurus": "^1.0.4",
@@ -140,20 +142,18 @@
   },
   "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.9.0",
-    "@linaria/babel-preset": "^3.0.0-beta.24",
-    "@linaria/shaker": "^3.0.0-beta.22",
-    "@swc/core": "^1.3.19",
+    "@linaria/babel-preset": "^5.0.2",
+    "@linaria/shaker": "^5.0.1",
+    "@linaria/tags": "^5.0.1",
+    "@linaria/utils": "^5.0.1",
+    "@linaria/webpack-loader": "^5.0.2",
     "@typescript-eslint/utils": "^5.47.0",
     "ajv": "^8.4.0",
     "browserslist": "^4.19.1",
     "csstype": "^3.1.2",
-    "enhanced-resolve": "^5.8.2",
     "rtl-css-js": "^1.16.1",
     "source-map-js": "1.0.2",
     "stylis": "^4.2.0",

packages/babel-preset/README.md

@@ -22,9 +22,9 @@ A Babel preset that performs build time transforms for [`@griffel/react`](../rea
 ## Install
 
 ```bash
-yarn add --dev @griffel/babel-preset
+yarn add --dev @griffel/babel-preset @griffel/tag-processor
 # or
-npm install --save-dev @griffel/babel-preset
+npm install --save-dev @griffel/babel-preset @griffel/tag-processor
 ```
 
 ## When to use it?
@@ -50,22 +50,27 @@ import { makeStyles } from 'custom-package';
 import { createStyles } from 'custom-package';
 ```
 
-By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings should be tweaked:
+By default, preset handles imports from `@griffel/react` & `@fluentui/react-components`, to handle imports from custom packages settings you need to include meta information to a matching `package.json`:
 
 ```json
 {
-  "presets": [
-    [
-      "@griffel",
-      {
-        "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
-      }
-    ]
-  ]
+  "name": "custom-package",
+  "version": "1.0.0",
+  "linaria": {
+    "tags": {
+      "makeStyles": "@griffel/tag-processor/make-styles",
+      "makeResetStyles": "@griffel/tag-processor/make-reset-styles"
+    }
+  }
 }
 ```
 
-> **Note**: "custom-package" should re-export `__styles` function from `@griffel/react`
+> **Note**: "custom-package" should re-export following functions from `@griffel/react`:
+>
+> - `__styles`
+> - `__css`
+> - `__resetStyles`
+> - `__resetCSS`
 
 ### Configuring Babel settings
 
@@ -157,9 +162,9 @@ const useStyles = makeStyles({
 roughly to
 
 ```js
-import { __styles } from '@griffel/react';
+import { __styles as _styles } from '@griffel/react';
 
-const useStyles = __styles(/* resolved styles */);
+const useStyles = _styles(/* resolved styles */);
 ```
 
 ## Access CSS output from code
@@ -218,7 +223,7 @@ However, the concepts are not coupled to the repo setup.
 
 ### Module evaluation
 
-The preset uses tools from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles`.
+The preset reuses `@linaria/babel-preset` from [linaria](https://github.com/callstack/linaria) to evaluate runtime calls of `makeStyles` and `makeResetStyles`.
 [Linaria's debugging documentation can help here](https://github.com/callstack/linaria/blob/master/CONTRIBUTING.md#debugging-and-deep-dive-into-babel-plugin).
 
 Debugging output can be activated with following environment variables:
@@ -232,9 +237,3 @@ On Windows it's required to set environment variables via [`set`](https://docs.m
 ```sh
 $ cross-env DEBUG=linaria\* LINARIA_LOG=debug yarn build
 ```
-
-The debug output will include:
-
-- Prepared code
-- Evaluated code
-- AST that indicates what code has been shaken with `@linaria/shaker`

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{filter:url(${_asset3}#a);}`,
+      `.f1lg9ji5{background-image:url(${_asset});}`,
+      `.feire57{background-image:url(${_asset2});}`,
+      `.f12vvth1{filter:url(./a.svg#a);}`,
     ],
   },
 );

packages/babel-preset/__fixtures__/at-rules/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: {
       cvzfql: ['f13wceqr', 'fmtq1hn'],

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,12 +1,19 @@
 // @ts-check
 
-/** @type {import("@linaria/babel-preset").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' } }]`;
+/** @type {import("@linaria/utils").Evaluator} */
+const sampleEvaluator = (babelOptions, ast) => {
+  // 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];
+  return [ast, result, null];
 };
 
 module.exports.default = sampleEvaluator;

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;}'],
+  },
+);