microsoft · layershifter · Sep 20, 2025
@@ -51,3 +51,6 @@ Thumbs.db
 .nx/workspace-data
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "final adjustments",
+  "packageName": "@griffel/transform",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "final adjustments",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "final adjustments",
+  "packageName": "@griffel/webpack-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -51,5 +51,12 @@
   "defaultBase": "main",
   "tui": {
     "enabled": false
+  },
+  "generators": {
+    "@nx/react": {
+      "library": {
+        "unitTestRunner": "none"
+      }
+    }
   }
 }
@@ -55,7 +55,9 @@
     "@rspack/core": "1.3.15",
     "@storybook/addon-webpack5-compiler-babel": "3.0.6",
     "@storybook/react-webpack5": "9.0.9",
+    "@swc-node/register": "~1.9.1",
     "@swc/core": "1.5.29",
+    "@swc/helpers": "~0.5.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.1.0",
@@ -171,10 +173,14 @@
     "browserslist": "^4.19.1",
     "csstype": "^3.1.3",
     "enhanced-resolve": "^5.15.0",
+    "magic-string": "^0.30.19",
+    "oxc-parser": "^0.90.0",
+    "oxc-resolver": "^11.8.2",
+    "oxc-walker": "^0.5.2",
     "rtl-css-js": "^1.16.1",
     "source-map-js": "1.0.2",
     "stylis": "^4.2.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.0"
   },
   "resolutions": {
     "beachball@2.31.5": "patch:beachball@npm:2.31.5#.yarn/patches/beachball-npm-2.31.5-0e84ec4233.patch",

@@ -1,4 +1,4 @@
-export const tokens = {
+export const customTokens = {
   colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)',
   colorBrandBackground: 'var(--colorBrandBackground)',
 };
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+import blank from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = makeStyles({
+  root: { backgroundImage: `url(${blank}), url(${empty})` },
+});
@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f1a1fmuf{background-image:url(./blank.jpg),url(./empty.jpg);}"]
+  }
+}
@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+
+import blank from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = __css({ root: { Bcmaq0h: 'f1a1fmuf' } });
@@ -0,0 +1,11 @@
+import { makeResetStyles } from '@griffel/react';
+
+import blank from './blank.jpg';
+import blankDuplicate from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = makeResetStyles({
+  backgroundImage: `url(${blank})`,
+  ':hover': { backgroundImage: `url(${blankDuplicate})` },
+  ':focus': { backgroundImage: `url(${empty})` },
+});
@@ -0,0 +1,11 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "r": [
+      ".rqpsvrz{background-image:url(./blank.jpg);}",
+      ".rqpsvrz:hover{background-image:url(./blank.jpg);}",
+      ".rqpsvrz:focus{background-image:url(./empty.jpg);}"
+    ]
+  }
+}
@@ -0,0 +1,7 @@
+import { __resetCSS } from '@griffel/react';
+
+import blank from './blank.jpg';
+import blankDuplicate from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = __resetCSS('rqpsvrz', null);
@@ -0,0 +1,13 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  httpUrl: { backgroundImage: 'url(http://www.example.com)' },
+  httpsUrl: { backgroundImage: 'url(https://www.example.com)' },
+  httpsUrlWithQuotes: { backgroundImage: 'url("https://www.example.com")' },
+  dataUrl: { backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)' },
+  dataUrlQuotes: {
+    backgroundImage:
+      'url(\'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="32" aria-hidden="true" viewBox="0 0 16 16" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle"%3E%3Cpath fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"%3E%3C/path%3E%3C/svg%3E\')',
+  },
+  hashOnly: { filter: 'url(#a)' },
+});
@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      ".f405sdg{background-image:url(http://www.example.com);}",
+      ".fvpuk3z{background-image:url(https://www.example.com);}",
+      ".fcrzfig{background-image:url(\"https://www.example.com\");}",
+      ".f1b0d1k8{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}",
+      ".f15gfcnl{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"32\" aria-hidden=\"true\" viewBox=\"0 0 16 16\" width=\"32\" data-view-component=\"true\" class=\"octicon octicon-mark-github v-align-middle\"%3E%3Cpath fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"%3E%3C/path%3E%3C/svg%3E');}",
+      ".f1bk4c0y{filter:url(#a);}"
+    ]
+  }
+}
@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  httpUrl: { Bcmaq0h: 'f405sdg' },
+  httpsUrl: { Bcmaq0h: 'fvpuk3z' },
+  httpsUrlWithQuotes: { Bcmaq0h: 'fcrzfig' },
+  dataUrl: { Bcmaq0h: 'f1b0d1k8' },
+  dataUrlQuotes: { Bcmaq0h: 'f15gfcnl' },
+  hashOnly: { Bhu2qc9: 'f1bk4c0y' },
+});
@@ -0,0 +1,12 @@
+import { makeStyles } from '@griffel/react';
+
+import blank from './blank.jpg';
+import blankDuplicate from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = makeStyles({
+  rootA: { backgroundImage: `url(${blank})` },
+  rootB: { backgroundImage: `url("${blankDuplicate}")` },
+  rootC: { backgroundImage: `url(${empty})` },
+  assetWithHash: { filter: 'url(./a.svg#a)' },
+});
@@ -0,0 +1,12 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [
+      ".fepo2lx{background-image:url(./blank.jpg);}",
+      ".f18nilc4{background-image:url(\"./blank.jpg\");}",
+      ".fsmjahx{background-image:url(./empty.jpg);}",
+      ".f12vvth1{filter:url(./a.svg#a);}"
+    ]
+  }
+}
@@ -0,0 +1,12 @@
+import { __css } from '@griffel/react';
+
+import blank from './blank.jpg';
+import blankDuplicate from './blank.jpg';
+import empty from './empty.jpg';
+
+export const useStyles = __css({
+  rootA: { Bcmaq0h: 'fepo2lx' },
+  rootB: { Bcmaq0h: 'f18nilc4' },
+  rootC: { Bcmaq0h: 'fsmjahx' },
+  assetWithHash: { Bhu2qc9: 'f12vvth1' },
+});
@@ -0,0 +1,14 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {
+    '@media (min-width: 600px)': {
+      paddingLeft: '4px',
+      paddingRight: '4px',
+    },
+    '@supports (display: flex)': {
+      paddingLeft: '4px',
+      paddingRight: '4px',
+    },
+  },
+});
@@ -0,0 +1,24 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "m": [
+      [
+        "@media (min-width: 600px){.f1h4p6a1{padding-right:4px;}.fgefjy{padding-left:4px;}}",
+        {
+          "m": "(min-width: 600px)"
+        }
+      ],
+      [
+        "@media (min-width: 600px){.f1h4p6a1{padding-right:4px;}.fgefjy{padding-left:4px;}}",
+        {
+          "m": "(min-width: 600px)"
+        }
+      ]
+    ],
+    "t": [
+      "@supports (display: flex){.f1dyc5nu{padding-left:4px;}.f1kq3x14{padding-right:4px;}}",
+      "@supports (display: flex){.f1dyc5nu{padding-left:4px;}.f1kq3x14{padding-right:4px;}}"
+    ]
+  }
+}
@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  root: {
+    wbkd2a: ['fgefjy', 'f1h4p6a1'],
+    Dt0rau: ['f1h4p6a1', 'fgefjy'],
+    k2kg1z: ['f1dyc5nu', 'f1kq3x14'],
+    Blnc60a: ['f1kq3x14', 'f1dyc5nu'],
+  },
+});
@@ -0,0 +1,17 @@
+// A small transformPlugin to test configuration options
+// Replaces all "red" strings with "blue" ones
+
+module.exports = function (babel) {
+  const { types: t } = babel;
+
+  return {
+    name: 'color-rename-transformPlugin',
+    visitor: {
+      StringLiteral(path) {
+        if (path.node.value === 'red') {
+          path.replaceWith(t.StringLiteral('blue'));
+        }
+      },
+    },
+  };
+};
@@ -0,0 +1,4 @@
+{
+  "usedProcessing": false,
+  "usedVMForEvaluation": false
+}
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: { color: 'red', paddingLeft: '4px' },
+});
@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".feohi3x{color:red;}", ".f1rwgqon{padding-left:4px;}", ".f1tyzn0d{padding-right:4px;}"]
+  }
+}
@@ -0,0 +1,3 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({ root: { sj55zd: 'feohi3x', uwmqm3: ['f1rwgqon', 'f1tyzn0d'] } });
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+import { colorRed } from './consts';
+
+export const useStyles = makeStyles({
+  // This import has no sense, but it will prevent us from evaluation in AST by Babel
+  // This fixture uses "sampleEvaluator.js" in transformPlugin's config so input we should get a different color
+  root: { color: colorRed },
+});
@@ -0,0 +1 @@
+export const colorRed = 'red';
@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f163i14w{color:blue;}"]
+  }
+}
@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+import { colorRed } from './consts';
+
+export const useStyles = __css({ root: { sj55zd: 'f163i14w' } });
@@ -0,0 +1,12 @@
+// @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' } }]`;
+
+  return [result, null];
+};
+
+module.exports.default = sampleEvaluator;
@@ -0,0 +1,4 @@
+import { makeStyles } from '@griffel/react';
+
+// This file is .js intentionally to avoid TS compiler errors
+export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo');
@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+// @ts-expect-error This module does not have exported member 'colors'
+import { colors } from './tokens';
+
+export const useClassesA = makeStyles({
+  root: { color: colors.foreground },
+});
@@ -0,0 +1 @@
+export const tokens = {};
@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+
+export default makeStyles({
+  root: { color: 'red', paddingLeft: '4px' },
+  icon: { backgroundColor: 'green', marginLeft: '4px' },
+});
@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      ".fe3e8s9{color:red;}",
+      ".fycuoez{padding-left:4px;}",
+      ".f8wuabp{padding-right:4px;}",
+      ".fcnqdeg{background-color:green;}",
+      ".fjf1xye{margin-left:4px;}",
+      ".f8zmjen{margin-right:4px;}"
+    ]
+  }
+}
@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+
+export default __css({
+  root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] },
+  icon: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] },
+});
@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+import { createMixin } from './mixins';
+
+export const useStyles = makeStyles({
+  avatar: createMixin({ display: 'block', opacity: '0' }),
+});
@@ -0,0 +1,7 @@
+import type { GriffelStyle } from '@griffel/core';
+import { tokens } from './tokens';
+
+export const createMixin = (rule: GriffelStyle): GriffelStyle => ({
+  color: tokens.colorBrandBackground,
+  ...rule,
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { __css } from '@griffel/react';

		export const useStyles = __css({ root: { sj55zd: 'feohi3x', uwmqm3: ['f1rwgqon', 'f1tyzn0d'] } });