chore: migrate to to wyw-in-js

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: migrate to to wyw-in-js",
+  "packageName": "@griffel/babel-preset",
+  "email": "olfedias@microsoft.com",
+  "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": "olfedias@microsoft.com",
+  "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/tag-processor",
+  "packageName": "@griffel/react",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "BREAKING: migrate to to wyw-in-js",
+  "packageName": "@griffel/webpack-loader",
+  "email": "olfedias@microsoft.com",
+  "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`