From 89e085c17cf602576a5379430123e8117150271f Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 31 May 2024 12:54:09 +0200
Subject: [PATCH 1/4] chore: move fixtures to "aot" folder

---
 .../assets-multiple-declarations/blank.jpg    | Bin
 .../assets-multiple-declarations/code.ts      |   0
 .../assets-multiple-declarations/empty.jpg    | Bin
 .../assets-multiple-declarations/output.ts    |   4 +-
 .../{ => aot}/assets-reset-styles/blank.jpg   | Bin
 .../{ => aot}/assets-reset-styles/code.ts     |   0
 .../{ => aot}/assets-reset-styles/empty.jpg   | Bin
 .../{ => aot}/assets-reset-styles/output.ts   |   8 +-
 .../{ => aot}/assets-urls/code.ts             |   0
 .../{ => aot}/assets-urls/output.ts           |   0
 .../__fixtures__/{ => aot}/assets/blank.jpg   | Bin
 .../__fixtures__/{ => aot}/assets/code.ts     |   0
 .../__fixtures__/{ => aot}/assets/empty.jpg   | Bin
 .../__fixtures__/{ => aot}/assets/output.ts   |  14 +-
 .../__fixtures__/{ => aot}/at-rules/code.ts   |   0
 .../__fixtures__/{ => aot}/at-rules/output.ts |   0
 .../{ => aot}/config-babel-options/code.ts    |   0
 .../config-babel-options/colorRenamePlugin.js |   0
 .../{ => aot}/config-babel-options/output.ts  |   0
 .../config-classname-hash-salt/code.ts        |   0
 .../config-classname-hash-salt/output.ts      |   0
 .../{ => aot}/config-evaluation-rules/code.ts |   0
 .../config-evaluation-rules/consts.ts         |   0
 .../config-evaluation-rules/output.ts         |   0
 .../sampleEvaluator.js                        |   0
 .../{ => aot}/duplicated-imports/code.ts      |   0
 .../{ => aot}/duplicated-imports/output.ts    |   0
 .../{ => aot}/error-argument-count/fixture.js |   0
 .../error-config-babel-options/fixture.ts     |   0
 .../{ => aot}/error-on-undefined/fixture.ts   |   0
 .../{ => aot}/error-on-undefined/tokens.ts    |   0
 .../{ => aot}/function-mixin/code.ts          |   0
 .../{ => aot}/function-mixin/mixins.ts        |   0
 .../{ => aot}/function-mixin/output.ts        |   0
 .../{ => aot}/function-mixin/tokens.ts        |   0
 .../{ => aot}/import-alias/code.ts            |   0
 .../{ => aot}/import-alias/output.ts          |   0
 .../{ => aot}/import-custom-module/code.ts    |   0
 .../{ => aot}/import-custom-module/output.ts  |   0
 .../{ => aot}/import-custom-name/code.ts      |   0
 .../{ => aot}/import-custom-name/output.ts    |   0
 .../__fixtures__/{ => aot}/keyframes/code.ts  |   0
 .../{ => aot}/keyframes/output.ts             |   0
 .../{ => aot}/multiple-declarations/code.ts   |   0
 .../{ => aot}/multiple-declarations/output.ts |   0
 .../non-existing-module-call/code.ts          |   0
 .../non-existing-module-call/module.ts        |   0
 .../non-existing-module-call/output.ts        |   0
 .../{ => aot}/object-computed-keys/code.ts    |   0
 .../{ => aot}/object-computed-keys/output.ts  |   0
 .../{ => aot}/object-imported-keys/code.ts    |   0
 .../{ => aot}/object-imported-keys/consts.ts  |   0
 .../{ => aot}/object-imported-keys/output.ts  |   0
 .../{ => aot}/object-mixins/code.ts           |   0
 .../{ => aot}/object-mixins/mixins.ts         |   0
 .../{ => aot}/object-mixins/output.ts         |   0
 .../{ => aot}/object-mixins/tokens.ts         |   0
 .../{ => aot}/object-nesting/code.ts          |   0
 .../{ => aot}/object-nesting/consts.ts        |   0
 .../{ => aot}/object-nesting/output.ts        |   0
 .../{ => aot}/object-reset/code.ts            |   0
 .../{ => aot}/object-reset/output.ts          |   0
 .../{ => aot}/object-sequence-expr/code.ts    |   0
 .../{ => aot}/object-sequence-expr/output.ts  |   0
 .../{ => aot}/object-shorthands/code.ts       |   0
 .../{ => aot}/object-shorthands/output.ts     |   0
 .../{ => aot}/object-variables/code.ts        |   0
 .../{ => aot}/object-variables/output.ts      |   0
 .../{ => aot}/object-variables/vars.ts        |   0
 .../__fixtures__/{ => aot}/object/code.ts     |   0
 .../__fixtures__/{ => aot}/object/output.ts   |   0
 .../{ => aot}/require-custom-module/code.ts   |   0
 .../{ => aot}/require-custom-module/output.ts |   0
 .../{ => aot}/require-reset-styles/code.ts    |   0
 .../{ => aot}/require-reset-styles/output.ts  |   0
 .../__fixtures__/{ => aot}/require/code.ts    |   0
 .../__fixtures__/{ => aot}/require/output.ts  |   0
 .../{ => aot}/reset-styles-at-rules/code.ts   |   0
 .../{ => aot}/reset-styles-at-rules/output.ts |   0
 .../{ => aot}/reset-styles/code.ts            |   0
 .../{ => aot}/reset-styles/output.ts          |   0
 .../{ => aot}/rules-with-metadata/code.ts     |   0
 .../{ => aot}/rules-with-metadata/output.ts   |   0
 .../{ => aot}/shared-mixins/code.ts           |   0
 .../{ => aot}/shared-mixins/mixins.ts         |   0
 .../{ => aot}/shared-mixins/output.ts         |   0
 .../__fixtures__/{ => aot}/tokens/code.ts     |   0
 .../__fixtures__/{ => aot}/tokens/output.ts   |   0
 .../__fixtures__/{ => aot}/tokens/tokens.ts   |   0
 .../unsupported-css-properties/fixture.ts     |   0
 .../unsupported-css-properties/output.ts      |   0
 .../babel-preset/src/transformPlugin.test.ts  | 150 +++++++++---------
 92 files changed, 88 insertions(+), 88 deletions(-)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-multiple-declarations/blank.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-multiple-declarations/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-multiple-declarations/empty.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-multiple-declarations/output.ts (71%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-reset-styles/blank.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-reset-styles/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-reset-styles/empty.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-reset-styles/output.ts (51%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-urls/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets-urls/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets/blank.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets/empty.jpg (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/assets/output.ts (61%)
 rename packages/babel-preset/__fixtures__/{ => aot}/at-rules/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/at-rules/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-babel-options/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-babel-options/colorRenamePlugin.js (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-babel-options/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-classname-hash-salt/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-classname-hash-salt/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-evaluation-rules/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-evaluation-rules/consts.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-evaluation-rules/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/config-evaluation-rules/sampleEvaluator.js (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/duplicated-imports/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/duplicated-imports/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/error-argument-count/fixture.js (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/error-config-babel-options/fixture.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/error-on-undefined/fixture.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/error-on-undefined/tokens.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/function-mixin/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/function-mixin/mixins.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/function-mixin/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/function-mixin/tokens.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-alias/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-alias/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-custom-module/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-custom-module/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-custom-name/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/import-custom-name/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/keyframes/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/keyframes/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/multiple-declarations/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/multiple-declarations/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/non-existing-module-call/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/non-existing-module-call/module.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/non-existing-module-call/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-computed-keys/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-computed-keys/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-imported-keys/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-imported-keys/consts.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-imported-keys/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-mixins/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-mixins/mixins.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-mixins/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-mixins/tokens.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-nesting/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-nesting/consts.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-nesting/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-reset/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-reset/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-sequence-expr/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-sequence-expr/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-shorthands/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-shorthands/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-variables/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-variables/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object-variables/vars.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/object/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require-custom-module/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require-custom-module/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require-reset-styles/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require-reset-styles/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/require/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/reset-styles-at-rules/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/reset-styles-at-rules/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/reset-styles/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/reset-styles/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/rules-with-metadata/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/rules-with-metadata/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/shared-mixins/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/shared-mixins/mixins.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/shared-mixins/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/tokens/code.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/tokens/output.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/tokens/tokens.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/unsupported-css-properties/fixture.ts (100%)
 rename packages/babel-preset/__fixtures__/{ => aot}/unsupported-css-properties/output.ts (100%)

diff --git a/packages/babel-preset/__fixtures__/assets-multiple-declarations/blank.jpg b/packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/blank.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-multiple-declarations/blank.jpg
rename to packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/blank.jpg
diff --git a/packages/babel-preset/__fixtures__/assets-multiple-declarations/code.ts b/packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-multiple-declarations/code.ts
rename to packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/code.ts
diff --git a/packages/babel-preset/__fixtures__/assets-multiple-declarations/empty.jpg b/packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/empty.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-multiple-declarations/empty.jpg
rename to packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/empty.jpg
diff --git a/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts b/packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/output.ts
similarity index 71%
rename from packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts
rename to packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/output.ts
index 56fa34f7a..d4a534223 100644
--- a/packages/babel-preset/__fixtures__/assets-multiple-declarations/output.ts
+++ b/packages/babel-preset/__fixtures__/aot/assets-multiple-declarations/output.ts
@@ -6,10 +6,10 @@ import empty from './empty.jpg';
 export const useStyles = __styles(
   {
     root: {
-      Bcmaq0h: 'fp00rh9',
+      Bcmaq0h: 'f156c6do',
     },
   },
   {
-    d: [`.fp00rh9{background-image:url(${_asset}),url(${_asset2});}`],
+    d: [`.f156c6do{background-image:url(${_asset}),url(${_asset2});}`],
   },
 );
diff --git a/packages/babel-preset/__fixtures__/assets-reset-styles/blank.jpg b/packages/babel-preset/__fixtures__/aot/assets-reset-styles/blank.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-reset-styles/blank.jpg
rename to packages/babel-preset/__fixtures__/aot/assets-reset-styles/blank.jpg
diff --git a/packages/babel-preset/__fixtures__/assets-reset-styles/code.ts b/packages/babel-preset/__fixtures__/aot/assets-reset-styles/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-reset-styles/code.ts
rename to packages/babel-preset/__fixtures__/aot/assets-reset-styles/code.ts
diff --git a/packages/babel-preset/__fixtures__/assets-reset-styles/empty.jpg b/packages/babel-preset/__fixtures__/aot/assets-reset-styles/empty.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-reset-styles/empty.jpg
rename to packages/babel-preset/__fixtures__/aot/assets-reset-styles/empty.jpg
diff --git a/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts b/packages/babel-preset/__fixtures__/aot/assets-reset-styles/output.ts
similarity index 51%
rename from packages/babel-preset/__fixtures__/assets-reset-styles/output.ts
rename to packages/babel-preset/__fixtures__/aot/assets-reset-styles/output.ts
index f582824f6..a1bbe05c2 100644
--- a/packages/babel-preset/__fixtures__/assets-reset-styles/output.ts
+++ b/packages/babel-preset/__fixtures__/aot/assets-reset-styles/output.ts
@@ -4,8 +4,8 @@ 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 = __resetStyles('r1lqxq8z', null, [
+  `.r1lqxq8z{background-image:url(${_asset});}`,
+  `.r1lqxq8z:hover{background-image:url(${_asset});}`,
+  `.r1lqxq8z:focus{background-image:url(${_asset2});}`,
 ]);
diff --git a/packages/babel-preset/__fixtures__/assets-urls/code.ts b/packages/babel-preset/__fixtures__/aot/assets-urls/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-urls/code.ts
rename to packages/babel-preset/__fixtures__/aot/assets-urls/code.ts
diff --git a/packages/babel-preset/__fixtures__/assets-urls/output.ts b/packages/babel-preset/__fixtures__/aot/assets-urls/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets-urls/output.ts
rename to packages/babel-preset/__fixtures__/aot/assets-urls/output.ts
diff --git a/packages/babel-preset/__fixtures__/assets/blank.jpg b/packages/babel-preset/__fixtures__/aot/assets/blank.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets/blank.jpg
rename to packages/babel-preset/__fixtures__/aot/assets/blank.jpg
diff --git a/packages/babel-preset/__fixtures__/assets/code.ts b/packages/babel-preset/__fixtures__/aot/assets/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets/code.ts
rename to packages/babel-preset/__fixtures__/aot/assets/code.ts
diff --git a/packages/babel-preset/__fixtures__/assets/empty.jpg b/packages/babel-preset/__fixtures__/aot/assets/empty.jpg
similarity index 100%
rename from packages/babel-preset/__fixtures__/assets/empty.jpg
rename to packages/babel-preset/__fixtures__/aot/assets/empty.jpg
diff --git a/packages/babel-preset/__fixtures__/assets/output.ts b/packages/babel-preset/__fixtures__/aot/assets/output.ts
similarity index 61%
rename from packages/babel-preset/__fixtures__/assets/output.ts
rename to packages/babel-preset/__fixtures__/aot/assets/output.ts
index 652af3b2d..3da209aed 100644
--- a/packages/babel-preset/__fixtures__/assets/output.ts
+++ b/packages/babel-preset/__fixtures__/aot/assets/output.ts
@@ -8,23 +8,23 @@ import empty from './empty.jpg';
 export const useStyles = __styles(
   {
     rootA: {
-      Bcmaq0h: 'fnwsaxv',
+      Bcmaq0h: 'f1679hrc',
     },
     rootB: {
-      Bcmaq0h: 'fnwsaxv',
+      Bcmaq0h: 'f1679hrc',
     },
     rootC: {
-      Bcmaq0h: 'f1ryfumh',
+      Bcmaq0h: 'f9o9pwl',
     },
     assetWithHash: {
-      Bhu2qc9: 'fv04sme',
+      Bhu2qc9: 'f1a9657d',
     },
   },
   {
     d: [
-      `.fnwsaxv{background-image:url(${_asset});}`,
-      `.f1ryfumh{background-image:url(${_asset2});}`,
-      `.fv04sme{filter:url(${_asset3}#a);}`,
+      `.f1679hrc{background-image:url(${_asset});}`,
+      `.f9o9pwl{background-image:url(${_asset2});}`,
+      `.f1a9657d{filter:url(${_asset3}#a);}`,
     ],
   },
 );
diff --git a/packages/babel-preset/__fixtures__/at-rules/code.ts b/packages/babel-preset/__fixtures__/aot/at-rules/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/at-rules/code.ts
rename to packages/babel-preset/__fixtures__/aot/at-rules/code.ts
diff --git a/packages/babel-preset/__fixtures__/at-rules/output.ts b/packages/babel-preset/__fixtures__/aot/at-rules/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/at-rules/output.ts
rename to packages/babel-preset/__fixtures__/aot/at-rules/output.ts
diff --git a/packages/babel-preset/__fixtures__/config-babel-options/code.ts b/packages/babel-preset/__fixtures__/aot/config-babel-options/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-babel-options/code.ts
rename to packages/babel-preset/__fixtures__/aot/config-babel-options/code.ts
diff --git a/packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin.js b/packages/babel-preset/__fixtures__/aot/config-babel-options/colorRenamePlugin.js
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin.js
rename to packages/babel-preset/__fixtures__/aot/config-babel-options/colorRenamePlugin.js
diff --git a/packages/babel-preset/__fixtures__/config-babel-options/output.ts b/packages/babel-preset/__fixtures__/aot/config-babel-options/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-babel-options/output.ts
rename to packages/babel-preset/__fixtures__/aot/config-babel-options/output.ts
diff --git a/packages/babel-preset/__fixtures__/config-classname-hash-salt/code.ts b/packages/babel-preset/__fixtures__/aot/config-classname-hash-salt/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-classname-hash-salt/code.ts
rename to packages/babel-preset/__fixtures__/aot/config-classname-hash-salt/code.ts
diff --git a/packages/babel-preset/__fixtures__/config-classname-hash-salt/output.ts b/packages/babel-preset/__fixtures__/aot/config-classname-hash-salt/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-classname-hash-salt/output.ts
rename to packages/babel-preset/__fixtures__/aot/config-classname-hash-salt/output.ts
diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/code.ts b/packages/babel-preset/__fixtures__/aot/config-evaluation-rules/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-evaluation-rules/code.ts
rename to packages/babel-preset/__fixtures__/aot/config-evaluation-rules/code.ts
diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/consts.ts b/packages/babel-preset/__fixtures__/aot/config-evaluation-rules/consts.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-evaluation-rules/consts.ts
rename to packages/babel-preset/__fixtures__/aot/config-evaluation-rules/consts.ts
diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts b/packages/babel-preset/__fixtures__/aot/config-evaluation-rules/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-evaluation-rules/output.ts
rename to packages/babel-preset/__fixtures__/aot/config-evaluation-rules/output.ts
diff --git a/packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js b/packages/babel-preset/__fixtures__/aot/config-evaluation-rules/sampleEvaluator.js
similarity index 100%
rename from packages/babel-preset/__fixtures__/config-evaluation-rules/sampleEvaluator.js
rename to packages/babel-preset/__fixtures__/aot/config-evaluation-rules/sampleEvaluator.js
diff --git a/packages/babel-preset/__fixtures__/duplicated-imports/code.ts b/packages/babel-preset/__fixtures__/aot/duplicated-imports/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/duplicated-imports/code.ts
rename to packages/babel-preset/__fixtures__/aot/duplicated-imports/code.ts
diff --git a/packages/babel-preset/__fixtures__/duplicated-imports/output.ts b/packages/babel-preset/__fixtures__/aot/duplicated-imports/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/duplicated-imports/output.ts
rename to packages/babel-preset/__fixtures__/aot/duplicated-imports/output.ts
diff --git a/packages/babel-preset/__fixtures__/error-argument-count/fixture.js b/packages/babel-preset/__fixtures__/aot/error-argument-count/fixture.js
similarity index 100%
rename from packages/babel-preset/__fixtures__/error-argument-count/fixture.js
rename to packages/babel-preset/__fixtures__/aot/error-argument-count/fixture.js
diff --git a/packages/babel-preset/__fixtures__/error-config-babel-options/fixture.ts b/packages/babel-preset/__fixtures__/aot/error-config-babel-options/fixture.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/error-config-babel-options/fixture.ts
rename to packages/babel-preset/__fixtures__/aot/error-config-babel-options/fixture.ts
diff --git a/packages/babel-preset/__fixtures__/error-on-undefined/fixture.ts b/packages/babel-preset/__fixtures__/aot/error-on-undefined/fixture.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/error-on-undefined/fixture.ts
rename to packages/babel-preset/__fixtures__/aot/error-on-undefined/fixture.ts
diff --git a/packages/babel-preset/__fixtures__/error-on-undefined/tokens.ts b/packages/babel-preset/__fixtures__/aot/error-on-undefined/tokens.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/error-on-undefined/tokens.ts
rename to packages/babel-preset/__fixtures__/aot/error-on-undefined/tokens.ts
diff --git a/packages/babel-preset/__fixtures__/function-mixin/code.ts b/packages/babel-preset/__fixtures__/aot/function-mixin/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/function-mixin/code.ts
rename to packages/babel-preset/__fixtures__/aot/function-mixin/code.ts
diff --git a/packages/babel-preset/__fixtures__/function-mixin/mixins.ts b/packages/babel-preset/__fixtures__/aot/function-mixin/mixins.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/function-mixin/mixins.ts
rename to packages/babel-preset/__fixtures__/aot/function-mixin/mixins.ts
diff --git a/packages/babel-preset/__fixtures__/function-mixin/output.ts b/packages/babel-preset/__fixtures__/aot/function-mixin/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/function-mixin/output.ts
rename to packages/babel-preset/__fixtures__/aot/function-mixin/output.ts
diff --git a/packages/babel-preset/__fixtures__/function-mixin/tokens.ts b/packages/babel-preset/__fixtures__/aot/function-mixin/tokens.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/function-mixin/tokens.ts
rename to packages/babel-preset/__fixtures__/aot/function-mixin/tokens.ts
diff --git a/packages/babel-preset/__fixtures__/import-alias/code.ts b/packages/babel-preset/__fixtures__/aot/import-alias/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-alias/code.ts
rename to packages/babel-preset/__fixtures__/aot/import-alias/code.ts
diff --git a/packages/babel-preset/__fixtures__/import-alias/output.ts b/packages/babel-preset/__fixtures__/aot/import-alias/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-alias/output.ts
rename to packages/babel-preset/__fixtures__/aot/import-alias/output.ts
diff --git a/packages/babel-preset/__fixtures__/import-custom-module/code.ts b/packages/babel-preset/__fixtures__/aot/import-custom-module/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-custom-module/code.ts
rename to packages/babel-preset/__fixtures__/aot/import-custom-module/code.ts
diff --git a/packages/babel-preset/__fixtures__/import-custom-module/output.ts b/packages/babel-preset/__fixtures__/aot/import-custom-module/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-custom-module/output.ts
rename to packages/babel-preset/__fixtures__/aot/import-custom-module/output.ts
diff --git a/packages/babel-preset/__fixtures__/import-custom-name/code.ts b/packages/babel-preset/__fixtures__/aot/import-custom-name/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-custom-name/code.ts
rename to packages/babel-preset/__fixtures__/aot/import-custom-name/code.ts
diff --git a/packages/babel-preset/__fixtures__/import-custom-name/output.ts b/packages/babel-preset/__fixtures__/aot/import-custom-name/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/import-custom-name/output.ts
rename to packages/babel-preset/__fixtures__/aot/import-custom-name/output.ts
diff --git a/packages/babel-preset/__fixtures__/keyframes/code.ts b/packages/babel-preset/__fixtures__/aot/keyframes/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/keyframes/code.ts
rename to packages/babel-preset/__fixtures__/aot/keyframes/code.ts
diff --git a/packages/babel-preset/__fixtures__/keyframes/output.ts b/packages/babel-preset/__fixtures__/aot/keyframes/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/keyframes/output.ts
rename to packages/babel-preset/__fixtures__/aot/keyframes/output.ts
diff --git a/packages/babel-preset/__fixtures__/multiple-declarations/code.ts b/packages/babel-preset/__fixtures__/aot/multiple-declarations/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/multiple-declarations/code.ts
rename to packages/babel-preset/__fixtures__/aot/multiple-declarations/code.ts
diff --git a/packages/babel-preset/__fixtures__/multiple-declarations/output.ts b/packages/babel-preset/__fixtures__/aot/multiple-declarations/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/multiple-declarations/output.ts
rename to packages/babel-preset/__fixtures__/aot/multiple-declarations/output.ts
diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/code.ts b/packages/babel-preset/__fixtures__/aot/non-existing-module-call/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/non-existing-module-call/code.ts
rename to packages/babel-preset/__fixtures__/aot/non-existing-module-call/code.ts
diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/module.ts b/packages/babel-preset/__fixtures__/aot/non-existing-module-call/module.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/non-existing-module-call/module.ts
rename to packages/babel-preset/__fixtures__/aot/non-existing-module-call/module.ts
diff --git a/packages/babel-preset/__fixtures__/non-existing-module-call/output.ts b/packages/babel-preset/__fixtures__/aot/non-existing-module-call/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/non-existing-module-call/output.ts
rename to packages/babel-preset/__fixtures__/aot/non-existing-module-call/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-computed-keys/code.ts b/packages/babel-preset/__fixtures__/aot/object-computed-keys/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-computed-keys/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-computed-keys/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-computed-keys/output.ts b/packages/babel-preset/__fixtures__/aot/object-computed-keys/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-computed-keys/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-computed-keys/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-imported-keys/code.ts b/packages/babel-preset/__fixtures__/aot/object-imported-keys/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-imported-keys/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-imported-keys/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-imported-keys/consts.ts b/packages/babel-preset/__fixtures__/aot/object-imported-keys/consts.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-imported-keys/consts.ts
rename to packages/babel-preset/__fixtures__/aot/object-imported-keys/consts.ts
diff --git a/packages/babel-preset/__fixtures__/object-imported-keys/output.ts b/packages/babel-preset/__fixtures__/aot/object-imported-keys/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-imported-keys/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-imported-keys/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-mixins/code.ts b/packages/babel-preset/__fixtures__/aot/object-mixins/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-mixins/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-mixins/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-mixins/mixins.ts b/packages/babel-preset/__fixtures__/aot/object-mixins/mixins.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-mixins/mixins.ts
rename to packages/babel-preset/__fixtures__/aot/object-mixins/mixins.ts
diff --git a/packages/babel-preset/__fixtures__/object-mixins/output.ts b/packages/babel-preset/__fixtures__/aot/object-mixins/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-mixins/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-mixins/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-mixins/tokens.ts b/packages/babel-preset/__fixtures__/aot/object-mixins/tokens.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-mixins/tokens.ts
rename to packages/babel-preset/__fixtures__/aot/object-mixins/tokens.ts
diff --git a/packages/babel-preset/__fixtures__/object-nesting/code.ts b/packages/babel-preset/__fixtures__/aot/object-nesting/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-nesting/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-nesting/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-nesting/consts.ts b/packages/babel-preset/__fixtures__/aot/object-nesting/consts.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-nesting/consts.ts
rename to packages/babel-preset/__fixtures__/aot/object-nesting/consts.ts
diff --git a/packages/babel-preset/__fixtures__/object-nesting/output.ts b/packages/babel-preset/__fixtures__/aot/object-nesting/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-nesting/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-nesting/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-reset/code.ts b/packages/babel-preset/__fixtures__/aot/object-reset/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-reset/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-reset/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-reset/output.ts b/packages/babel-preset/__fixtures__/aot/object-reset/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-reset/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-reset/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/code.ts b/packages/babel-preset/__fixtures__/aot/object-sequence-expr/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-sequence-expr/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-sequence-expr/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-sequence-expr/output.ts b/packages/babel-preset/__fixtures__/aot/object-sequence-expr/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-sequence-expr/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-sequence-expr/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-shorthands/code.ts b/packages/babel-preset/__fixtures__/aot/object-shorthands/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-shorthands/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-shorthands/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-shorthands/output.ts b/packages/babel-preset/__fixtures__/aot/object-shorthands/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-shorthands/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-shorthands/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-variables/code.ts b/packages/babel-preset/__fixtures__/aot/object-variables/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-variables/code.ts
rename to packages/babel-preset/__fixtures__/aot/object-variables/code.ts
diff --git a/packages/babel-preset/__fixtures__/object-variables/output.ts b/packages/babel-preset/__fixtures__/aot/object-variables/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-variables/output.ts
rename to packages/babel-preset/__fixtures__/aot/object-variables/output.ts
diff --git a/packages/babel-preset/__fixtures__/object-variables/vars.ts b/packages/babel-preset/__fixtures__/aot/object-variables/vars.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object-variables/vars.ts
rename to packages/babel-preset/__fixtures__/aot/object-variables/vars.ts
diff --git a/packages/babel-preset/__fixtures__/object/code.ts b/packages/babel-preset/__fixtures__/aot/object/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object/code.ts
rename to packages/babel-preset/__fixtures__/aot/object/code.ts
diff --git a/packages/babel-preset/__fixtures__/object/output.ts b/packages/babel-preset/__fixtures__/aot/object/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/object/output.ts
rename to packages/babel-preset/__fixtures__/aot/object/output.ts
diff --git a/packages/babel-preset/__fixtures__/require-custom-module/code.ts b/packages/babel-preset/__fixtures__/aot/require-custom-module/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require-custom-module/code.ts
rename to packages/babel-preset/__fixtures__/aot/require-custom-module/code.ts
diff --git a/packages/babel-preset/__fixtures__/require-custom-module/output.ts b/packages/babel-preset/__fixtures__/aot/require-custom-module/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require-custom-module/output.ts
rename to packages/babel-preset/__fixtures__/aot/require-custom-module/output.ts
diff --git a/packages/babel-preset/__fixtures__/require-reset-styles/code.ts b/packages/babel-preset/__fixtures__/aot/require-reset-styles/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require-reset-styles/code.ts
rename to packages/babel-preset/__fixtures__/aot/require-reset-styles/code.ts
diff --git a/packages/babel-preset/__fixtures__/require-reset-styles/output.ts b/packages/babel-preset/__fixtures__/aot/require-reset-styles/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require-reset-styles/output.ts
rename to packages/babel-preset/__fixtures__/aot/require-reset-styles/output.ts
diff --git a/packages/babel-preset/__fixtures__/require/code.ts b/packages/babel-preset/__fixtures__/aot/require/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require/code.ts
rename to packages/babel-preset/__fixtures__/aot/require/code.ts
diff --git a/packages/babel-preset/__fixtures__/require/output.ts b/packages/babel-preset/__fixtures__/aot/require/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/require/output.ts
rename to packages/babel-preset/__fixtures__/aot/require/output.ts
diff --git a/packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts b/packages/babel-preset/__fixtures__/aot/reset-styles-at-rules/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/reset-styles-at-rules/code.ts
rename to packages/babel-preset/__fixtures__/aot/reset-styles-at-rules/code.ts
diff --git a/packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts b/packages/babel-preset/__fixtures__/aot/reset-styles-at-rules/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/reset-styles-at-rules/output.ts
rename to packages/babel-preset/__fixtures__/aot/reset-styles-at-rules/output.ts
diff --git a/packages/babel-preset/__fixtures__/reset-styles/code.ts b/packages/babel-preset/__fixtures__/aot/reset-styles/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/reset-styles/code.ts
rename to packages/babel-preset/__fixtures__/aot/reset-styles/code.ts
diff --git a/packages/babel-preset/__fixtures__/reset-styles/output.ts b/packages/babel-preset/__fixtures__/aot/reset-styles/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/reset-styles/output.ts
rename to packages/babel-preset/__fixtures__/aot/reset-styles/output.ts
diff --git a/packages/babel-preset/__fixtures__/rules-with-metadata/code.ts b/packages/babel-preset/__fixtures__/aot/rules-with-metadata/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/rules-with-metadata/code.ts
rename to packages/babel-preset/__fixtures__/aot/rules-with-metadata/code.ts
diff --git a/packages/babel-preset/__fixtures__/rules-with-metadata/output.ts b/packages/babel-preset/__fixtures__/aot/rules-with-metadata/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/rules-with-metadata/output.ts
rename to packages/babel-preset/__fixtures__/aot/rules-with-metadata/output.ts
diff --git a/packages/babel-preset/__fixtures__/shared-mixins/code.ts b/packages/babel-preset/__fixtures__/aot/shared-mixins/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/shared-mixins/code.ts
rename to packages/babel-preset/__fixtures__/aot/shared-mixins/code.ts
diff --git a/packages/babel-preset/__fixtures__/shared-mixins/mixins.ts b/packages/babel-preset/__fixtures__/aot/shared-mixins/mixins.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/shared-mixins/mixins.ts
rename to packages/babel-preset/__fixtures__/aot/shared-mixins/mixins.ts
diff --git a/packages/babel-preset/__fixtures__/shared-mixins/output.ts b/packages/babel-preset/__fixtures__/aot/shared-mixins/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/shared-mixins/output.ts
rename to packages/babel-preset/__fixtures__/aot/shared-mixins/output.ts
diff --git a/packages/babel-preset/__fixtures__/tokens/code.ts b/packages/babel-preset/__fixtures__/aot/tokens/code.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/tokens/code.ts
rename to packages/babel-preset/__fixtures__/aot/tokens/code.ts
diff --git a/packages/babel-preset/__fixtures__/tokens/output.ts b/packages/babel-preset/__fixtures__/aot/tokens/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/tokens/output.ts
rename to packages/babel-preset/__fixtures__/aot/tokens/output.ts
diff --git a/packages/babel-preset/__fixtures__/tokens/tokens.ts b/packages/babel-preset/__fixtures__/aot/tokens/tokens.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/tokens/tokens.ts
rename to packages/babel-preset/__fixtures__/aot/tokens/tokens.ts
diff --git a/packages/babel-preset/__fixtures__/unsupported-css-properties/fixture.ts b/packages/babel-preset/__fixtures__/aot/unsupported-css-properties/fixture.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/unsupported-css-properties/fixture.ts
rename to packages/babel-preset/__fixtures__/aot/unsupported-css-properties/fixture.ts
diff --git a/packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts b/packages/babel-preset/__fixtures__/aot/unsupported-css-properties/output.ts
similarity index 100%
rename from packages/babel-preset/__fixtures__/unsupported-css-properties/output.ts
rename to packages/babel-preset/__fixtures__/aot/unsupported-css-properties/output.ts
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index 460a1d4d5..bed0d6842 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -39,41 +39,41 @@ pluginTester({
     //
     {
       title: 'duplicated imports',
-      fixture: path.resolve(fixturesDir, 'duplicated-imports', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'duplicated-imports', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'duplicated-imports', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'duplicated-imports', 'output.ts'),
       pluginOptions: {
         modules: [{ moduleSource: 'custom-package', importName: 'createStylesA' }],
       },
     },
     {
       title: 'at rules',
-      fixture: path.resolve(fixturesDir, 'at-rules', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'at-rules', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'at-rules', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'at-rules', 'output.ts'),
     },
     {
       title: 'multiple declarations',
-      fixture: path.resolve(fixturesDir, 'multiple-declarations', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'multiple-declarations', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'multiple-declarations', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'multiple-declarations', 'output.ts'),
     },
     {
       title: 'call of non existing module',
-      fixture: path.resolve(fixturesDir, 'non-existing-module-call', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'non-existing-module-call', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'non-existing-module-call', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'non-existing-module-call', 'output.ts'),
     },
     {
       title: 'syntax: animationName',
-      fixture: path.resolve(fixturesDir, 'keyframes', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'keyframes', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'keyframes', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'keyframes', 'output.ts'),
     },
     {
       title: 'syntax: CSS shorthands',
-      fixture: path.resolve(fixturesDir, 'object-shorthands', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-shorthands', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-shorthands', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-shorthands', 'output.ts'),
     },
     {
       title: 'syntax: reset (null values)',
-      fixture: path.resolve(fixturesDir, 'object-reset', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-reset', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-reset', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-reset', 'output.ts'),
     },
 
     // Assets
@@ -81,18 +81,18 @@ pluginTester({
     //
     {
       title: 'assets: import handling',
-      fixture: path.resolve(fixturesDir, 'assets', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'assets', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'assets', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'assets', 'output.ts'),
     },
     {
       title: 'assets: multiple url()',
-      fixture: path.resolve(fixturesDir, 'assets-multiple-declarations', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'assets-multiple-declarations', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'assets-multiple-declarations', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'assets-multiple-declarations', 'output.ts'),
     },
     {
       title: 'assets: url() without imports',
-      fixture: path.resolve(fixturesDir, 'assets-urls', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'assets-urls', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'assets-urls', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'assets-urls', 'output.ts'),
     },
 
     // Evaluation
@@ -100,58 +100,58 @@ pluginTester({
     //
     {
       title: 'evaluation: mixins via functions',
-      fixture: path.resolve(fixturesDir, 'function-mixin', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'function-mixin', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'function-mixin', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'function-mixin', 'output.ts'),
     },
     {
       title: 'evaluation: object',
-      fixture: path.resolve(fixturesDir, 'object', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object', 'output.ts'),
     },
     {
       title: 'evaluation: object with computed keys',
-      fixture: path.resolve(fixturesDir, 'object-computed-keys', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-computed-keys', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-computed-keys', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-computed-keys', 'output.ts'),
     },
     {
       title: 'evaluation: object with imported keys',
-      fixture: path.resolve(fixturesDir, 'object-imported-keys', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-imported-keys', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-imported-keys', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-imported-keys', 'output.ts'),
     },
     {
       title: 'evaluation: object with mixins',
-      fixture: path.resolve(fixturesDir, 'object-mixins', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-mixins', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-mixins', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-mixins', 'output.ts'),
     },
     {
       title: 'evaluation: nested objects',
-      fixture: path.resolve(fixturesDir, 'object-nesting', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-nesting', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-nesting', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-nesting', 'output.ts'),
     },
     {
       title: 'evaluation: objects with sequence expression',
-      fixture: path.resolve(fixturesDir, 'object-sequence-expr', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-sequence-expr', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-sequence-expr', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-sequence-expr', 'output.ts'),
     },
     {
       title: 'evaluation: objects with variables',
-      fixture: path.resolve(fixturesDir, 'object-variables', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'object-variables', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'object-variables', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'object-variables', 'output.ts'),
     },
     {
       title: 'evaluation: rules with metadata',
-      fixture: path.resolve(fixturesDir, 'rules-with-metadata', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'rules-with-metadata', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'rules-with-metadata', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'rules-with-metadata', 'output.ts'),
     },
     {
       title: 'evaluation: shared mixins',
-      fixture: path.resolve(fixturesDir, 'shared-mixins', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'shared-mixins', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'shared-mixins', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'shared-mixins', 'output.ts'),
     },
     {
       title: 'evaluation: tokens scenario',
-      fixture: path.resolve(fixturesDir, 'tokens', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'tokens', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'tokens', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'tokens', 'output.ts'),
     },
 
     // Configs
@@ -159,26 +159,26 @@ pluginTester({
     //
     {
       title: 'config: classNameHashSalt',
-      fixture: path.resolve(fixturesDir, 'config-classname-hash-salt', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'config-classname-hash-salt', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'config-classname-hash-salt', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'config-classname-hash-salt', 'output.ts'),
       pluginOptions: {
         classNameHashSalt: 'prefix',
       },
     },
     {
       title: 'config: babelOptions',
-      fixture: path.resolve(fixturesDir, 'config-babel-options', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'config-babel-options', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'config-babel-options', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'config-babel-options', 'output.ts'),
       pluginOptions: {
         babelOptions: {
-          plugins: ['./packages/babel-preset/__fixtures__/config-babel-options/colorRenamePlugin'],
+          plugins: ['./packages/babel-preset/__fixtures__/aot/config-babel-options/colorRenamePlugin'],
         },
       },
     },
     {
       title: 'config: evaluationRules',
-      fixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'config-evaluation-rules', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'config-evaluation-rules', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'config-evaluation-rules', 'output.ts'),
       pluginOptions: {
         evaluationRules: [
           {
@@ -193,18 +193,18 @@ pluginTester({
     //
     {
       title: 'reset: default',
-      fixture: path.resolve(fixturesDir, 'reset-styles', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'reset-styles', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'reset-styles', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'reset-styles', 'output.ts'),
     },
     {
       title: 'reset: assets',
-      fixture: path.resolve(fixturesDir, 'assets-reset-styles', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'assets-reset-styles', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'assets-reset-styles', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'assets-reset-styles', 'output.ts'),
     },
     {
       title: 'reset: at rules',
-      fixture: path.resolve(fixturesDir, 'reset-styles-at-rules', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'reset-styles-at-rules', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'reset-styles-at-rules', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'reset-styles-at-rules', 'output.ts'),
     },
 
     // Imports
@@ -212,34 +212,34 @@ pluginTester({
     //
     {
       title: 'imports: alias usage',
-      fixture: path.resolve(fixturesDir, 'import-alias', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'import-alias', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'import-alias', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'import-alias', 'output.ts'),
     },
     {
       title: 'imports: custom module',
-      fixture: path.resolve(fixturesDir, 'import-custom-module', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'import-custom-module', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'import-custom-module', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'import-custom-module', 'output.ts'),
       pluginOptions: {
         modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }],
       },
     },
     {
       title: 'imports: custom module name',
-      fixture: path.resolve(fixturesDir, 'import-custom-name', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'import-custom-name', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'import-custom-name', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'import-custom-name', 'output.ts'),
       pluginOptions: {
         modules: [{ moduleSource: 'custom-package', importName: 'createStyles' }],
       },
     },
     {
       title: 'imports: require()',
-      fixture: path.resolve(fixturesDir, 'require', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'require', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'require', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'require', 'output.ts'),
     },
     {
       title: 'imports: require() with custom module',
-      fixture: path.resolve(fixturesDir, 'require-custom-module', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'require-custom-module', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'require-custom-module', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'require-custom-module', 'output.ts'),
       pluginOptions: {
         modules: [{ moduleSource: 'custom-package', importName: 'makeStyles' }],
       },
@@ -247,8 +247,8 @@ pluginTester({
 
     {
       title: 'imports: require() for makeResetStyles',
-      fixture: path.resolve(fixturesDir, 'require-reset-styles', 'code.ts'),
-      outputFixture: path.resolve(fixturesDir, 'require-reset-styles', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'require-reset-styles', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'require-reset-styles', 'output.ts'),
     },
 
     // Errors
@@ -256,8 +256,8 @@ pluginTester({
     //
     {
       title: 'errors: unsupported shorthand CSS properties',
-      fixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'fixture.ts'),
-      outputFixture: path.resolve(fixturesDir, 'unsupported-css-properties', 'output.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'unsupported-css-properties', 'fixture.ts'),
+      outputFixture: path.resolve(fixturesDir, 'aot', 'unsupported-css-properties', 'output.ts'),
       setup() {
         const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
 
@@ -268,17 +268,17 @@ pluginTester({
     },
     {
       title: 'errors: throws on invalid argument count',
-      fixture: path.resolve(fixturesDir, 'error-argument-count', 'fixture.js'),
+      fixture: path.resolve(fixturesDir, 'aot', 'error-argument-count', 'fixture.js'),
       error: /function accepts only a single param/,
     },
     {
       title: 'errors: throws on undefined',
-      fixture: path.resolve(fixturesDir, 'error-on-undefined', 'fixture.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'error-on-undefined', 'fixture.ts'),
       error: /Cannot read properties of undefined/,
     },
     {
       title: 'errors: throws on invalid config',
-      fixture: path.resolve(fixturesDir, 'error-config-babel-options', 'fixture.ts'),
+      fixture: path.resolve(fixturesDir, 'aot', 'error-config-babel-options', 'fixture.ts'),
       pluginOptions: {
         babelOptions: {
           plugins: {},
@@ -296,7 +296,7 @@ pluginTester({
 // https://github.com/babel-utils/babel-plugin-tester/issues/186
 describe('babel preset', () => {
   it('should not generate metadata when not configured', () => {
-    const fixture = path.resolve(fixturesDir, 'object', 'code.ts');
+    const fixture = path.resolve(fixturesDir, 'aot', 'object', 'code.ts');
     const code = fs.readFileSync(fixture).toString();
 
     const babelFileResult = Babel.transformSync(code, {
@@ -325,7 +325,7 @@ describe('babel preset', () => {
   });
 
   it('should generate metadata for makeStyles when configured', () => {
-    const fixture = path.resolve(fixturesDir, 'object', 'code.ts');
+    const fixture = path.resolve(fixturesDir, 'aot', 'object', 'code.ts');
     const code = fs.readFileSync(fixture).toString();
 
     const babelFileResult = Babel.transformSync(code, {
@@ -358,7 +358,7 @@ describe('babel preset', () => {
   });
 
   it('should generate metadata for makeResetStyles when configured', () => {
-    const fixture = path.resolve(fixturesDir, 'reset-styles', 'code.ts');
+    const fixture = path.resolve(fixturesDir, 'aot', 'reset-styles', 'code.ts');
     const code = fs.readFileSync(fixture).toString();
 
     const babelFileResult = Babel.transformSync(code, {

From 4ad508c7ec1f9fdbf9e47e7c6e9e4224bbda2919 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 31 May 2024 13:15:46 +0200
Subject: [PATCH 2/4] chore: add fixtures for CSS transform

---
 .../__fixtures__/css/basic/code.ts            | 14 +++++++
 .../__fixtures__/css/basic/output.ts          | 11 +++++
 .../__fixtures__/css/mixed/code.ts            | 10 +++++
 .../__fixtures__/css/mixed/output.ts          |  7 ++++
 .../__fixtures__/css/multiple/code.ts         | 13 ++++++
 .../__fixtures__/css/multiple/output.ts       | 11 +++++
 .../__fixtures__/css/reset/code.ts            |  6 +++
 .../__fixtures__/css/reset/output.ts          |  2 +
 packages/babel-preset/src/schema.ts           |  4 ++
 .../babel-preset/src/transformPlugin.test.ts  | 42 ++++++++++++++++++-
 packages/babel-preset/src/transformPlugin.ts  | 23 ++++++----
 packages/babel-preset/src/types.ts            |  2 +
 12 files changed, 135 insertions(+), 10 deletions(-)
 create mode 100644 packages/babel-preset/__fixtures__/css/basic/code.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/basic/output.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/mixed/code.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/mixed/output.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/multiple/code.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/multiple/output.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/reset/code.ts
 create mode 100644 packages/babel-preset/__fixtures__/css/reset/output.ts

diff --git a/packages/babel-preset/__fixtures__/css/basic/code.ts b/packages/babel-preset/__fixtures__/css/basic/code.ts
new file mode 100644
index 000000000..2ea0b82e8
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/basic/code.ts
@@ -0,0 +1,14 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    color: 'red',
+    paddingLeft: '4px',
+  },
+  icon: {
+    backgroundColor: 'green',
+    ':hover': {
+      color: 'red',
+    },
+  },
+});
diff --git a/packages/babel-preset/__fixtures__/css/basic/output.ts b/packages/babel-preset/__fixtures__/css/basic/output.ts
new file mode 100644
index 000000000..61e1e9d58
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/basic/output.ts
@@ -0,0 +1,11 @@
+import { __css } from '@griffel/react';
+export const styles = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+    uwmqm3: ['fycuoez', 'f8wuabp'],
+  },
+  icon: {
+    De3pzq: 'fcnqdeg',
+    Bi91k9c: 'faf35ka',
+  },
+});
diff --git a/packages/babel-preset/__fixtures__/css/mixed/code.ts b/packages/babel-preset/__fixtures__/css/mixed/code.ts
new file mode 100644
index 000000000..053c9015b
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/mixed/code.ts
@@ -0,0 +1,10 @@
+import { makeStyles, makeResetStyles } from '@griffel/react';
+
+export const useClasses = makeStyles({
+  root: { color: 'red' },
+});
+
+export const useClassName = makeResetStyles({
+  color: 'red',
+  paddingLeft: '4px',
+});
diff --git a/packages/babel-preset/__fixtures__/css/mixed/output.ts b/packages/babel-preset/__fixtures__/css/mixed/output.ts
new file mode 100644
index 000000000..9103ef402
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/mixed/output.ts
@@ -0,0 +1,7 @@
+import { __css, __resetCSS } from '@griffel/react';
+export const useClasses = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
+export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/babel-preset/__fixtures__/css/multiple/code.ts b/packages/babel-preset/__fixtures__/css/multiple/code.ts
new file mode 100644
index 000000000..6a2e355d4
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/multiple/code.ts
@@ -0,0 +1,13 @@
+import { makeStyles } from '@griffel/react';
+
+export const stylesA = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
+
+export const stylesB = makeStyles({
+  root: {
+    backgroundColor: 'green',
+  },
+});
diff --git a/packages/babel-preset/__fixtures__/css/multiple/output.ts b/packages/babel-preset/__fixtures__/css/multiple/output.ts
new file mode 100644
index 000000000..a0ea456eb
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/multiple/output.ts
@@ -0,0 +1,11 @@
+import { __css } from '@griffel/react';
+export const stylesA = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
+export const stylesB = __css({
+  root: {
+    De3pzq: 'fcnqdeg',
+  },
+});
diff --git a/packages/babel-preset/__fixtures__/css/reset/code.ts b/packages/babel-preset/__fixtures__/css/reset/code.ts
new file mode 100644
index 000000000..20e703a99
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/reset/code.ts
@@ -0,0 +1,6 @@
+import { makeResetStyles } from '@griffel/react';
+
+export const useClassName = makeResetStyles({
+  color: 'red',
+  paddingLeft: '4px',
+});
diff --git a/packages/babel-preset/__fixtures__/css/reset/output.ts b/packages/babel-preset/__fixtures__/css/reset/output.ts
new file mode 100644
index 000000000..58e151360
--- /dev/null
+++ b/packages/babel-preset/__fixtures__/css/reset/output.ts
@@ -0,0 +1,2 @@
+import { __resetCSS } from '@griffel/react';
+export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
diff --git a/packages/babel-preset/src/schema.ts b/packages/babel-preset/src/schema.ts
index d3ee43e67..03ff90286 100644
--- a/packages/babel-preset/src/schema.ts
+++ b/packages/babel-preset/src/schema.ts
@@ -6,6 +6,10 @@ export const configSchema: JSONSchema7 = {
 
   type: 'object',
   properties: {
+    mode: {
+      type: 'string',
+      enum: ['aot', 'css-extraction'],
+    },
     classNameHashSalt: {
       type: 'string',
     },
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index bed0d6842..213960579 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -35,7 +35,7 @@ pluginTester({
     //
 
     // Fixtures
-    //
+    // (AOT = Ahead of Time) mode
     //
     {
       title: 'duplicated imports',
@@ -286,6 +286,46 @@ pluginTester({
       },
       error: /Validation failed for passed config/,
     },
+
+    // Fixtures
+    // (CSS extraction)
+    //
+
+    {
+      title: 'basic (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'css', 'basic', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'css', 'basic', 'output.ts'),
+      pluginOptions: {
+        mode: 'css-extraction',
+      },
+    },
+
+    {
+      title: 'basic (makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'css', 'reset', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'css', 'reset', 'output.ts'),
+      pluginOptions: {
+        mode: 'css-extraction',
+      },
+    },
+
+    {
+      title: 'multiple declarations (makeStyles)',
+      fixture: path.resolve(fixturesDir, 'css', 'multiple', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'css', 'multiple', 'output.ts'),
+      pluginOptions: {
+        mode: 'css-extraction',
+      },
+    },
+
+    {
+      title: 'mixed (makeStyles + makeResetStyles)',
+      fixture: path.resolve(fixturesDir, 'css', 'mixed', 'code.ts'),
+      outputFixture: path.resolve(fixturesDir, 'css', 'mixed', 'output.ts'),
+      pluginOptions: {
+        mode: 'css-extraction',
+      },
+    },
   ],
 
   plugin: transformPlugin,
diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts
index 95b8d6446..b1354bd80 100644
--- a/packages/babel-preset/src/transformPlugin.ts
+++ b/packages/babel-preset/src/transformPlugin.ts
@@ -213,6 +213,7 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
         action: 'ignore',
       },
     ],
+    mode: 'aot',
     projectRoot: process.cwd(),
 
     ...options,
@@ -311,10 +312,11 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                 }
 
                 (callExpressionPath.get('arguments.0') as NodePath).remove();
-                callExpressionPath.pushContainer('arguments', [
-                  t.valueToNode(classnamesMapping),
-                  t.valueToNode(uniqueCSSRules),
-                ]);
+                callExpressionPath.pushContainer('arguments', [t.valueToNode(classnamesMapping)]);
+
+                if (pluginOptions.mode === 'aot') {
+                  callExpressionPath.pushContainer('arguments', [t.valueToNode(uniqueCSSRules)]);
+                }
               }
 
               if (definitionPath.functionKind === 'makeResetStyles') {
@@ -345,8 +347,11 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                 callExpressionPath.pushContainer('arguments', [
                   t.valueToNode(ltrClassName),
                   t.valueToNode(rtlClassName),
-                  t.valueToNode(cssRules),
                 ]);
+
+                if (pluginOptions.mode === 'aot') {
+                  callExpressionPath.pushContainer('arguments', [t.valueToNode(cssRules)]);
+                }
               }
 
               replaceAssetsWithImports(pluginOptions.projectRoot, state.filename!, programPath, callExpressionPath);
@@ -375,9 +380,9 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                   }
 
                   if (importedPath.isIdentifier({ name: module.importName })) {
-                    specifier.replaceWith(t.identifier('__styles'));
+                    specifier.replaceWith(t.identifier(pluginOptions.mode === 'aot' ? '__styles' : '__css'));
                   } else if (importedPath.isIdentifier({ name: module.resetImportName || 'makeResetStyles' })) {
-                    specifier.replaceWith(t.identifier('__resetStyles'));
+                    specifier.replaceWith(t.identifier(pluginOptions.mode === 'aot' ? '__resetStyles' : '__resetCSS'));
                   }
                 }
               }
@@ -387,11 +392,11 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
           if (state.calleePaths) {
             state.calleePaths.forEach(calleePath => {
               if (calleePath.node.name === 'makeResetStyles') {
-                calleePath.replaceWith(t.identifier('__resetStyles'));
+                calleePath.replaceWith(t.identifier(pluginOptions.mode === 'aot' ? '__resetStyles' : '__resetCSS'));
                 return;
               }
 
-              calleePath.replaceWith(t.identifier('__styles'));
+              calleePath.replaceWith(t.identifier(pluginOptions.mode === 'aot' ? '__styles' : '__css'));
             });
           }
         },
diff --git a/packages/babel-preset/src/types.ts b/packages/babel-preset/src/types.ts
index 018969bf1..c027487b9 100644
--- a/packages/babel-preset/src/types.ts
+++ b/packages/babel-preset/src/types.ts
@@ -16,6 +16,8 @@ export type BabelPluginOptions = {
     resetImportName?: string;
   }[];
 
+  mode?: 'aot' | 'css-extraction';
+
   /**
    * If you need to specify custom Babel configuration, you can pass them here. These options will be used by the
    * transformPlugin when parsing and evaluating modules.

From 346b38fc2d16e0ac4ed1f6b4cf0a7ebf32d68132 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 31 May 2024 13:18:52 +0200
Subject: [PATCH 3/4] chore: move fixtures to AOT

---
 .../config-classname-hash-salt/code.ts        |   0
 .../config-classname-hash-salt/output.ts      |   0
 .../{ => aot}/config-modules/code.ts          |   0
 .../{ => aot}/config-modules/output.ts        |   0
 .../__fixtures__/{ => aot}/empty/code.ts      |   0
 .../__fixtures__/{ => aot}/empty/output.ts    |   0
 .../{ => aot}/error-argument-count/code.ts    |   0
 .../{ => aot}/error-argument-count/error.ts   |   0
 .../{ => aot}/error-config/code.ts            |   0
 .../{ => aot}/error-config/error.ts           |   0
 .../{ => aot}/error-syntax/code.txt           |   0
 .../{ => aot}/error-syntax/error.ts           |   0
 .../__fixtures__/{ => aot}/function/code.ts   |   0
 .../__fixtures__/{ => aot}/function/output.ts |   0
 .../__fixtures__/{ => aot}/object/code.ts     |   0
 .../__fixtures__/{ => aot}/object/output.ts   |   0
 .../__fixtures__/{ => aot}/object/tokens.ts   |   0
 .../__fixtures__/{ => aot}/reset/code.ts      |   0
 .../__fixtures__/{ => aot}/reset/output.ts    |   0
 .../__fixtures__/{ => aot}/reset/tokens.ts    |   0
 .../{ => aot}/webpack-aliases/code.ts         |   0
 .../{ => aot}/webpack-aliases/color.ts        |   0
 .../{ => aot}/webpack-aliases/output.ts       |   0
 .../{ => aot}/webpack-aliases/tokens.ts       |   0
 .../webpack-inherit-resolve-options/code.ts   |   0
 .../webpack-inherit-resolve-options/color.jsx |   0
 .../webpack-inherit-resolve-options/output.ts |   0
 .../{ => aot}/webpack-resolve-options/code.ts |   0
 .../webpack-resolve-options/color.ts          |   0
 .../webpack-resolve-options/output.ts         |   0
 .../{ => aot}/webpack-resolve-plugins/code.ts |   0
 .../webpack-resolve-plugins/color.ts          |   0
 .../webpack-resolve-plugins/output.ts         |   0
 .../webpack-resolve-plugins/tokens.ts         |   0
 .../webpack-loader/src/webpackLoader.test.ts  | 186 ++++++++++--------
 35 files changed, 101 insertions(+), 85 deletions(-)
 rename packages/webpack-loader/__fixtures__/{ => aot}/config-classname-hash-salt/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/config-classname-hash-salt/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/config-modules/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/config-modules/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/empty/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/empty/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-argument-count/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-argument-count/error.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-config/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-config/error.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-syntax/code.txt (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/error-syntax/error.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/function/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/function/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/object/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/object/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/object/tokens.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/reset/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/reset/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/reset/tokens.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-aliases/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-aliases/color.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-aliases/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-aliases/tokens.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-inherit-resolve-options/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-inherit-resolve-options/color.jsx (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-inherit-resolve-options/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-options/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-options/color.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-options/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-plugins/code.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-plugins/color.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-plugins/output.ts (100%)
 rename packages/webpack-loader/__fixtures__/{ => aot}/webpack-resolve-plugins/tokens.ts (100%)

diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts b/packages/webpack-loader/__fixtures__/aot/config-classname-hash-salt/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/config-classname-hash-salt/code.ts
rename to packages/webpack-loader/__fixtures__/aot/config-classname-hash-salt/code.ts
diff --git a/packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts b/packages/webpack-loader/__fixtures__/aot/config-classname-hash-salt/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/config-classname-hash-salt/output.ts
rename to packages/webpack-loader/__fixtures__/aot/config-classname-hash-salt/output.ts
diff --git a/packages/webpack-loader/__fixtures__/config-modules/code.ts b/packages/webpack-loader/__fixtures__/aot/config-modules/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/config-modules/code.ts
rename to packages/webpack-loader/__fixtures__/aot/config-modules/code.ts
diff --git a/packages/webpack-loader/__fixtures__/config-modules/output.ts b/packages/webpack-loader/__fixtures__/aot/config-modules/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/config-modules/output.ts
rename to packages/webpack-loader/__fixtures__/aot/config-modules/output.ts
diff --git a/packages/webpack-loader/__fixtures__/empty/code.ts b/packages/webpack-loader/__fixtures__/aot/empty/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/empty/code.ts
rename to packages/webpack-loader/__fixtures__/aot/empty/code.ts
diff --git a/packages/webpack-loader/__fixtures__/empty/output.ts b/packages/webpack-loader/__fixtures__/aot/empty/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/empty/output.ts
rename to packages/webpack-loader/__fixtures__/aot/empty/output.ts
diff --git a/packages/webpack-loader/__fixtures__/error-argument-count/code.ts b/packages/webpack-loader/__fixtures__/aot/error-argument-count/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-argument-count/code.ts
rename to packages/webpack-loader/__fixtures__/aot/error-argument-count/code.ts
diff --git a/packages/webpack-loader/__fixtures__/error-argument-count/error.ts b/packages/webpack-loader/__fixtures__/aot/error-argument-count/error.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-argument-count/error.ts
rename to packages/webpack-loader/__fixtures__/aot/error-argument-count/error.ts
diff --git a/packages/webpack-loader/__fixtures__/error-config/code.ts b/packages/webpack-loader/__fixtures__/aot/error-config/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-config/code.ts
rename to packages/webpack-loader/__fixtures__/aot/error-config/code.ts
diff --git a/packages/webpack-loader/__fixtures__/error-config/error.ts b/packages/webpack-loader/__fixtures__/aot/error-config/error.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-config/error.ts
rename to packages/webpack-loader/__fixtures__/aot/error-config/error.ts
diff --git a/packages/webpack-loader/__fixtures__/error-syntax/code.txt b/packages/webpack-loader/__fixtures__/aot/error-syntax/code.txt
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-syntax/code.txt
rename to packages/webpack-loader/__fixtures__/aot/error-syntax/code.txt
diff --git a/packages/webpack-loader/__fixtures__/error-syntax/error.ts b/packages/webpack-loader/__fixtures__/aot/error-syntax/error.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/error-syntax/error.ts
rename to packages/webpack-loader/__fixtures__/aot/error-syntax/error.ts
diff --git a/packages/webpack-loader/__fixtures__/function/code.ts b/packages/webpack-loader/__fixtures__/aot/function/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/function/code.ts
rename to packages/webpack-loader/__fixtures__/aot/function/code.ts
diff --git a/packages/webpack-loader/__fixtures__/function/output.ts b/packages/webpack-loader/__fixtures__/aot/function/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/function/output.ts
rename to packages/webpack-loader/__fixtures__/aot/function/output.ts
diff --git a/packages/webpack-loader/__fixtures__/object/code.ts b/packages/webpack-loader/__fixtures__/aot/object/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/object/code.ts
rename to packages/webpack-loader/__fixtures__/aot/object/code.ts
diff --git a/packages/webpack-loader/__fixtures__/object/output.ts b/packages/webpack-loader/__fixtures__/aot/object/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/object/output.ts
rename to packages/webpack-loader/__fixtures__/aot/object/output.ts
diff --git a/packages/webpack-loader/__fixtures__/object/tokens.ts b/packages/webpack-loader/__fixtures__/aot/object/tokens.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/object/tokens.ts
rename to packages/webpack-loader/__fixtures__/aot/object/tokens.ts
diff --git a/packages/webpack-loader/__fixtures__/reset/code.ts b/packages/webpack-loader/__fixtures__/aot/reset/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/reset/code.ts
rename to packages/webpack-loader/__fixtures__/aot/reset/code.ts
diff --git a/packages/webpack-loader/__fixtures__/reset/output.ts b/packages/webpack-loader/__fixtures__/aot/reset/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/reset/output.ts
rename to packages/webpack-loader/__fixtures__/aot/reset/output.ts
diff --git a/packages/webpack-loader/__fixtures__/reset/tokens.ts b/packages/webpack-loader/__fixtures__/aot/reset/tokens.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/reset/tokens.ts
rename to packages/webpack-loader/__fixtures__/aot/reset/tokens.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/code.ts b/packages/webpack-loader/__fixtures__/aot/webpack-aliases/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-aliases/code.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-aliases/code.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/color.ts b/packages/webpack-loader/__fixtures__/aot/webpack-aliases/color.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-aliases/color.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-aliases/color.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/output.ts b/packages/webpack-loader/__fixtures__/aot/webpack-aliases/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-aliases/output.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-aliases/output.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts b/packages/webpack-loader/__fixtures__/aot/webpack-aliases/tokens.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-aliases/tokens.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-aliases/tokens.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/code.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx b/packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/color.jsx
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx
rename to packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/color.jsx
diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-inherit-resolve-options/output.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-options/code.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/code.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/color.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/color.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-options/output.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-options/output.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/code.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/code.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-plugins/code.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/code.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/color.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-plugins/color.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/color.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/output.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-plugins/output.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/output.ts
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts b/packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/tokens.ts
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-plugins/tokens.ts
rename to packages/webpack-loader/__fixtures__/aot/webpack-resolve-plugins/tokens.ts
diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts
index 409b20330..a76f685bb 100644
--- a/packages/webpack-loader/src/webpackLoader.test.ts
+++ b/packages/webpack-loader/src/webpackLoader.test.ts
@@ -228,104 +228,120 @@ describe('shouldTransformSourceCode', () => {
 });
 
 describe('webpackLoader', () => {
-  // Integration fixtures for base functionality, all scenarios are tested in "@griffel/babel-preset"
-  testFixture('object');
-  testFixture('function');
-  testFixture('reset');
-  testFixture('empty');
-
-  // Integration fixtures for config functionality
-  testFixture('config-classname-hash-salt', {
-    loaderOptions: {
-      classNameHashSalt: 'HASH_SALT',
-    },
-  });
+  describe('AOT fixtures', () => {
+    // Integration fixtures for base functionality, all scenarios are tested in "@griffel/babel-preset"
+    testFixture('aot/object');
+    testFixture('aot/function');
+    testFixture('aot/reset');
+    testFixture('aot/empty');
+
+    // Integration fixtures for config functionality
+    testFixture('aot/config-classname-hash-salt', {
+      loaderOptions: {
+        classNameHashSalt: 'HASH_SALT',
+      },
+    });
 
-  testFixture('config-modules', {
-    loaderOptions: {
-      modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }],
-    },
-    webpackConfig: {
-      externals: {
-        'react-make-styles': 'Griffel',
+    testFixture('aot/config-modules', {
+      loaderOptions: {
+        modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }],
       },
-    },
-  });
+      webpackConfig: {
+        externals: {
+          'react-make-styles': 'Griffel',
+        },
+      },
+    });
 
-  // Asserts that aliases are resolved properly in Babel plugin
-  testFixture('webpack-aliases', {
-    webpackConfig: {
-      resolve: {
-        alias: {
-          'non-existing-color-module': path.resolve(__dirname, '..', '__fixtures__', 'webpack-aliases', 'color.ts'),
+    // Asserts that aliases are resolved properly in Babel plugin
+    testFixture('aot/webpack-aliases', {
+      webpackConfig: {
+        resolve: {
+          alias: {
+            'non-existing-color-module': path.resolve(
+              __dirname,
+              '..',
+              '__fixtures__',
+              'aot',
+              'webpack-aliases',
+              'color.ts',
+            ),
+          },
         },
       },
-    },
-  });
+    });
 
-  // Asserts that "inheritResolveOptions" are handled properly
-  testFixture('webpack-inherit-resolve-options', {
-    loaderOptions: {
-      inheritResolveOptions: ['extensions'],
-    },
-    webpackConfig: {
-      resolve: {
-        extensions: ['.ts', '.jsx'],
+    // Asserts that "inheritResolveOptions" are handled properly
+    testFixture('aot/webpack-inherit-resolve-options', {
+      loaderOptions: {
+        inheritResolveOptions: ['extensions'],
       },
-    },
-  });
+      webpackConfig: {
+        resolve: {
+          extensions: ['.ts', '.jsx'],
+        },
+      },
+    });
 
-  // Asserts that "webpackResolveOptions" are handled properly
-  testFixture('webpack-resolve-options', {
-    loaderOptions: {
-      webpackResolveOptions: {
-        extensions: ['.ts', '.jsx'],
+    // Asserts that "webpackResolveOptions" are handled properly
+    testFixture('aot/webpack-resolve-options', {
+      loaderOptions: {
+        webpackResolveOptions: {
+          extensions: ['.ts', '.jsx'],
+        },
       },
-    },
-  });
+    });
 
-  // Asserts that aliases are resolved properly in Babel plugin with resolve plugins
-  testFixture('webpack-resolve-plugins', {
-    webpackConfig: {
-      resolve: {
-        plugins: [
-          {
-            // Simple plugin that will detect the non-existent module we are testing for and replace with
-            // correct path from the fixture
-            apply: function (resolver) {
-              const target = resolver.ensureHook('resolve');
-
-              resolver.getHook('before-resolve').tapAsync('ResolveFallback', (request, resolveContext, callback) => {
-                if (request.request === 'non-existing-color-module') {
-                  const obj = {
-                    directory: request.directory,
-                    path: request.path,
-                    query: request.query,
-                    request: path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'color.ts'),
-                  };
-                  return resolver.doResolve(target, obj, null, resolveContext, callback);
-                }
-
-                callback();
-              });
+    // Asserts that aliases are resolved properly in Babel plugin with resolve plugins
+    testFixture('aot/webpack-resolve-plugins', {
+      webpackConfig: {
+        resolve: {
+          plugins: [
+            {
+              // Simple plugin that will detect the non-existent module we are testing for and replace with
+              // correct path from the fixture
+              apply: function (resolver) {
+                const target = resolver.ensureHook('resolve');
+
+                resolver.getHook('before-resolve').tapAsync('ResolveFallback', (request, resolveContext, callback) => {
+                  if (request.request === 'non-existing-color-module') {
+                    const obj = {
+                      directory: request.directory,
+                      path: request.path,
+                      query: request.query,
+                      request: path.resolve(
+                        __dirname,
+                        '..',
+                        '__fixtures__',
+                        'aot',
+                        'webpack-resolve-plugins',
+                        'color.ts',
+                      ),
+                    };
+                    return resolver.doResolve(target, obj, null, resolveContext, callback);
+                  }
+
+                  callback();
+                });
+              },
             },
-          },
-        ],
+          ],
+        },
       },
-    },
-  });
+    });
 
-  // Asserts handling errors from Babel plugin
-  testFixture('error-argument-count');
-  // Asserts errors in loader's config
-  testFixture('error-config', {
-    loaderOptions: {
-      babelOptions: {
-        // @ts-expect-error "plugins" should be an array, an object is passed to test schema
-        plugins: {},
+    // Asserts handling errors from Babel plugin
+    testFixture('aot/error-argument-count');
+    // Asserts errors in loader's config
+    testFixture('aot/error-config', {
+      loaderOptions: {
+        babelOptions: {
+          // @ts-expect-error "plugins" should be an array, an object is passed to test schema
+          plugins: {},
+        },
       },
-    },
+    });
+    // Asserts errors in loader functionality
+    testFixture('aot/error-syntax');
   });
-  // Asserts errors in loader functionality
-  testFixture('error-syntax');
 });

From 7c3b98d9d4e07704992a5fa5a1ada082b9a60814 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 31 May 2024 14:57:25 +0200
Subject: [PATCH 4/4] chore: flatten loaders

---
 packages/babel-preset/src/transformPlugin.ts  |  93 ++++-
 packages/babel-preset/src/types.ts            |   3 +
 .../__fixtures__/css/assets-flip/code.ts      |  10 +
 .../__fixtures__/css/assets-flip/fs.json      |   1 +
 .../__fixtures__/css/assets-flip/left.jpg     | Bin 0 -> 631 bytes
 .../__fixtures__/css/assets-flip/output.css   |   7 +
 .../__fixtures__/css/assets-flip/output.ts    |  10 +
 .../__fixtures__/css/assets-flip/right.jpg    | Bin 0 -> 631 bytes
 .../css/assets-multiple/blank.jpg             | Bin 0 -> 631 bytes
 .../__fixtures__/css/assets-multiple/code.ts  |   9 +
 .../css/assets-multiple/empty.jpg             | Bin 0 -> 631 bytes
 .../__fixtures__/css/assets-multiple/fs.json  |   1 +
 .../css/assets-multiple/output.css            |   4 +
 .../css/assets-multiple/output.ts             |  10 +
 .../__fixtures__/css/assets/blank.jpg         | Bin 0 -> 631 bytes
 .../__fixtures__/css/assets/code.ts           |   8 +
 .../__fixtures__/css/assets/fs.json           |   1 +
 .../__fixtures__/css/assets/output.css        |   4 +
 .../__fixtures__/css/assets/output.ts         |   9 +
 .../__fixtures__/css/basic-rules/code.ts      |  18 +
 .../__fixtures__/css/basic-rules/fs.json      |   1 +
 .../__fixtures__/css/basic-rules/output.css   |  22 ++
 .../__fixtures__/css/basic-rules/output.ts    |  43 +++
 .../__fixtures__/css/config-name/code.ts      |   7 +
 .../__fixtures__/css/config-name/fs.json      |   1 +
 .../__fixtures__/css/config-name/output.css   |   4 +
 .../css/config-no-split-chunks/code.ts        |  11 +
 .../css/config-no-split-chunks/fs.json        |   1 +
 .../css/config-no-split-chunks/output.css     |  13 +
 .../css/config-split-chunks/chunkA.ts         |   5 +
 .../css/config-split-chunks/chunkB.ts         |   5 +
 .../css/config-split-chunks/code.ts           |  14 +
 .../css/config-split-chunks/fs.json           |   1 +
 .../css/config-split-chunks/output.css        |   7 +
 .../__fixtures__/css/empty/code.ts            |   5 +
 .../__fixtures__/css/empty/fs.json            |   1 +
 .../__fixtures__/css/empty/output.css         |   0
 .../__fixtures__/css/empty/output.ts          |   4 +
 .../__fixtures__/css/missing-calls/code.ts    |   1 +
 .../__fixtures__/css/missing-calls/fs.json    |   1 +
 .../__fixtures__/css/missing-calls/output.css |   0
 .../__fixtures__/css/missing-calls/output.ts  |   1 +
 .../__fixtures__/css/mixed/code.ts            |  12 +
 .../__fixtures__/css/mixed/fs.json            |   1 +
 .../__fixtures__/css/mixed/output.css         |  12 +
 .../__fixtures__/css/mixed/output.ts          |   9 +
 .../__fixtures__/css/multiple/code.ts         |  17 +
 .../__fixtures__/css/multiple/fs.json         |   1 +
 .../__fixtures__/css/multiple/output.css      |  13 +
 .../__fixtures__/css/multiple/output.ts       |  43 +++
 .../__fixtures__/css/reset-assets/blank.jpg   | Bin 0 -> 631 bytes
 .../__fixtures__/css/reset-assets/code.ts     |   6 +
 .../__fixtures__/css/reset-assets/fs.json     |   1 +
 .../__fixtures__/css/reset-assets/output.css  |   4 +
 .../__fixtures__/css/reset-assets/output.ts   |   5 +
 .../__fixtures__/css/reset-media/code.ts      |  11 +
 .../__fixtures__/css/reset-media/fs.json      |   1 +
 .../__fixtures__/css/reset-media/output.css   |  14 +
 .../__fixtures__/css/reset/code.ts            |   6 +
 .../__fixtures__/css/reset/fs.json            |   1 +
 .../__fixtures__/css/reset/output.css         |   9 +
 .../__fixtures__/css/reset/output.ts          |   4 +
 .../css/rules-deduplication/code.ts           |  15 +
 .../css/rules-deduplication/fs.json           |   1 +
 .../css/rules-deduplication/output.css        |   7 +
 .../__fixtures__/css/style-buckets/code.ts    |  40 ++
 .../__fixtures__/css/style-buckets/fs.json    |   1 +
 .../__fixtures__/css/style-buckets/output.css |  51 +++
 .../css/unstable-attach-to-main/code.ts       |   7 +
 .../css/unstable-attach-to-main/codeB.ts      |   9 +
 .../css/unstable-attach-to-main/fs.json       |   1 +
 .../css/unstable-attach-to-main/output.css    |   7 +
 .../css/unstable-attach-to-main/output.ts     |   8 +
 .../css/unstable-keep-original-code/code.ts   |  17 +
 .../css/unstable-keep-original-code/fs.json   |   1 +
 .../unstable-keep-original-code/output.css    |  12 +
 .../css/unstable-keep-original-code/output.ts |  19 +
 .../__fixtures__/css/with-chunks/chunkA.css   |   6 +
 .../__fixtures__/css/with-chunks/chunkA.ts    |   6 +
 .../__fixtures__/css/with-chunks/chunkB.css   |   3 +
 .../__fixtures__/css/with-chunks/chunkB.ts    |   6 +
 .../__fixtures__/css/with-chunks/code.ts      |  20 +
 .../__fixtures__/css/with-chunks/fs.json      |   1 +
 .../__fixtures__/css/with-chunks/output.css   |  20 +
 .../__fixtures__/css/with-css/code.ts         |   6 +
 .../__fixtures__/css/with-css/fs.json         |   1 +
 .../__fixtures__/css/with-css/input.css       |   6 +
 .../__fixtures__/css/with-css/output.css      |  12 +
 .../src/GriffelCSSExtractionPlugin.test.ts    | 357 ++++++++++++++++++
 .../src/GriffelCSSExtractionPlugin.ts         | 276 ++++++++++++++
 packages/webpack-loader/src/constants.ts      |  13 +
 .../src/generateCSSRules.test.ts              |  54 +++
 .../webpack-loader/src/generateCSSRules.ts    |  38 ++
 .../webpack-loader/src/parseCSSRules.test.ts  |  93 +++++
 packages/webpack-loader/src/parseCSSRules.ts  |  47 +++
 .../webpack-loader/src/sortCSSRules.test.ts   | 262 +++++++++++++
 packages/webpack-loader/src/sortCSSRules.ts   |  46 +++
 packages/webpack-loader/src/transformSync.ts  |   5 +-
 packages/webpack-loader/src/webpackLoader.ts  |  58 ++-
 .../webpack-loader/virtual-loader/griffel.css |   1 +
 .../webpack-loader/virtual-loader/index.js    |  19 +
 101 files changed, 2053 insertions(+), 5 deletions(-)
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/left.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-flip/right.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/blank.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/empty.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets-multiple/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets/blank.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/assets/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/basic-rules/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/basic-rules/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/basic-rules/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/basic-rules/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-name/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-name/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-name/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-no-split-chunks/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-no-split-chunks/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-no-split-chunks/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkA.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkB.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-split-chunks/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-split-chunks/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/config-split-chunks/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/empty/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/empty/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/empty/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/empty/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/missing-calls/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/missing-calls/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/missing-calls/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/missing-calls/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/mixed/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/mixed/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/mixed/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/mixed/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/multiple/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/multiple/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/multiple/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/multiple/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-assets/blank.jpg
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-assets/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-assets/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-assets/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-assets/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-media/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-media/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset-media/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/reset/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/rules-deduplication/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/rules-deduplication/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/rules-deduplication/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/style-buckets/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/style-buckets/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/style-buckets/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/codeB.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-chunks/output.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-css/code.ts
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-css/fs.json
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-css/input.css
 create mode 100644 packages/webpack-loader/__fixtures__/css/with-css/output.css
 create mode 100644 packages/webpack-loader/src/GriffelCSSExtractionPlugin.test.ts
 create mode 100644 packages/webpack-loader/src/GriffelCSSExtractionPlugin.ts
 create mode 100644 packages/webpack-loader/src/constants.ts
 create mode 100644 packages/webpack-loader/src/generateCSSRules.test.ts
 create mode 100644 packages/webpack-loader/src/generateCSSRules.ts
 create mode 100644 packages/webpack-loader/src/parseCSSRules.test.ts
 create mode 100644 packages/webpack-loader/src/parseCSSRules.ts
 create mode 100644 packages/webpack-loader/src/sortCSSRules.test.ts
 create mode 100644 packages/webpack-loader/src/sortCSSRules.ts
 create mode 100644 packages/webpack-loader/virtual-loader/griffel.css
 create mode 100644 packages/webpack-loader/virtual-loader/index.js

diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts
index b1354bd80..6bbac8a52 100644
--- a/packages/babel-preset/src/transformPlugin.ts
+++ b/packages/babel-preset/src/transformPlugin.ts
@@ -13,6 +13,9 @@ import { dedupeCSSRules } from './utils/dedupeCSSRules';
 import { evaluatePaths } from './utils/evaluatePaths';
 import type { BabelPluginOptions, BabelPluginMetadata } from './types';
 import { validateOptions } from './validateOptions';
+import { absolutePathToRelative } from './assets/absolutePathToRelative';
+import { tokenize } from 'stylis';
+import { isAssetUrl } from './assets/isAssetUrl';
 
 type FunctionKinds = 'makeStyles' | 'makeResetStyles';
 
@@ -31,6 +34,8 @@ type BabelPluginState = PluginPass & {
   calleePaths?: NodePath<t.Identifier>[];
   cssEntries?: BabelPluginMetadata['cssEntries'];
   cssResetEntries?: BabelPluginMetadata['cssResetEntries'];
+
+  cssRulesByBucket?: CSSRulesByBucket;
 };
 
 function getDefinitionPathFromCallExpression(
@@ -195,6 +200,67 @@ function isRequireDeclarator(
   return false;
 }
 
+function concatCSSRulesByBucket(bucketA: CSSRulesByBucket = {}, bucketB: CSSRulesByBucket) {
+  Object.entries(bucketB).forEach(([cssBucketName, cssBucketEntries]) => {
+    bucketA[cssBucketName as keyof CSSRulesByBucket] = cssBucketEntries.concat(
+      bucketA[cssBucketName as keyof CSSRulesByBucket] || [],
+    );
+  });
+
+  return bucketA;
+}
+
+function inlineAssetImports({
+  cssRulesByBucket,
+  importPath,
+  filename,
+  projectRoot,
+}: {
+  cssRulesByBucket: CSSRulesByBucket;
+  importPath: string;
+  filename: string;
+  projectRoot: string;
+}) {
+  Object.entries(cssRulesByBucket).forEach(([cssBucketName, cssBucketEntries]) => {
+    cssBucketEntries.forEach((bucketEntry, index) => {
+      const [cssRule, metadata] = normalizeCSSBucketEntry(bucketEntry);
+
+      if (cssRule.indexOf('url(') === -1) {
+        return;
+      }
+
+      const tokens = tokenize(cssRule);
+      let newCSSRule = '';
+
+      for (let i = 0, l = tokens.length; i < l; i++) {
+        newCSSRule += tokens[i];
+
+        if (tokens[i] === 'url') {
+          const url = tokens[i + 1].slice(1, -1);
+
+          if (isAssetUrl(url)) {
+            const [pathname, hash] = url.split('#');
+            const relativePath = absolutePathToRelative(path, projectRoot, filename, pathname);
+
+            newCSSRule += `(${relativePath}${hash ? `#${hash}` : ''})`;
+            i++;
+          }
+        }
+      }
+
+      if (Array.isArray(bucketEntry)) {
+        // @ts-expect-error TODO: fix me
+        cssRulesByBucket[cssBucketName][index] = [newCSSRule, metadata];
+      } else {
+        // @ts-expect-error TODO: fix me
+        cssRulesByBucket[cssBucketName][index] = newCSSRule;
+      }
+    });
+  });
+
+  return cssRulesByBucket;
+}
+
 export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<BabelPluginState>>((api, options) => {
   api.assertVersion(7);
 
@@ -238,6 +304,18 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
         } as BabelPluginMetadata);
       }
     },
+    post() {
+      if (pluginOptions.mode === 'css-extraction') {
+        Object.assign(this.file.metadata, {
+          cssRulesByBucket: inlineAssetImports({
+            cssRulesByBucket: this.cssRulesByBucket!,
+            importPath: path.relative(this.filename!, pluginOptions.projectRoot),
+            filename: this.filename!,
+            projectRoot: pluginOptions.projectRoot,
+          }),
+        } as BabelPluginMetadata);
+      }
+    },
 
     visitor: {
       Program: {
@@ -311,6 +389,10 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                   );
                 }
 
+                if (pluginOptions.mode === 'css-extraction') {
+                  state.cssRulesByBucket = concatCSSRulesByBucket(state.cssRulesByBucket, cssRulesByBucket);
+                }
+
                 (callExpressionPath.get('arguments.0') as NodePath).remove();
                 callExpressionPath.pushContainer('arguments', [t.valueToNode(classnamesMapping)]);
 
@@ -343,6 +425,13 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                   );
                 }
 
+                if (pluginOptions.mode === 'css-extraction') {
+                  state.cssRulesByBucket = concatCSSRulesByBucket(
+                    state.cssRulesByBucket,
+                    Array.isArray(cssRules) ? { r: cssRules } : cssRules,
+                  );
+                }
+
                 (callExpressionPath.get('arguments.0') as NodePath).remove();
                 callExpressionPath.pushContainer('arguments', [
                   t.valueToNode(ltrClassName),
@@ -354,7 +443,9 @@ export const transformPlugin = declare<Partial<BabelPluginOptions>, PluginObj<Ba
                 }
               }
 
-              replaceAssetsWithImports(pluginOptions.projectRoot, state.filename!, programPath, callExpressionPath);
+              if (pluginOptions.mode === 'aot') {
+                replaceAssetsWithImports(pluginOptions.projectRoot, state.filename!, programPath, callExpressionPath);
+              }
             });
 
             if (pluginOptions.generateMetadata) {
diff --git a/packages/babel-preset/src/types.ts b/packages/babel-preset/src/types.ts
index c027487b9..ba620e438 100644
--- a/packages/babel-preset/src/types.ts
+++ b/packages/babel-preset/src/types.ts
@@ -1,5 +1,6 @@
 import type { TransformOptions } from '@babel/core';
 import type { EvalRule } from '@linaria/babel-preset';
+import type { CSSRulesByBucket } from '@griffel/core';
 
 export type BabelPluginOptions = {
   classNameHashSalt?: string;
@@ -39,4 +40,6 @@ export type BabelPluginOptions = {
 export type BabelPluginMetadata = {
   cssEntries: Record<string, Record<string, string[]>>;
   cssResetEntries: Record<string, string[]>;
+
+  cssRulesByBucket?: CSSRulesByBucket | undefined;
 };
diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/code.ts b/packages/webpack-loader/__fixtures__/css/assets-flip/code.ts
new file mode 100644
index 000000000..781fdfcce
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-flip/code.ts
@@ -0,0 +1,10 @@
+import { makeStyles } from '@griffel/react';
+
+import asset from './left.jpg';
+import asset2 from './right.jpg';
+
+export const useStyles = makeStyles({
+  root: {
+    backgroundImage: `url(${asset}), url(${asset2})`,
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/fs.json b/packages/webpack-loader/__fixtures__/css/assets-flip/fs.json
new file mode 100644
index 000000000..45512ed2f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-flip/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css", "left.jpg", "right.jpg"]
diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/left.jpg b/packages/webpack-loader/__fixtures__/css/assets-flip/left.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/output.css b/packages/webpack-loader/__fixtures__/css/assets-flip/output.css
new file mode 100644
index 000000000..c1c7a2635
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-flip/output.css
@@ -0,0 +1,7 @@
+/** griffel.css **/
+.f1fzzynb {
+  background-image: url(left.jpg), url(right.jpg);
+}
+.fohmc4e {
+  background-image: url(right.jpg), url(left.jpg);
+}
diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/output.ts b/packages/webpack-loader/__fixtures__/css/assets-flip/output.ts
new file mode 100644
index 000000000..54b1e5b1e
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-flip/output.ts
@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+import asset from './left.jpg';
+import asset2 from './right.jpg';
+export const useStyles = __css({
+  root: {
+    Bcmaq0h: ['f1fzzynb', 'fohmc4e'],
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/assets-flip/right.jpg b/packages/webpack-loader/__fixtures__/css/assets-flip/right.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/blank.jpg b/packages/webpack-loader/__fixtures__/css/assets-multiple/blank.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/code.ts b/packages/webpack-loader/__fixtures__/css/assets-multiple/code.ts
new file mode 100644
index 000000000..c2278e4dd
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-multiple/code.ts
@@ -0,0 +1,9 @@
+import { makeStyles } from '@griffel/react';
+import asset from './blank.jpg';
+import asset2 from './empty.jpg';
+
+export const useStyles = makeStyles({
+  root: {
+    backgroundImage: `url(${asset}), url(${asset2})`,
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/empty.jpg b/packages/webpack-loader/__fixtures__/css/assets-multiple/empty.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/fs.json b/packages/webpack-loader/__fixtures__/css/assets-multiple/fs.json
new file mode 100644
index 000000000..aa457676b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-multiple/fs.json
@@ -0,0 +1 @@
+["blank.jpg", "bundle.js", "empty.jpg", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/output.css b/packages/webpack-loader/__fixtures__/css/assets-multiple/output.css
new file mode 100644
index 000000000..9113da754
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-multiple/output.css
@@ -0,0 +1,4 @@
+/** griffel.css **/
+.f12slugy {
+  background-image: url(blank.jpg), url(empty.jpg);
+}
diff --git a/packages/webpack-loader/__fixtures__/css/assets-multiple/output.ts b/packages/webpack-loader/__fixtures__/css/assets-multiple/output.ts
new file mode 100644
index 000000000..5df5ba862
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets-multiple/output.ts
@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+import asset from './blank.jpg';
+import asset2 from './empty.jpg';
+export const useStyles = __css({
+  root: {
+    Bcmaq0h: 'f12slugy',
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/assets/blank.jpg b/packages/webpack-loader/__fixtures__/css/assets/blank.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/assets/code.ts b/packages/webpack-loader/__fixtures__/css/assets/code.ts
new file mode 100644
index 000000000..e80b3a6d1
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets/code.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+import asset from './blank.jpg';
+
+export const useStyles = makeStyles({
+  root: {
+    backgroundImage: `url(${asset})`,
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/assets/fs.json b/packages/webpack-loader/__fixtures__/css/assets/fs.json
new file mode 100644
index 000000000..5e549a74a
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets/fs.json
@@ -0,0 +1 @@
+["blank.jpg", "bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/assets/output.css b/packages/webpack-loader/__fixtures__/css/assets/output.css
new file mode 100644
index 000000000..c64bf25f6
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets/output.css
@@ -0,0 +1,4 @@
+/** griffel.css **/
+.f152sxi1 {
+  background-image: url(blank.jpg);
+}
diff --git a/packages/webpack-loader/__fixtures__/css/assets/output.ts b/packages/webpack-loader/__fixtures__/css/assets/output.ts
new file mode 100644
index 000000000..c3fa6dce3
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/assets/output.ts
@@ -0,0 +1,9 @@
+import { __css } from '@griffel/react';
+import asset from './blank.jpg';
+export const useStyles = __css({
+  root: {
+    Bcmaq0h: 'f152sxi1',
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/basic-rules/code.ts b/packages/webpack-loader/__fixtures__/css/basic-rules/code.ts
new file mode 100644
index 000000000..9acde43aa
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/basic-rules/code.ts
@@ -0,0 +1,18 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    color: 'red',
+    paddingLeft: '4px',
+  },
+  button: {
+    border: '3px solid red',
+    background: 'green',
+  },
+  icon: {
+    backgroundColor: 'green',
+    ':hover': {
+      color: 'red',
+    },
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/basic-rules/fs.json b/packages/webpack-loader/__fixtures__/css/basic-rules/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/basic-rules/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/basic-rules/output.css b/packages/webpack-loader/__fixtures__/css/basic-rules/output.css
new file mode 100644
index 000000000..79a82c5fb
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/basic-rules/output.css
@@ -0,0 +1,22 @@
+/** griffel.css **/
+.f1vilie2 {
+  border: 3px solid red;
+}
+.f65sxns {
+  background: green;
+}
+.fe3e8s9 {
+  color: red;
+}
+.fycuoez {
+  padding-left: 4px;
+}
+.f8wuabp {
+  padding-right: 4px;
+}
+.fcnqdeg {
+  background-color: green;
+}
+.faf35ka:hover {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/basic-rules/output.ts b/packages/webpack-loader/__fixtures__/css/basic-rules/output.ts
new file mode 100644
index 000000000..85467dfd6
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/basic-rules/output.ts
@@ -0,0 +1,43 @@
+import { __css } from '@griffel/react';
+export const styles = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+    uwmqm3: ['fycuoez', 'f8wuabp'],
+  },
+  button: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: 'f1vilie2',
+    Bgh53k4: 0,
+    B2eet1l: 0,
+    De3pzq: 0,
+    Bcmaq0h: 0,
+    gk0gix: 0,
+    B20660r: 0,
+    B8a6bjv: 0,
+    Bpptf2m: 0,
+    e5kdtc: 0,
+    Bkjc3bi: 0,
+    ayd6f0: 'f65sxns',
+  },
+  icon: {
+    De3pzq: 'fcnqdeg',
+    Bi91k9c: 'faf35ka',
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/config-name/code.ts b/packages/webpack-loader/__fixtures__/css/config-name/code.ts
new file mode 100644
index 000000000..29003daac
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-name/code.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/config-name/fs.json b/packages/webpack-loader/__fixtures__/css/config-name/fs.json
new file mode 100644
index 000000000..b73258515
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-name/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.6a29fbe5fff1646cc55d.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/config-name/output.css b/packages/webpack-loader/__fixtures__/css/config-name/output.css
new file mode 100644
index 000000000..f5be2de1a
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-name/output.css
@@ -0,0 +1,4 @@
+/** griffel.6a29fbe5fff1646cc55d.css **/
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/code.ts b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/code.ts
new file mode 100644
index 000000000..40535839a
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/code.ts
@@ -0,0 +1,11 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    color: 'red',
+    paddingLeft: '4px',
+  },
+  icon: {
+    backgroundColor: 'green',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/fs.json b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/output.css b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/output.css
new file mode 100644
index 000000000..f1412ed5e
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-no-split-chunks/output.css
@@ -0,0 +1,13 @@
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
+.fycuoez {
+  padding-left: 4px;
+}
+.f8wuabp {
+  padding-right: 4px;
+}
+.fcnqdeg {
+  background-color: green;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkA.ts b/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkA.ts
new file mode 100644
index 000000000..656b05d97
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkA.ts
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export default makeStyles({
+  root: { color: 'red' },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkB.ts b/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkB.ts
new file mode 100644
index 000000000..656b05d97
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-split-chunks/chunkB.ts
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export default makeStyles({
+  root: { color: 'red' },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/config-split-chunks/code.ts b/packages/webpack-loader/__fixtures__/css/config-split-chunks/code.ts
new file mode 100644
index 000000000..09572bbb1
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-split-chunks/code.ts
@@ -0,0 +1,14 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    backgroundColor: 'green',
+  },
+});
+
+export async function loadStyles() {
+  const stylesA = await import('./chunkA');
+  const stylesB = await import('./chunkB');
+
+  return [stylesA, stylesB];
+}
diff --git a/packages/webpack-loader/__fixtures__/css/config-split-chunks/fs.json b/packages/webpack-loader/__fixtures__/css/config-split-chunks/fs.json
new file mode 100644
index 000000000..201913641
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-split-chunks/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css", "split.js"]
diff --git a/packages/webpack-loader/__fixtures__/css/config-split-chunks/output.css b/packages/webpack-loader/__fixtures__/css/config-split-chunks/output.css
new file mode 100644
index 000000000..a4f3fe2d2
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/config-split-chunks/output.css
@@ -0,0 +1,7 @@
+/** griffel.css **/
+.fcnqdeg {
+  background-color: green;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/empty/code.ts b/packages/webpack-loader/__fixtures__/css/empty/code.ts
new file mode 100644
index 000000000..c79de6eb0
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/empty/code.ts
@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {},
+});
diff --git a/packages/webpack-loader/__fixtures__/css/empty/fs.json b/packages/webpack-loader/__fixtures__/css/empty/fs.json
new file mode 100644
index 000000000..8cfb87db5
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/empty/fs.json
@@ -0,0 +1 @@
+["bundle.js"]
diff --git a/packages/webpack-loader/__fixtures__/css/empty/output.css b/packages/webpack-loader/__fixtures__/css/empty/output.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/webpack-loader/__fixtures__/css/empty/output.ts b/packages/webpack-loader/__fixtures__/css/empty/output.ts
new file mode 100644
index 000000000..26953612f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/empty/output.ts
@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+export const useStyles = __css({
+  root: {},
+});
diff --git a/packages/webpack-loader/__fixtures__/css/missing-calls/code.ts b/packages/webpack-loader/__fixtures__/css/missing-calls/code.ts
new file mode 100644
index 000000000..bb5adbd5b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/missing-calls/code.ts
@@ -0,0 +1 @@
+export const foo = '__styles';
diff --git a/packages/webpack-loader/__fixtures__/css/missing-calls/fs.json b/packages/webpack-loader/__fixtures__/css/missing-calls/fs.json
new file mode 100644
index 000000000..8cfb87db5
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/missing-calls/fs.json
@@ -0,0 +1 @@
+["bundle.js"]
diff --git a/packages/webpack-loader/__fixtures__/css/missing-calls/output.css b/packages/webpack-loader/__fixtures__/css/missing-calls/output.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/webpack-loader/__fixtures__/css/missing-calls/output.ts b/packages/webpack-loader/__fixtures__/css/missing-calls/output.ts
new file mode 100644
index 000000000..bb5adbd5b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/missing-calls/output.ts
@@ -0,0 +1 @@
+export const foo = '__styles';
diff --git a/packages/webpack-loader/__fixtures__/css/mixed/code.ts b/packages/webpack-loader/__fixtures__/css/mixed/code.ts
new file mode 100644
index 000000000..9ce781da2
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/mixed/code.ts
@@ -0,0 +1,12 @@
+import { makeStyles, makeResetStyles } from '@griffel/react';
+
+export const useClasses = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
+
+export const useClassName = makeResetStyles({
+  color: 'red',
+  paddingLeft: '4px',
+});
diff --git a/packages/webpack-loader/__fixtures__/css/mixed/fs.json b/packages/webpack-loader/__fixtures__/css/mixed/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/mixed/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/mixed/output.css b/packages/webpack-loader/__fixtures__/css/mixed/output.css
new file mode 100644
index 000000000..53761cb90
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/mixed/output.css
@@ -0,0 +1,12 @@
+/** griffel.css **/
+.rjefjbm {
+  color: red;
+  padding-left: 4px;
+}
+.r7z97ji {
+  color: red;
+  padding-right: 4px;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/mixed/output.ts b/packages/webpack-loader/__fixtures__/css/mixed/output.ts
new file mode 100644
index 000000000..416232ffc
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/mixed/output.ts
@@ -0,0 +1,9 @@
+import { __css, __resetCSS } from '@griffel/react';
+export const useClasses = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
+export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/multiple/code.ts b/packages/webpack-loader/__fixtures__/css/multiple/code.ts
new file mode 100644
index 000000000..01ac3abcc
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/multiple/code.ts
@@ -0,0 +1,17 @@
+import { makeStyles } from '@griffel/react';
+
+export const stylesA = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
+
+export const stylesB = makeStyles({
+  root: {
+    backgroundColor: 'green',
+  },
+  button: {
+    border: '3px solid red',
+    background: 'green',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/multiple/fs.json b/packages/webpack-loader/__fixtures__/css/multiple/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/multiple/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/multiple/output.css b/packages/webpack-loader/__fixtures__/css/multiple/output.css
new file mode 100644
index 000000000..b255ee02a
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/multiple/output.css
@@ -0,0 +1,13 @@
+/** griffel.css **/
+.f1vilie2 {
+  border: 3px solid red;
+}
+.f65sxns {
+  background: green;
+}
+.fcnqdeg {
+  background-color: green;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/multiple/output.ts b/packages/webpack-loader/__fixtures__/css/multiple/output.ts
new file mode 100644
index 000000000..39abc366c
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/multiple/output.ts
@@ -0,0 +1,43 @@
+import { __css } from '@griffel/react';
+export const stylesA = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
+export const stylesB = __css({
+  root: {
+    De3pzq: 'fcnqdeg',
+  },
+  button: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: 'f1vilie2',
+    Bgh53k4: 0,
+    B2eet1l: 0,
+    De3pzq: 0,
+    Bcmaq0h: 0,
+    gk0gix: 0,
+    B20660r: 0,
+    B8a6bjv: 0,
+    Bpptf2m: 0,
+    e5kdtc: 0,
+    Bkjc3bi: 0,
+    ayd6f0: 'f65sxns',
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/reset-assets/blank.jpg b/packages/webpack-loader/__fixtures__/css/reset-assets/blank.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1cda9a53dc357ce07d3c67051b7615ebf7dc2f64
GIT binary patch
literal 631
zcmex=<NpH&0WUXCHwH#VMur3+WcYuZ!I^=Bjg6g+m4ls~os*M;i${c)hnt&6Qb?Fz
zL{>^(PF6}rMnOeST|r4lSw=>~TvNxu(8R<<Uft5x!pKI?*u)5A2qPyaCl5D|1TU|I
zk)n*E5y{~H0R}-121W)(W=16jCP7AKLB{__7~~lk7+Ha?1vwZB7@3$^SlQS)IJvli
z3bqO`FflSSGqEtUva+xMRo4RL8CV2ag%k}P*@OcV*_8@Kj2b5{<WP3ncu+Lx;s+Ju
zq@pHHE-`TlNhwt|bq!4|6H_yD3rj0!7gslT4^OY)kkGL3h{&kql+?8JjLfX!lG3vB
zipr|yme#iRj?S)0lc!9bHhsp-S&J4gS-Ncbij}K2ZQinV+x8thcO5!><mj>ECr+Na
zbot8FYu9hwy!G(W<0ns_J%91?)yGetzkL1n{m0K=Ab&A3Fhjfr_ZgbM1cClyVqsxs
zVF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bamA3<IN
m`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhVQ>L7B$%azX<@d&d)*s

literal 0
HcmV?d00001

diff --git a/packages/webpack-loader/__fixtures__/css/reset-assets/code.ts b/packages/webpack-loader/__fixtures__/css/reset-assets/code.ts
new file mode 100644
index 000000000..1b422c684
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-assets/code.ts
@@ -0,0 +1,6 @@
+import { makeResetStyles } from '@griffel/react';
+import asset from './blank.jpg';
+
+export const useClassName = makeResetStyles({
+  backgroundImage: `url(${asset})`,
+});
diff --git a/packages/webpack-loader/__fixtures__/css/reset-assets/fs.json b/packages/webpack-loader/__fixtures__/css/reset-assets/fs.json
new file mode 100644
index 000000000..5e549a74a
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-assets/fs.json
@@ -0,0 +1 @@
+["blank.jpg", "bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/reset-assets/output.css b/packages/webpack-loader/__fixtures__/css/reset-assets/output.css
new file mode 100644
index 000000000..6a4111a55
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-assets/output.css
@@ -0,0 +1,4 @@
+/** griffel.css **/
+.r1010496 {
+  background-image: url(blank.jpg);
+}
diff --git a/packages/webpack-loader/__fixtures__/css/reset-assets/output.ts b/packages/webpack-loader/__fixtures__/css/reset-assets/output.ts
new file mode 100644
index 000000000..b0a37e278
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-assets/output.ts
@@ -0,0 +1,5 @@
+import { __resetCSS } from '@griffel/react';
+import asset from './blank.jpg';
+export const useClassName = __resetCSS('r1010496', null);
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/reset-media/code.ts b/packages/webpack-loader/__fixtures__/css/reset-media/code.ts
new file mode 100644
index 000000000..c531e9b23
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-media/code.ts
@@ -0,0 +1,11 @@
+import { makeResetStyles } from '@griffel/react';
+
+export const useClassName = makeResetStyles({
+  color: 'red',
+  '@supports (display: flex)': {
+    color: 'pink',
+  },
+  '@media (min-width: 100px)': {
+    color: 'blue',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/reset-media/fs.json b/packages/webpack-loader/__fixtures__/css/reset-media/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-media/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/reset-media/output.css b/packages/webpack-loader/__fixtures__/css/reset-media/output.css
new file mode 100644
index 000000000..b8c0f8989
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset-media/output.css
@@ -0,0 +1,14 @@
+/** griffel.css **/
+.rjrhw4c {
+  color: red;
+}
+@supports (display: flex) {
+  .rjrhw4c {
+    color: pink;
+  }
+}
+@media (min-width: 100px) {
+  .rjrhw4c {
+    color: blue;
+  }
+}
diff --git a/packages/webpack-loader/__fixtures__/css/reset/code.ts b/packages/webpack-loader/__fixtures__/css/reset/code.ts
new file mode 100644
index 000000000..20e703a99
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset/code.ts
@@ -0,0 +1,6 @@
+import { makeResetStyles } from '@griffel/react';
+
+export const useClassName = makeResetStyles({
+  color: 'red',
+  paddingLeft: '4px',
+});
diff --git a/packages/webpack-loader/__fixtures__/css/reset/fs.json b/packages/webpack-loader/__fixtures__/css/reset/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/reset/output.css b/packages/webpack-loader/__fixtures__/css/reset/output.css
new file mode 100644
index 000000000..9dabdb72b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset/output.css
@@ -0,0 +1,9 @@
+/** griffel.css **/
+.rjefjbm {
+  color: red;
+  padding-left: 4px;
+}
+.r7z97ji {
+  color: red;
+  padding-right: 4px;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/reset/output.ts b/packages/webpack-loader/__fixtures__/css/reset/output.ts
new file mode 100644
index 000000000..c6a91f23b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/reset/output.ts
@@ -0,0 +1,4 @@
+import { __resetCSS } from '@griffel/react';
+export const useClassName = __resetCSS('rjefjbm', 'r7z97ji');
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/rules-deduplication/code.ts b/packages/webpack-loader/__fixtures__/css/rules-deduplication/code.ts
new file mode 100644
index 000000000..1d67c563d
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/rules-deduplication/code.ts
@@ -0,0 +1,15 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles1 = makeStyles({
+  root: {
+    color: 'red',
+    backgroundColor: 'green',
+  },
+});
+
+export const styles2 = makeStyles({
+  root: {
+    color: 'red',
+    backgroundColor: 'green',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/rules-deduplication/fs.json b/packages/webpack-loader/__fixtures__/css/rules-deduplication/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/rules-deduplication/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/rules-deduplication/output.css b/packages/webpack-loader/__fixtures__/css/rules-deduplication/output.css
new file mode 100644
index 000000000..8325d4dab
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/rules-deduplication/output.css
@@ -0,0 +1,7 @@
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
+.fcnqdeg {
+  background-color: green;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/style-buckets/code.ts b/packages/webpack-loader/__fixtures__/css/style-buckets/code.ts
new file mode 100644
index 000000000..92bf77ddf
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/style-buckets/code.ts
@@ -0,0 +1,40 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    color: 'red',
+    animationName: { from: { opacity: 0 }, to: { opacity: 1 } },
+
+    ':link': {
+      color: 'orange',
+    },
+    ':visited': {
+      color: 'purple',
+    },
+    ':focus-within': {
+      color: 'pink',
+    },
+    ':focus': {
+      color: 'blue',
+    },
+    ':focus-visible': {
+      color: 'salmon',
+    },
+    ':hover': {
+      color: 'yellow',
+    },
+    ':active': {
+      color: 'black',
+    },
+
+    '@supports (display: table-cell)': {
+      color: 'red',
+    },
+    '@layer color': {
+      color: 'red',
+    },
+    '@media (forced-colors: active)': {
+      color: 'magenta',
+    },
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/style-buckets/fs.json b/packages/webpack-loader/__fixtures__/css/style-buckets/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/style-buckets/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/style-buckets/output.css b/packages/webpack-loader/__fixtures__/css/style-buckets/output.css
new file mode 100644
index 000000000..520f54178
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/style-buckets/output.css
@@ -0,0 +1,51 @@
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
+.f1h7u52p {
+  animation-name: f5j8bii;
+}
+.fotbnap:link {
+  color: orange;
+}
+.fyi94ye:visited {
+  color: purple;
+}
+.ftbb72r:focus-within {
+  color: pink;
+}
+.fh9mp3k:focus {
+  color: blue;
+}
+.f1essijy:focus-visible {
+  color: salmon;
+}
+.fsp9ihd:hover {
+  color: yellow;
+}
+.flqvnfu:active {
+  color: black;
+}
+@keyframes f5j8bii {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@supports (display: table-cell) {
+  .fraqsfm {
+    color: red;
+  }
+}
+@layer color {
+  .f1al6es7 {
+    color: red;
+  }
+}
+@media (forced-colors: active) {
+  .fqoinyl {
+    color: magenta;
+  }
+}
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/code.ts b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/code.ts
new file mode 100644
index 000000000..44d3289e2
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/code.ts
@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+
+export const useClasses = makeStyles({
+  root: {
+    color: 'red',
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/codeB.ts b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/codeB.ts
new file mode 100644
index 000000000..8fed40809
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/codeB.ts
@@ -0,0 +1,9 @@
+import { makeStyles } from '@griffel/react';
+
+export const useClasses = makeStyles({
+  root: {
+    ':hover': {
+      color: 'red',
+    },
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/fs.json b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/fs.json
new file mode 100644
index 000000000..7924251a3
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/fs.json
@@ -0,0 +1 @@
+["bundle.js", "bundleB.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.css b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.css
new file mode 100644
index 000000000..0c56b4e13
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.css
@@ -0,0 +1,7 @@
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
+.faf35ka:hover {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.ts b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.ts
new file mode 100644
index 000000000..f072b24ce
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-attach-to-main/output.ts
@@ -0,0 +1,8 @@
+import { __css } from '@griffel/react';
+export const useClasses = __css({
+  root: {
+    sj55zd: 'fe3e8s9',
+  },
+});
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/code.ts b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/code.ts
new file mode 100644
index 000000000..65a7c27dc
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/code.ts
@@ -0,0 +1,17 @@
+import { __resetStyles, __styles } from '@griffel/react';
+
+export const useClasses = __styles(
+  {
+    root: {
+      sj55zd: 'fe3e8s9',
+    },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
+
+export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [
+  '.rjefjbm{color:red;padding-left:4px;}',
+  '.r7z97ji{color:red;padding-right:4px;}',
+]);
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/fs.json b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/fs.json
new file mode 100644
index 000000000..966fca32f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/fs.json
@@ -0,0 +1 @@
+["bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.css b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.css
new file mode 100644
index 000000000..53761cb90
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.css
@@ -0,0 +1,12 @@
+/** griffel.css **/
+.rjefjbm {
+  color: red;
+  padding-left: 4px;
+}
+.r7z97ji {
+  color: red;
+  padding-right: 4px;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.ts b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.ts
new file mode 100644
index 000000000..6044a324c
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/unstable-keep-original-code/output.ts
@@ -0,0 +1,19 @@
+import { __resetStyles, __styles } from '@griffel/react';
+
+export const useClasses = __styles(
+  {
+    root: {
+      sj55zd: 'fe3e8s9',
+    },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
+
+export const useClassName = __resetStyles('rjefjbm', 'r7z97ji', [
+  '.rjefjbm{color:red;padding-left:4px;}',
+  '.r7z97ji{color:red;padding-right:4px;}',
+]);
+
+import './code.griffel.css!=!../../../virtual-loader/index.js!./code.ts';
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.css b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.css
new file mode 100644
index 000000000..7c0edcc72
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.css
@@ -0,0 +1,6 @@
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.ts b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.ts
new file mode 100644
index 000000000..d6d5d7064
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkA.ts
@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+import './chunkA.css';
+
+export const styles = makeStyles({
+  root: { color: 'red' },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.css b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.css
new file mode 100644
index 000000000..edf0e1979
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.css
@@ -0,0 +1,3 @@
+.baz {
+  color: blue;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.ts b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.ts
new file mode 100644
index 000000000..3c1594455
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/chunkB.ts
@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+import './chunkB.css';
+
+export const styles = makeStyles({
+  root: { color: 'red' },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/code.ts b/packages/webpack-loader/__fixtures__/css/with-chunks/code.ts
new file mode 100644
index 000000000..64e8a02ff
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/code.ts
@@ -0,0 +1,20 @@
+import { makeStyles } from '@griffel/react';
+
+export const styles = makeStyles({
+  root: {
+    backgroundColor: 'green',
+  },
+});
+
+export async function loadStyles() {
+  const { styles: stylesA } = await import(
+    /* webpackChunkName: "chunkA" */
+    './chunkA'
+  );
+  const { styles: stylesB } = await import(
+    /* webpackChunkName: "chunkB" */
+    './chunkB'
+  );
+
+  return [stylesA, stylesB];
+}
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/fs.json b/packages/webpack-loader/__fixtures__/css/with-chunks/fs.json
new file mode 100644
index 000000000..dd9a60023
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/fs.json
@@ -0,0 +1 @@
+["bundle.js", "chunkA.css", "chunkA.js", "chunkB.css", "chunkB.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/with-chunks/output.css b/packages/webpack-loader/__fixtures__/css/with-chunks/output.css
new file mode 100644
index 000000000..4e2400027
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-chunks/output.css
@@ -0,0 +1,20 @@
+/** chunkA.css **/
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
+
+/** chunkB.css **/
+.baz {
+  color: blue;
+}
+
+/** griffel.css **/
+.fcnqdeg {
+  background-color: green;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/with-css/code.ts b/packages/webpack-loader/__fixtures__/css/with-css/code.ts
new file mode 100644
index 000000000..9fb13f01d
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-css/code.ts
@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+import './input.css';
+
+export const styles1 = makeStyles({
+  root: { color: 'red' },
+});
diff --git a/packages/webpack-loader/__fixtures__/css/with-css/fs.json b/packages/webpack-loader/__fixtures__/css/with-css/fs.json
new file mode 100644
index 000000000..0d27c81f0
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-css/fs.json
@@ -0,0 +1 @@
+["bundle.css", "bundle.js", "griffel.css"]
diff --git a/packages/webpack-loader/__fixtures__/css/with-css/input.css b/packages/webpack-loader/__fixtures__/css/with-css/input.css
new file mode 100644
index 000000000..7c0edcc72
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-css/input.css
@@ -0,0 +1,6 @@
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
diff --git a/packages/webpack-loader/__fixtures__/css/with-css/output.css b/packages/webpack-loader/__fixtures__/css/with-css/output.css
new file mode 100644
index 000000000..3b4f7c2bf
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/css/with-css/output.css
@@ -0,0 +1,12 @@
+/** bundle.css **/
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
+
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-loader/src/GriffelCSSExtractionPlugin.test.ts b/packages/webpack-loader/src/GriffelCSSExtractionPlugin.test.ts
new file mode 100644
index 000000000..e2b5e7586
--- /dev/null
+++ b/packages/webpack-loader/src/GriffelCSSExtractionPlugin.test.ts
@@ -0,0 +1,357 @@
+import * as fs from 'fs';
+import { createFsFromVolume, Volume } from 'memfs';
+import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as path from 'path';
+import * as prettier from 'prettier';
+import * as webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import type { GriffelCSSExtractionPluginOptions } from './GriffelCSSExtractionPlugin';
+import { GriffelCSSExtractionPlugin } from './GriffelCSSExtractionPlugin';
+import type { WebpackLoaderOptions } from './webpackLoader';
+
+type TestOptions = {
+  only?: boolean;
+
+  cssFilename?: string;
+  loaderOptions?: WebpackLoaderOptions;
+  pluginOptions?: GriffelCSSExtractionPluginOptions;
+  webpackConfig?: webpack.Configuration;
+};
+
+const prettierConfig = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '../../../.prettierrc'), { encoding: 'utf-8' }),
+);
+
+async function compileSourceWithWebpack(
+  entryPath: string,
+  options: TestOptions,
+): Promise<{
+  filesList: string[];
+  cssOutput: string;
+  moduleSource: string;
+}> {
+  const defaultConfig: webpack.Configuration = {
+    context: __dirname,
+    entry: {
+      bundle: entryPath,
+    },
+
+    mode: 'production',
+    devtool: false,
+
+    output: {
+      path: path.resolve(__dirname),
+      filename: '[name].js',
+      pathinfo: false,
+      assetModuleFilename: '[name][ext]',
+    },
+    externals: {
+      '@griffel/react': 'Griffel',
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.(ts|tsx)$/,
+          include: path.dirname(entryPath),
+          use: {
+            loader: path.resolve(__dirname, './index.ts'),
+            options: {
+              mode: 'css-extraction',
+              ...options.loaderOptions,
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }],
+        },
+        {
+          test: /\.jpg$/,
+          type: 'asset/resource',
+        },
+      ],
+    },
+    plugins: [
+      new GriffelCSSExtractionPlugin(options.pluginOptions),
+      new MiniCssExtractPlugin({
+        filename: options.cssFilename ?? '[name].css',
+      }),
+    ],
+
+    optimization: {
+      concatenateModules: false,
+      minimizer: [],
+    },
+    resolve: {
+      extensions: ['.js', '.ts'],
+    },
+  };
+
+  const webpackConfig = merge(defaultConfig, options.webpackConfig || {});
+  const compiler = webpack(webpackConfig);
+
+  const virtualFsVolume = createFsFromVolume(new Volume());
+
+  compiler.outputFileSystem = virtualFsVolume;
+  compiler.outputFileSystem.join = path.join.bind(path);
+
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      if (typeof stats === 'undefined') {
+        reject(new Error('"stats" from Webpack are not available, unknown error...'));
+        return;
+      }
+
+      const jsonStats = stats.toJson({ source: true });
+
+      if (stats.hasErrors()) {
+        reject(stats.toJson().errors![0]);
+        return;
+      }
+
+      if (stats.hasWarnings()) {
+        reject(stats.toJson().warnings![0]);
+        return;
+      }
+
+      if (!Array.isArray(jsonStats.modules)) {
+        reject(new Error(`"stats.toJson().modules" should be an array, this could be a compilation error...`));
+        return;
+      }
+
+      const entryModule = jsonStats.modules.find(module => module.nameForCondition === entryPath);
+
+      if (!entryModule) {
+        reject(new Error(`Failed to find a fixture in "stats.toJson().modules", this could be a compilation error...`));
+        return;
+      }
+
+      const filesList = (virtualFsVolume.readdirSync(__dirname) as string[]).sort();
+      const cssOutput = filesList
+        .filter(filename => filename.includes('.css'))
+        .map(filename => {
+          return (
+            '\n' +
+            `/** ${path.basename(filename)} **/` +
+            '\n' +
+            virtualFsVolume.readFileSync(path.resolve(__dirname, filename), {
+              encoding: 'utf-8',
+            })
+          );
+        })
+        .join('');
+
+      resolve({
+        cssOutput,
+        filesList,
+        moduleSource: entryModule.source as string,
+      });
+    });
+  });
+}
+
+function fixLineEndings(value: string) {
+  return String(value).replace(/\r?\n/g, '\n').trim();
+}
+
+/**
+ * Test utility similar to "babel-plugin-tester".
+ *
+ * See https://webpack.js.org/contribute/writing-a-loader/#testing.
+ */
+function testFixture(fixtureName: string, options: TestOptions = {}) {
+  (options.only ? it.only : it)(
+    `"${fixtureName}" fixture`,
+    async () => {
+      const fixturePath = path.resolve(__dirname, '..', '__fixtures__', 'css', fixtureName);
+
+      const tsCodePath = path.resolve(fixturePath, 'code.ts');
+      const tsxCodePath = path.resolve(fixturePath, 'code.tsx');
+
+      const tsOutputPath = path.resolve(fixturePath, 'output.ts');
+      const tsxOutputPath = path.resolve(fixturePath, 'output.tsx');
+
+      const inputPath = [fs.existsSync(tsCodePath) && tsCodePath, fs.existsSync(tsxCodePath) && tsxCodePath].find(
+        Boolean,
+      );
+      const outputPath = [
+        fs.existsSync(tsOutputPath) && tsOutputPath,
+        fs.existsSync(tsxOutputPath) && tsxOutputPath,
+      ].find(Boolean);
+
+      const errorPath = path.resolve(fixturePath, 'error.ts');
+      const expectedError = fs.existsSync(errorPath) && require(errorPath);
+
+      const fsSnapshotPath = path.resolve(fixturePath, 'fs.json');
+      const cssOutputPath = path.resolve(fixturePath, 'output.css');
+
+      if (!inputPath) {
+        throw new Error(`Failed to find "code.{js,ts,tsx}" in "${fixturePath}"`);
+      }
+
+      if (!fs.existsSync(fsSnapshotPath)) {
+        throw new Error(`Failed to find "fs.json" in "${fixturePath}"`);
+      }
+
+      if (!fs.existsSync(cssOutputPath)) {
+        throw new Error(`Failed to find "output.css" in "${fixturePath}"`);
+      }
+
+      if (!cssOutputPath && !expectedError) {
+        throw new Error(`Failed to find "output.css" or "error.ts" in "${fixturePath}"`);
+      }
+
+      if (expectedError) {
+        if (!expectedError.default) {
+          throw new Error(
+            `Please check that "error.ts" contains a default export with an error or regex in "${fixturePath}"`,
+          );
+        }
+      }
+
+      let resultModule = '';
+      let resultCSS = '';
+      let resultFsSnapshot: string[] = [];
+
+      let resultError: Error | webpack.StatsError = new Error();
+
+      try {
+        const result = await compileSourceWithWebpack(inputPath, options);
+
+        resultModule = fixLineEndings(
+          prettier.format(result.moduleSource, {
+            ...prettierConfig,
+            parser: 'typescript',
+          }),
+        );
+        resultCSS = fixLineEndings(
+          prettier.format(result.cssOutput, {
+            ...prettierConfig,
+            parser: 'css',
+          }),
+        );
+        resultFsSnapshot = result.filesList;
+      } catch (err) {
+        if (expectedError) {
+          resultError = err as webpack.StatsError;
+        } else {
+          throw err;
+        }
+      }
+
+      const fsSnapshot = JSON.parse(await fs.promises.readFile(fsSnapshotPath, { encoding: 'utf8' }));
+      expect(resultFsSnapshot).toMatchObject(fsSnapshot);
+
+      if (outputPath) {
+        const moduleOutput = fixLineEndings(await fs.promises.readFile(outputPath, { encoding: 'utf8' }));
+
+        expect(resultModule).toBe(moduleOutput);
+      }
+
+      if (cssOutputPath) {
+        const cssOutput = fixLineEndings(await fs.promises.readFile(cssOutputPath, { encoding: 'utf8' }));
+
+        expect(resultCSS).toBe(cssOutput);
+      }
+
+      if (expectedError) {
+        expect(resultError.message).toMatch(expectedError.default);
+      }
+    },
+    15000,
+  );
+}
+
+describe('GriffelCSSExtractionPlugin', () => {
+  // Basic assertions
+  // --------------------
+  testFixture('basic-rules');
+  testFixture('reset');
+  testFixture('reset-media');
+  testFixture('mixed');
+  testFixture('empty');
+
+  // Ensures that a file without __styles calls remains unprocessed
+  testFixture('missing-calls');
+
+  // Multiple calls of __styles
+  testFixture('multiple');
+
+  // Deduplicate rules in stylesheet
+  testFixture('rules-deduplication');
+
+  // Sorting rules by buckets
+  testFixture('style-buckets');
+
+  // Assets
+  // --------------------
+  testFixture('assets');
+  testFixture('assets-flip');
+  testFixture('assets-multiple');
+  testFixture('reset-assets');
+
+  // Config
+  // --------------------
+
+  // Custom filenames in mini-css-extract-plugin
+  testFixture('config-name', { cssFilename: '[name].[contenthash].css' });
+
+  // Config that disables SplitChunksPlugin
+  testFixture('config-no-split-chunks', {
+    webpackConfig: {
+      optimization: {
+        splitChunks: false,
+      },
+    },
+  });
+
+  // Config that forces chunk splitting
+  testFixture('config-split-chunks', {
+    webpackConfig: {
+      optimization: {
+        splitChunks: {
+          cacheGroups: {
+            styles: {
+              enforce: true,
+              name: 'split',
+              test: /chunk[A|B]/,
+              chunks: 'all',
+            },
+          },
+        },
+      },
+    },
+  });
+
+  // Compatibility
+  // --------------------
+
+  // "pathinfo" adds comments with paths to output
+  testFixture('basic-rules', { webpackConfig: { output: { pathinfo: true } } });
+
+  // With existing CSS
+  testFixture('with-css');
+
+  // Chunks
+  // --------------------
+  testFixture('with-chunks');
+
+  // Unstable
+  // --------------------
+  testFixture('unstable-attach-to-main', {
+    pluginOptions: { unstable_attachToEntryPoint: 'main' },
+    webpackConfig: {
+      entry: {
+        bundleB: path.resolve(__dirname, '..', '__fixtures__', 'css', 'unstable-attach-to-main', 'codeB.ts'),
+      },
+    },
+  });
+  // testFixture('unstable-keep-original-code', { loaderOptions: { unstable_keepOriginalCode: true } });
+});
diff --git a/packages/webpack-loader/src/GriffelCSSExtractionPlugin.ts b/packages/webpack-loader/src/GriffelCSSExtractionPlugin.ts
new file mode 100644
index 000000000..df66beb3f
--- /dev/null
+++ b/packages/webpack-loader/src/GriffelCSSExtractionPlugin.ts
@@ -0,0 +1,276 @@
+import type { GriffelRenderer } from '@griffel/core';
+import { defaultCompareMediaQueries } from '@griffel/core';
+import { Compilation, NormalModule } from 'webpack';
+import type { Chunk, Compiler, Module, sources } from 'webpack';
+
+import { parseCSSRules } from './parseCSSRules';
+import { sortCSSRules } from './sortCSSRules';
+import { PLUGIN_NAME, GriffelCssLoaderContextKey, type SupplementedLoaderContext } from './constants';
+
+// Webpack does not export these constants
+// https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/OptimizationStages.js#L8
+const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10;
+
+type EntryPoint = Compilation['entrypoints'] extends Map<unknown, infer I> ? I : never;
+
+export type GriffelCSSExtractionPluginOptions = {
+  compareMediaQueries?: GriffelRenderer['compareMediaQueries'];
+
+  /** Specifies if the CSS extracted from Griffel calls should be attached to a specific chunk with an entrypoint. */
+  unstable_attachToEntryPoint?: string | ((chunk: EntryPoint) => boolean);
+};
+
+function attachGriffelChunkToAnotherChunk(
+  compilation: Compilation,
+  griffelChunk: Chunk,
+  attachToEntryPoint: string | ((chunk: EntryPoint) => boolean),
+) {
+  const entryPoints = Array.from(compilation.entrypoints.values());
+
+  if (entryPoints.length === 0) {
+    return;
+  }
+
+  const searchFn =
+    typeof attachToEntryPoint === 'string'
+      ? (chunk: EntryPoint) => chunk.name === attachToEntryPoint
+      : attachToEntryPoint;
+  const mainEntryPoint = entryPoints.find(searchFn) ?? entryPoints[0];
+  const targetChunk = mainEntryPoint.getEntrypointChunk();
+
+  targetChunk.split(griffelChunk);
+}
+
+function getAssetSourceContents(assetSource: sources.Source): string {
+  const source = assetSource.source();
+
+  if (typeof source === 'string') {
+    return source;
+  }
+
+  return source.toString();
+}
+
+// https://github.com/webpack-contrib/mini-css-extract-plugin/blob/26334462e419026086856787d672b052cd916c62/src/index.js#L90
+type CSSModule = Module & {
+  content: Buffer;
+};
+
+function isCSSModule(module: Module): module is CSSModule {
+  return module.type === 'css/mini-extract';
+}
+
+function isGriffelCSSModule(module: Module): boolean {
+  if (isCSSModule(module)) {
+    if (Buffer.isBuffer(module.content)) {
+      const content = module.content.toString('utf-8');
+
+      return content.indexOf('/** @griffel:css-start') !== -1;
+    }
+  }
+
+  return false;
+}
+
+function moveCSSModulesToGriffelChunk(compilation: Compilation) {
+  let griffelChunk = compilation.namedChunks.get('griffel');
+
+  if (!griffelChunk) {
+    griffelChunk = compilation.addChunk('griffel');
+  }
+
+  const matchingChunks = new Set<Chunk>();
+  let moduleIndex = 0;
+
+  for (const module of compilation.modules) {
+    if (isGriffelCSSModule(module)) {
+      const moduleChunks = compilation.chunkGraph.getModuleChunksIterable(module);
+
+      for (const chunk of moduleChunks) {
+        compilation.chunkGraph.disconnectChunkAndModule(chunk, module);
+
+        for (const group of chunk.groupsIterable) {
+          group.setModulePostOrderIndex(module, moduleIndex++);
+        }
+
+        matchingChunks.add(chunk);
+      }
+
+      compilation.chunkGraph.connectChunkAndModule(griffelChunk, module);
+    }
+  }
+
+  for (const chunk of matchingChunks) {
+    chunk.split(griffelChunk);
+  }
+}
+
+export class GriffelCSSExtractionPlugin {
+  private readonly attachToEntryPoint: GriffelCSSExtractionPluginOptions['unstable_attachToEntryPoint'];
+  private readonly compareMediaQueries: NonNullable<GriffelCSSExtractionPluginOptions['compareMediaQueries']>;
+
+  constructor(options?: GriffelCSSExtractionPluginOptions) {
+    this.attachToEntryPoint = options?.unstable_attachToEntryPoint;
+    this.compareMediaQueries = options?.compareMediaQueries ?? defaultCompareMediaQueries;
+  }
+
+  apply(compiler: Compiler): void {
+    const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, 'rspackVersion');
+
+    // WHAT?
+    //   Prevents ".griffel.css" files from being tree shaken by forcing "sideEffects" setting.
+    // WHY?
+    //   The extraction loader adds `import ""` statements that trigger virtual loader. Modules created by this loader
+    //   will have paths relative to source file. To identify what files have side effects Webpack relies on
+    //   "sideEffects" field in "package.json" and NPM packages usually have "sideEffects: false" that will trigger
+    //   Webpack to shake out generated CSS.
+
+    // @ Rspack compat:
+    // "createModule" in "normalModuleFactory" is not supported by Rspack
+    // https://github.com/web-infra-dev/rspack/blob/e52601e059fff1f0cdc4e9328746fb3ae6c3ecb2/packages/rspack/src/NormalModuleFactory.ts#L53
+    if (!IS_RSPACK) {
+      compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, nmf => {
+        nmf.hooks.createModule.tap(
+          PLUGIN_NAME,
+          // @ts-expect-error CreateData is typed as 'object'...
+          (createData: { matchResource?: string; settings: { sideEffects?: boolean } }) => {
+            if (createData.matchResource && createData.matchResource.endsWith('.griffel.css')) {
+              createData.settings.sideEffects = true;
+            }
+          },
+        );
+      });
+    }
+
+    // WHAT?
+    //  Forces all modules emitted by an extraction loader to be moved in a single chunk by SplitChunksPlugin config.
+    // WHY?
+    //  We need to sort CSS rules in the same order as it's done via style buckets. It's not possible in multiple
+    //  chunks.
+    if (compiler.options.optimization.splitChunks) {
+      compiler.options.optimization.splitChunks.cacheGroups ??= {};
+      compiler.options.optimization.splitChunks.cacheGroups['griffel'] = {
+        name: 'griffel',
+        // @ Rspack compat:
+        // Rspack does not support functions in test due performance concerns
+        // https://github.com/web-infra-dev/rspack/issues/3425#issuecomment-1577890202
+        test: IS_RSPACK ? /griffel\.css/ : isGriffelCSSModule,
+        chunks: 'all',
+        enforce: true,
+      };
+    }
+
+    compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+      // @ Rspack compat
+      // As Rspack does not support functions in "splitChunks.cacheGroups" we have to emit modules differently
+      // and can't rely on this approach due
+      if (!IS_RSPACK) {
+        // WHAT?
+        //   Adds a callback to the loader context
+        // WHY?
+        //   Allows us to register the CSS extracted from Griffel calls to then process in a CSS module
+        const cssByModuleMap = new Map<string, string>();
+
+        NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
+          const resourcePath = module.resource;
+
+          (loaderContext as SupplementedLoaderContext)[GriffelCssLoaderContextKey] = {
+            registerExtractedCss(css: string) {
+              cssByModuleMap.set(resourcePath, css);
+            },
+            getExtractedCss() {
+              const css = cssByModuleMap.get(resourcePath) ?? '';
+              cssByModuleMap.delete(resourcePath);
+
+              return css;
+            },
+          };
+        });
+      }
+
+      // WHAT?
+      //   Performs module movements between chunks if SplitChunksPlugin is not enabled.
+      // WHY?
+      //   The same reason as for SplitChunksPlugin config.
+      if (!compiler.options.optimization.splitChunks) {
+        // @ Rspack compat
+        // Rspack does not support adding chunks in the same as Webpack, we force usage of "optimization.splitChunks"
+        if (IS_RSPACK) {
+          throw new Error(
+            [
+              'You are using Rspack, but don\'t have "optimization.splitChunks" enabled.',
+              '"optimization.splitChunks" should be enabled for "@griffel/webpack-extraction-plugin" to function properly.',
+            ].join(' '),
+          );
+        }
+
+        compilation.hooks.optimizeChunks.tap({ name: PLUGIN_NAME, stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED }, () => {
+          moveCSSModulesToGriffelChunk(compilation);
+        });
+      }
+
+      // WHAT?
+      //  Disconnects Griffel chunk from other chunks, so Griffel chunk cannot be loaded async. Also connects with
+      //  the specified chunk.
+      // WHY?
+      //  This is scenario required by one of MS teams. Will be removed in the future.
+      if (this.attachToEntryPoint) {
+        // @ Rspack compat
+        // We don't support this scenario for Rspack yet.
+        if (IS_RSPACK) {
+          throw new Error('You are using Rspack, "attachToMainEntryPoint" option is supported only with Webpack.');
+        }
+
+        compilation.hooks.optimizeChunks.tap({ name: PLUGIN_NAME, stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED }, () => {
+          const griffelChunk = compilation.namedChunks.get('griffel');
+
+          if (typeof griffelChunk !== 'undefined') {
+            griffelChunk.disconnectFromGroups();
+            attachGriffelChunkToAnotherChunk(compilation, griffelChunk, this.attachToEntryPoint!);
+          }
+        });
+      }
+
+      // WHAT?
+      //  Takes a CSS file from Griffel chunks and sorts CSS inside it.
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS,
+        },
+        assets => {
+          let cssAssetDetails;
+
+          // @ Rspack compat
+          // "compilation.namedChunks.get()" explodes with Rspack
+          if (IS_RSPACK) {
+            cssAssetDetails = Object.entries(assets).find(
+              ([assetName]) => assetName.endsWith('.css') && assetName.includes('griffel'),
+            );
+          } else {
+            const griffelChunk = compilation.namedChunks.get('griffel');
+
+            if (typeof griffelChunk === 'undefined') {
+              return;
+            }
+
+            cssAssetDetails = Object.entries(assets).find(([assetName]) => griffelChunk.files.has(assetName));
+          }
+
+          if (typeof cssAssetDetails === 'undefined') {
+            return;
+          }
+
+          const [cssAssetName, cssAssetSource] = cssAssetDetails;
+
+          const cssContent = getAssetSourceContents(cssAssetSource);
+          const { cssRulesByBucket, remainingCSS } = parseCSSRules(cssContent);
+
+          const cssSource = sortCSSRules([cssRulesByBucket], this.compareMediaQueries);
+
+          compilation.updateAsset(cssAssetName, new compiler.webpack.sources.RawSource(remainingCSS + cssSource));
+        },
+      );
+    });
+  }
+}
diff --git a/packages/webpack-loader/src/constants.ts b/packages/webpack-loader/src/constants.ts
new file mode 100644
index 000000000..87a40e91d
--- /dev/null
+++ b/packages/webpack-loader/src/constants.ts
@@ -0,0 +1,13 @@
+import type { LoaderContext } from 'webpack';
+
+export const PLUGIN_NAME = 'GriffelExtractPlugin';
+export const GriffelCssLoaderContextKey = Symbol(`${PLUGIN_NAME}/GriffelCssLoaderContextKey`);
+
+export interface GriffelLoaderContextSupplement {
+  registerExtractedCss(css: string): void;
+  getExtractedCss(): string;
+}
+
+export type SupplementedLoaderContext<Options = unknown> = LoaderContext<Options> & {
+  [GriffelCssLoaderContextKey]?: GriffelLoaderContextSupplement;
+};
diff --git a/packages/webpack-loader/src/generateCSSRules.test.ts b/packages/webpack-loader/src/generateCSSRules.test.ts
new file mode 100644
index 000000000..60113d1d1
--- /dev/null
+++ b/packages/webpack-loader/src/generateCSSRules.test.ts
@@ -0,0 +1,54 @@
+import type { CSSRulesByBucket } from '@griffel/core';
+import { generateCSSRules } from './generateCSSRules';
+
+describe('generateCSSRules', () => {
+  it('generates CSS rules', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {
+      d: ['.baz { color: orange; }', '.foo { color: red; }'],
+    };
+
+    expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(`
+      "/** @griffel:css-start [d] null **/
+      .baz { color: orange; }
+      .foo { color: red; }
+      /** @griffel:css-end **/"
+    `);
+  });
+
+  it('handles empty CSS rules', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {};
+
+    expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(`""`);
+  });
+
+  it('handle CSS rules with mixed metadata', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {
+      d: [
+        '.foo { color: orange; }',
+        ['.bar { color: red; }', { p: -2 }],
+        ['.baz { color: green; }', { p: -2 }],
+        ['.qux { color: blue; }', { p: -3 }],
+      ],
+      f: ['.foo:focus { color: orange; }', ['.bar:focus { color: red; }', { p: -2 }]],
+    };
+
+    expect(generateCSSRules(cssRulesByBucket)).toMatchInlineSnapshot(`
+      "/** @griffel:css-start [d] null **/
+      .foo { color: orange; }
+      /** @griffel:css-end **/
+      /** @griffel:css-start [d] {\\"p\\":-2} **/
+      .bar { color: red; }
+      .baz { color: green; }
+      /** @griffel:css-end **/
+      /** @griffel:css-start [d] {\\"p\\":-3} **/
+      .qux { color: blue; }
+      /** @griffel:css-end **/
+      /** @griffel:css-start [f] null **/
+      .foo:focus { color: orange; }
+      /** @griffel:css-end **/
+      /** @griffel:css-start [f] {\\"p\\":-2} **/
+      .bar:focus { color: red; }
+      /** @griffel:css-end **/"
+    `);
+  });
+});
diff --git a/packages/webpack-loader/src/generateCSSRules.ts b/packages/webpack-loader/src/generateCSSRules.ts
new file mode 100644
index 000000000..53cb9f1a3
--- /dev/null
+++ b/packages/webpack-loader/src/generateCSSRules.ts
@@ -0,0 +1,38 @@
+import { type CSSRulesByBucket, normalizeCSSBucketEntry } from '@griffel/core';
+
+export function generateCSSRules(cssRulesByBucket: CSSRulesByBucket): string {
+  const entries = Object.entries(cssRulesByBucket);
+
+  if (entries.length === 0) {
+    return '';
+  }
+
+  const cssLines: string[] = [];
+  let lastEntryKey: string = '';
+
+  for (const [cssBucketName, cssBucketEntries] of entries) {
+    for (const bucketEntry of cssBucketEntries) {
+      const [cssRule, metadata] = normalizeCSSBucketEntry(bucketEntry);
+
+      const metadataAsJSON = JSON.stringify(metadata ?? null);
+      const entryKey = `${cssBucketName}-${metadataAsJSON}`;
+
+      if (lastEntryKey !== entryKey) {
+        if (lastEntryKey !== '') {
+          cssLines.push('/** @griffel:css-end **/');
+        }
+
+        cssLines.push(`/** @griffel:css-start [${cssBucketName}] ${metadataAsJSON} **/`);
+        lastEntryKey = entryKey;
+      }
+
+      cssLines.push(cssRule);
+    }
+  }
+
+  if (cssLines.length > 0) {
+    cssLines.push('/** @griffel:css-end **/');
+  }
+
+  return cssLines.join('\n');
+}
diff --git a/packages/webpack-loader/src/parseCSSRules.test.ts b/packages/webpack-loader/src/parseCSSRules.test.ts
new file mode 100644
index 000000000..a720eeea5
--- /dev/null
+++ b/packages/webpack-loader/src/parseCSSRules.test.ts
@@ -0,0 +1,93 @@
+import type { CSSRulesByBucket } from '@griffel/core';
+
+import { generateCSSRules } from './generateCSSRules';
+import { parseCSSRules } from './parseCSSRules';
+
+function removeEmptyBuckets(cssRulesByBucket: CSSRulesByBucket) {
+  return Object.fromEntries(Object.entries(cssRulesByBucket).filter(([, bucketEntries]) => bucketEntries.length > 0));
+}
+
+describe('parseCSSRules', () => {
+  it('handles regular rules', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {
+      d: ['.fe3e8s9{color:red;}'],
+      h: ['.faf35ka:hover{color:red;}'],
+    };
+    const css = generateCSSRules(cssRulesByBucket);
+    const result = parseCSSRules(css);
+
+    expect(removeEmptyBuckets(result.cssRulesByBucket)).toEqual(cssRulesByBucket);
+    expect(result.remainingCSS).toBe('');
+  });
+
+  it('handles rules with meta', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {
+      d: ['.fe3e8s9{color:red;}', ['.f65sxns{background:green;}', { p: -2 }]],
+      m: [
+        ['@media screen and (max-width: 100px){.fr5o61b{color:red;}}', { m: 'screen and (max-width: 100px)' }],
+        ['@media screen and (max-width: 100px){.f1j0ers2{display:grid;}}', { m: 'screen and (max-width: 100px)' }],
+        ['@media screen and (max-width: 100px){.fr5o61c{padding:0;}}', { m: 'screen and (max-width: 100px)', p: -1 }],
+      ],
+    };
+    const css = generateCSSRules(cssRulesByBucket);
+    const result = parseCSSRules(css);
+
+    expect(removeEmptyBuckets(result.cssRulesByBucket)).toMatchInlineSnapshot(`
+      Object {
+        "d": Array [
+          ".fe3e8s9{color:red;}",
+          Array [
+            ".f65sxns{background:green;}",
+            Object {
+              "p": -2,
+            },
+          ],
+        ],
+        "m": Array [
+          Array [
+            "@media screen and (max-width: 100px){.fr5o61b{color:red;}}",
+            Object {
+              "m": "screen and (max-width: 100px)",
+            },
+          ],
+          Array [
+            "@media screen and (max-width: 100px){.f1j0ers2{display:grid;}}",
+            Object {
+              "m": "screen and (max-width: 100px)",
+            },
+          ],
+          Array [
+            "@media screen and (max-width: 100px){.fr5o61c{padding:0;}}",
+            Object {
+              "m": "screen and (max-width: 100px)",
+              "p": -1,
+            },
+          ],
+        ],
+      }
+    `);
+    expect(result.remainingCSS).toBe('');
+  });
+
+  it('keeps third parties CSS', () => {
+    const cssRulesByBucket: CSSRulesByBucket = {
+      d: ['.fe3e8s9{color:red;}'],
+    };
+    const css = generateCSSRules(cssRulesByBucket);
+    const thirdPartyCSS = `
+    .foo { color: red }
+    /* some comment */
+    .bar { color: green }
+  `;
+    const result = parseCSSRules(css + thirdPartyCSS);
+
+    expect(removeEmptyBuckets(result.cssRulesByBucket)).toMatchInlineSnapshot(`
+      Object {
+        "d": Array [
+          ".fe3e8s9{color:red;}",
+        ],
+      }
+    `);
+    expect(result.remainingCSS).toBe('.foo{color:red;}.bar{color:green;}');
+  });
+});
diff --git a/packages/webpack-loader/src/parseCSSRules.ts b/packages/webpack-loader/src/parseCSSRules.ts
new file mode 100644
index 000000000..fc0ceb030
--- /dev/null
+++ b/packages/webpack-loader/src/parseCSSRules.ts
@@ -0,0 +1,47 @@
+import { styleBucketOrdering } from '@griffel/core';
+import { COMMENT, compile, serialize, stringify } from 'stylis';
+
+import type { CSSBucketEntry, CSSRulesByBucket, StyleBucketName } from '@griffel/core';
+
+export function parseCSSRules(css: string) {
+  const cssRulesByBucket = styleBucketOrdering.reduce<CSSRulesByBucket>((acc, styleBucketName) => {
+    acc[styleBucketName] = [];
+
+    return acc;
+  }, {}) as Required<CSSRulesByBucket>;
+  const elements = compile(css);
+  const unrelatedElements: ReturnType<typeof compile> = [];
+
+  let cssBucketName: StyleBucketName | null = null;
+  let cssMeta: Record<string, unknown> | null = null;
+
+  for (const element of elements) {
+    if (element.type === COMMENT) {
+      if (element.value.indexOf('/** @griffel:css-start') === 0) {
+        cssBucketName = element.value.charAt(24) as StyleBucketName;
+        cssMeta = JSON.parse(element.value.slice(27, -4));
+
+        continue;
+      }
+
+      if (element.value.indexOf('/** @griffel:css-end') === 0) {
+        cssBucketName = null;
+        cssMeta = null;
+
+        continue;
+      }
+    }
+
+    if (cssBucketName) {
+      const cssRule = serialize([element], stringify);
+      const bucketEntry: CSSBucketEntry = cssMeta ? [cssRule, cssMeta!] : cssRule;
+
+      cssRulesByBucket[cssBucketName].push(bucketEntry);
+      continue;
+    }
+
+    unrelatedElements.push(element);
+  }
+
+  return { cssRulesByBucket, remainingCSS: serialize(unrelatedElements, stringify) };
+}
diff --git a/packages/webpack-loader/src/sortCSSRules.test.ts b/packages/webpack-loader/src/sortCSSRules.test.ts
new file mode 100644
index 000000000..f3f5569af
--- /dev/null
+++ b/packages/webpack-loader/src/sortCSSRules.test.ts
@@ -0,0 +1,262 @@
+import type { CSSRulesByBucket, GriffelRenderer } from '@griffel/core';
+import * as prettier from 'prettier';
+
+import { getUniqueRulesFromSets, sortCSSRules } from './sortCSSRules';
+
+export const cssSerializer: jest.SnapshotSerializerPlugin = {
+  test(value) {
+    return typeof value === 'string';
+  },
+  print(value) {
+    /**
+     * test function makes sure that value is the guarded type
+     */
+    const _value = value as string;
+
+    return prettier.format(_value, { parser: 'css' }).trim();
+  },
+};
+
+expect.addSnapshotSerializer(cssSerializer);
+
+describe('getUniqueRulesFromSets', () => {
+  it('removes duplicate rules', () => {
+    const setA: CSSRulesByBucket = {
+      d: ['.baz { color: orange; }', '.foo { color: red; }'],
+      m: [['@media (max-width: 2px) { .foo { color: blue; } }', { m: '(max-width: 2px)' }]],
+    };
+    const setB: CSSRulesByBucket = {
+      d: ['.baz { color: orange; }'],
+      m: [['@media (max-width: 2px) { .yellow { color: blue; } }', { m: '(max-width: 2px)' }]],
+    };
+
+    expect(getUniqueRulesFromSets([setA, setB])).toEqual([
+      { cssRule: '.baz { color: orange; }', priority: 0, media: '', styleBucketName: 'd' },
+      { cssRule: '.foo { color: red; }', priority: 0, media: '', styleBucketName: 'd' },
+      {
+        cssRule: '@media (max-width: 2px) { .foo { color: blue; } }',
+        priority: 0,
+        media: '(max-width: 2px)',
+        styleBucketName: 'm',
+      },
+      {
+        cssRule: '@media (max-width: 2px) { .yellow { color: blue; } }',
+        priority: 0,
+        media: '(max-width: 2px)',
+        styleBucketName: 'm',
+      },
+    ]);
+  });
+});
+
+describe('sortCSSRules', () => {
+  it('removes duplicate rules', () => {
+    const setA: CSSRulesByBucket = {
+      d: ['.baz { color: orange; }', '.foo { color: red; }'],
+      m: [['@media (max-width: 2px) { .foo { color: blue; } }', { m: '(max-width: 2px)' }]],
+    };
+    const setB: CSSRulesByBucket = {
+      d: ['.baz { color: orange; }'],
+      m: [['@media (max-width: 2px) { .yellow { color: blue; } }', { m: '(max-width: 2px)' }]],
+    };
+
+    expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(`
+      .baz {
+        color: orange;
+      }
+      .foo {
+        color: red;
+      }
+      @media (max-width: 2px) {
+        .foo {
+          color: blue;
+        }
+      }
+      @media (max-width: 2px) {
+        .yellow {
+          color: blue;
+        }
+      }
+    `);
+  });
+
+  it('sorts rules by buckets order', () => {
+    const setA: CSSRulesByBucket = {
+      d: ['.default { color: orange; }'],
+      f: ['.focus:focus { color: pink; }'],
+    };
+    const setB: CSSRulesByBucket = {
+      d: ['.default { color: red; }'],
+      h: ['.hover:hover { color: yellow; }'],
+    };
+
+    expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(`
+      .default {
+        color: orange;
+      }
+      .default {
+        color: red;
+      }
+      .focus:focus {
+        color: pink;
+      }
+      .hover:hover {
+        color: yellow;
+      }
+    `);
+  });
+
+  it('sorts rules by buckets & priority', () => {
+    const setA: CSSRulesByBucket = {
+      d: ['.prio0 { color: orange; }', ['.prio-1 { margin: 0; }', { p: -1 }]],
+      f: ['.prio0:focus { color: pink; }'],
+      h: [['.prio-1:hover { padding: 0; }', { p: -1 }]],
+    };
+    const setB: CSSRulesByBucket = {
+      r: ['.reset { margin: 0; padding: 0 }'],
+      d: [
+        ['.prio-3 { border: 3px solid red; }', { p: -3 }],
+        ['.prio-2 { background: green; }', { p: -2 }],
+      ],
+      f: [['.prio-1:focus { padding: 0; }', { p: -2 }]],
+    };
+
+    expect(sortCSSRules([setA, setB], () => 0)).toMatchInlineSnapshot(`
+      .reset {
+        margin: 0;
+        padding: 0;
+      }
+      .prio-3 {
+        border: 3px solid red;
+      }
+      .prio-2 {
+        background: green;
+      }
+      .prio-1 {
+        margin: 0;
+      }
+      .prio0 {
+        color: orange;
+      }
+      .prio-1:focus {
+        padding: 0;
+      }
+      .prio0:focus {
+        color: pink;
+      }
+      .prio-1:hover {
+        padding: 0;
+      }
+    `);
+  });
+
+  describe('media queries', () => {
+    it('sorts media queries', () => {
+      const setA: CSSRulesByBucket = {
+        m: [
+          ['@media (max-width: 2px) { .mw2 { color: blue; } }', { m: '(max-width: 2px)' }],
+          ['@media (max-width: 3px) { .mw3 { color: red; } }', { m: '(max-width: 3px)' }],
+        ],
+      };
+      const setB: CSSRulesByBucket = {
+        d: ['.default { color: green; }'],
+        m: [['@media (max-width: 1px) { .mw1 { color: red; } }', { m: '(max-width: 1px)' }]],
+      };
+
+      const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)', '(max-width: 4px)'];
+      const compareMediaQueries: GriffelRenderer['compareMediaQueries'] = (a, b) =>
+        mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
+
+      expect(sortCSSRules([setA, setB], compareMediaQueries)).toMatchInlineSnapshot(`
+        .default {
+          color: green;
+        }
+        @media (max-width: 1px) {
+          .mw1 {
+            color: red;
+          }
+        }
+        @media (max-width: 2px) {
+          .mw2 {
+            color: blue;
+          }
+        }
+        @media (max-width: 3px) {
+          .mw3 {
+            color: red;
+          }
+        }
+      `);
+    });
+
+    it('handles priority', () => {
+      const setA: CSSRulesByBucket = {
+        m: [
+          ['@media (max-width: 1px) { .mw1-prio0 { display: flex; } }', { m: '(max-width: 1px)' }],
+          ['@media (max-width: 2px) { .mw2-prio0 { display: grid; } }', { m: '(max-width: 2px)' }],
+          ['@media (max-width: 2px) { .mw2-prio-1 { padding: 0; } }', { m: '(max-width: 2px)', p: -1 }],
+        ],
+      };
+      const setB: CSSRulesByBucket = {
+        m: [
+          ['@media (max-width: 1px) { .mw1-prio-1 { padding: 5px; } }', { m: '(max-width: 1px)', p: -1 }],
+          ['@media (max-width: 3px) { .mw3-prio0 { display: table; } }', { m: '(max-width: 3px)' }],
+          ['@media (max-width: 3px) { .mw3-prio-1 { padding: 5px; } }', { m: '(max-width: 3px)', p: -1 }],
+        ],
+      };
+      const setC: CSSRulesByBucket = {
+        m: [
+          ['@media (max-width: 1px) { .mw1-prio-1 { margin: 5px; } }', { m: '(max-width: 1px)', p: -1 }],
+          ['@media (max-width: 1px) { .mw1-prio-3 { border: 5px; } }', { m: '(max-width: 1px)', p: -3 }],
+        ],
+      };
+
+      const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)'];
+      const compareMediaQueries: GriffelRenderer['compareMediaQueries'] = (a, b) =>
+        mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
+
+      expect(sortCSSRules([setA, setB, setC], compareMediaQueries)).toMatchInlineSnapshot(`
+        @media (max-width: 1px) {
+          .mw1-prio-3 {
+            border: 5px;
+          }
+        }
+        @media (max-width: 1px) {
+          .mw1-prio-1 {
+            padding: 5px;
+          }
+        }
+        @media (max-width: 1px) {
+          .mw1-prio-1 {
+            margin: 5px;
+          }
+        }
+        @media (max-width: 1px) {
+          .mw1-prio0 {
+            display: flex;
+          }
+        }
+        @media (max-width: 2px) {
+          .mw2-prio-1 {
+            padding: 0;
+          }
+        }
+        @media (max-width: 2px) {
+          .mw2-prio0 {
+            display: grid;
+          }
+        }
+        @media (max-width: 3px) {
+          .mw3-prio-1 {
+            padding: 5px;
+          }
+        }
+        @media (max-width: 3px) {
+          .mw3-prio0 {
+            display: table;
+          }
+        }
+      `);
+    });
+  });
+});
diff --git a/packages/webpack-loader/src/sortCSSRules.ts b/packages/webpack-loader/src/sortCSSRules.ts
new file mode 100644
index 000000000..ffa12b496
--- /dev/null
+++ b/packages/webpack-loader/src/sortCSSRules.ts
@@ -0,0 +1,46 @@
+import { styleBucketOrdering, normalizeCSSBucketEntry } from '@griffel/core';
+import type { GriffelRenderer, StyleBucketName, CSSRulesByBucket } from '@griffel/core';
+
+// avoid repeatedly calling `indexOf` to determine order during new insertions
+const styleBucketOrderingMap = styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur as StyleBucketName] = j;
+  return acc;
+}, {} as Record<StyleBucketName, number>);
+
+type RuleEntry = { styleBucketName: StyleBucketName; cssRule: string; priority: number; media: string };
+
+export function getUniqueRulesFromSets(setOfCSSRules: CSSRulesByBucket[]): RuleEntry[] {
+  const uniqueCSSRules = new Map<string, RuleEntry>();
+
+  for (const cssRulesByBucket of setOfCSSRules) {
+    for (const _styleBucketName in cssRulesByBucket) {
+      const styleBucketName = _styleBucketName as StyleBucketName;
+
+      for (const bucketEntry of cssRulesByBucket[styleBucketName]!) {
+        const [cssRule, meta] = normalizeCSSBucketEntry(bucketEntry);
+
+        const priority = (meta?.['p'] as number | undefined) ?? 0;
+        const media = (meta?.['m'] as string | undefined) ?? '';
+
+        uniqueCSSRules.set(cssRule, { styleBucketName: styleBucketName as StyleBucketName, cssRule, priority, media });
+      }
+    }
+  }
+
+  return Array.from(uniqueCSSRules.values());
+}
+
+export function sortCSSRules(
+  setOfCSSRules: CSSRulesByBucket[],
+  compareMediaQueries: GriffelRenderer['compareMediaQueries'],
+): string {
+  return getUniqueRulesFromSets(setOfCSSRules)
+    .sort((entryA, entryB) => entryA.priority - entryB.priority)
+    .sort(
+      (entryA, entryB) =>
+        styleBucketOrderingMap[entryA.styleBucketName] - styleBucketOrderingMap[entryB.styleBucketName],
+    )
+    .sort((entryA, entryB) => compareMediaQueries(entryA.media, entryB.media))
+    .map(entry => entry.cssRule)
+    .join('');
+}
diff --git a/packages/webpack-loader/src/transformSync.ts b/packages/webpack-loader/src/transformSync.ts
index 903d9b8d0..cca53634c 100644
--- a/packages/webpack-loader/src/transformSync.ts
+++ b/packages/webpack-loader/src/transformSync.ts
@@ -1,6 +1,7 @@
 import * as Babel from '@babel/core';
 import type { BabelPluginOptions } from '@griffel/babel-preset';
-import griffelPreset from '@griffel/babel-preset';
+import griffelPreset, { BabelPluginMetadata } from '@griffel/babel-preset';
+import { type CSSRulesByBucket } from '@griffel/core';
 
 export type TransformOptions = {
   filename: string;
@@ -13,6 +14,7 @@ export type TransformOptions = {
 
 export type TransformResult = {
   code: string;
+  cssRulesByBucket: CSSRulesByBucket | undefined;
   sourceMap: NonNullable<Babel.BabelFileResult['map']> | undefined;
 };
 
@@ -53,6 +55,7 @@ export function transformSync(sourceCode: string, options: TransformOptions): Tr
 
   return {
     code: babelFileResult.code as string,
+    cssRulesByBucket: (babelFileResult.metadata as unknown as BabelPluginMetadata).cssRulesByBucket,
     sourceMap: babelFileResult.map === null ? undefined : babelFileResult.map,
   };
 }
diff --git a/packages/webpack-loader/src/webpackLoader.ts b/packages/webpack-loader/src/webpackLoader.ts
index d5dd2e633..396a8baec 100644
--- a/packages/webpack-loader/src/webpackLoader.ts
+++ b/packages/webpack-loader/src/webpackLoader.ts
@@ -4,9 +4,11 @@ import * as enhancedResolve from 'enhanced-resolve';
 import * as path from 'path';
 import type * as webpack from 'webpack';
 
+import { GriffelCssLoaderContextKey, type SupplementedLoaderContext } from './constants';
+import { generateCSSRules } from './generateCSSRules';
+import { optionsSchema } from './schema';
 import type { TransformResult, TransformOptions } from './transformSync';
 import { transformSync } from './transformSync';
-import { optionsSchema } from './schema';
 
 export type WebpackLoaderOptions = BabelPluginOptions & {
   inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[];
@@ -22,6 +24,9 @@ type ResolveOptions = Pick<
 >;
 type WebpackLoaderParams = Parameters<webpack.LoaderDefinitionFunction<WebpackLoaderOptions>>;
 
+const virtualLoaderPath = path.resolve(__dirname, '..', 'virtual-loader', 'index.js');
+const virtualCSSFilePath = path.resolve(__dirname, '..', 'virtual-loader', 'griffel.css');
+
 export function shouldTransformSourceCode(
   sourceCode: string,
   modules: WebpackLoaderOptions['modules'] | undefined,
@@ -54,8 +59,12 @@ function parseSourceMap(inputSourceMap: WebpackLoaderParams[1]): TransformOption
   }
 }
 
+function toURIComponent(rule: string): string {
+  return encodeURIComponent(rule).replace(/!/g, '%21');
+}
+
 export function webpackLoader(
-  this: webpack.LoaderContext<WebpackLoaderOptions>,
+  this: SupplementedLoaderContext<WebpackLoaderOptions>,
   sourceCode: WebpackLoaderParams[0],
   inputSourceMap: WebpackLoaderParams[1],
 ) {
@@ -136,7 +145,50 @@ export function webpackLoader(
   }
 
   if (result) {
-    this.callback(null, result.code, result.sourceMap);
+    // TODO: fix me
+    const unstable_keepOriginalCode = false;
+
+    const resultCode = unstable_keepOriginalCode ? sourceCode : result.code;
+    const resultSourceMap = unstable_keepOriginalCode ? inputSourceMap : result.sourceMap;
+    const { cssRulesByBucket } = result;
+
+    if (babelConfig.mode === 'css-extraction' && cssRulesByBucket) {
+      const IS_RSPACK = !this.webpack;
+
+      // @ Rspack compat:
+      // We don't use the trick with loader context as assets are generated differently
+      if (!IS_RSPACK) {
+        if (!this[GriffelCssLoaderContextKey]) {
+          throw new Error('GriffelCSSExtractionPlugin is not configured, please check your webpack config');
+        }
+      }
+
+      const css = generateCSSRules(cssRulesByBucket);
+
+      if (css.length === 0) {
+        this.callback(null, resultCode, resultSourceMap);
+        return;
+      }
+
+      if (IS_RSPACK) {
+        const request = `griffel.css!=!${virtualLoaderPath}!${virtualCSSFilePath}?style=${toURIComponent(css)}`;
+        const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request));
+
+        this.callback(null, `${resultCode}\n\nimport ${stringifiedRequest};`, resultSourceMap);
+        return;
+      }
+
+      this[GriffelCssLoaderContextKey]?.registerExtractedCss(css);
+
+      const outputFileName = this.resourcePath.replace(/\.[^.]+$/, '.griffel.css');
+      const request = `${outputFileName}!=!${virtualLoaderPath}!${this.resourcePath}`;
+      const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request));
+
+      this.callback(null, `${resultCode}\n\nimport ${stringifiedRequest};`, resultSourceMap);
+      return;
+    }
+
+    this.callback(null, resultCode, resultSourceMap);
     return;
   }
 
diff --git a/packages/webpack-loader/virtual-loader/griffel.css b/packages/webpack-loader/virtual-loader/griffel.css
new file mode 100644
index 000000000..d87ad61a6
--- /dev/null
+++ b/packages/webpack-loader/virtual-loader/griffel.css
@@ -0,0 +1 @@
+/** A fake CSS file, used for Rspack compat */
diff --git a/packages/webpack-loader/virtual-loader/index.js b/packages/webpack-loader/virtual-loader/index.js
new file mode 100644
index 000000000..3c0290a58
--- /dev/null
+++ b/packages/webpack-loader/virtual-loader/index.js
@@ -0,0 +1,19 @@
+const { URLSearchParams } = require('url');
+const { GriffelCssLoaderContextKey } = require('../src/constants');
+
+/**
+ * @this {import("../src/constants").SupplementedLoaderContext}
+ * @return {String}
+ */
+function virtualLoader() {
+  if (this.webpack) {
+    return this[GriffelCssLoaderContextKey]?.getExtractedCss() ?? '';
+  }
+
+  const query = new URLSearchParams(this.resourceQuery);
+  const style = query.get('style');
+
+  return style ?? '';
+}
+
+module.exports = virtualLoader;