@griffel/webpack-plugin 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log - @griffel/webpack-plugin
+
+This log was last generated on Fri, 06 Mar 2026 08:15:28 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.1.0
+
+Fri, 06 Mar 2026 08:15:28 GMT
+
+### Minor changes
+
+- feat: initial release of @griffel/webpack-plugin (olfedias@microsoft.com)
+- feat: add makeStaticStyles AOT/CSS extraction support (olfedias@microsoft.com)
+- feat: add createFluentOxcResolverFactory for FluentUI ESM resolution (olfedias@microsoft.com)
+- feat: create @griffel/webpack-plugin package with boilerplate (copilot@microsoft.com)
+- Bump @griffel/transform to v1.2.0
+- Bump @griffel/core to v1.20.0
+
+### Patches
+
+- chore: bump oxc-resolver to ^11.19.1 (olfedias@microsoft.com)
+- perf: merge triple sort into single comparator, use Buffer.indexOf, cache JSON.stringify (olfedias@microsoft.com)
+- fix: resolve tagged asset paths before CSS generation (olfedias@microsoft.com)

package/GriffelPlugin.d.mts

@@ -0,0 +1,18 @@
+import { GriffelRenderer } from '@griffel/core';
+import { Compilation, Compiler } from 'webpack';
+import { TransformResolverFactory } from './resolver/types.mjs';
+type EntryPoint = Compilation['entrypoints'] extends Map<unknown, infer I> ? I : never;
+export type GriffelCSSExtractionPluginOptions = {
+    collectStats?: boolean;
+    compareMediaQueries?: GriffelRenderer['compareMediaQueries'];
+    /** Allows to override resolver used to resolve imports inside evaluated modules. */
+    resolverFactory?: TransformResolverFactory;
+    /** Specifies if the CSS extracted from Griffel calls should be attached to a specific chunk with an entrypoint. */
+    unstable_attachToEntryPoint?: string | ((chunk: EntryPoint) => boolean);
+};
+export declare class GriffelPlugin {
+    #private;
+    constructor(options?: GriffelCSSExtractionPluginOptions);
+    apply(compiler: Compiler): void;
+}
+export {};

package/README.md

@@ -0,0 +1,84 @@
+# Webpack plugin to perform CSS extraction in Griffel
+
+A plugin for Webpack 5 that performs CSS extraction for [`@griffel/react`](../react).
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Install](#install)
+- [When to use it?](#when-to-use-it)
+- [Usage](#usage)
+- [Options](#options)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Install
+
+```bash
+yarn add --dev @griffel/webpack-plugin
+# or
+npm install --save-dev @griffel/webpack-plugin
+```
+
+## When to use it?
+
+This is a replacement for `@griffel/webpack-loader` + `@griffel/webpack-extraction-plugin`. It combines both into a single plugin that handles CSS extraction without needing a separate loader setup.
+
+## Usage
+
+Webpack documentation:
+
+- [Plugins](https://webpack.js.org/concepts/plugins/)
+- [Loaders](https://webpack.js.org/loaders/)
+
+Within your Webpack configuration, add the plugin along with `mini-css-extract-plugin`:
+
+```js
+import { GriffelPlugin } from '@griffel/webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts|tsx)$/,
+        // Apply "exclude" only if your dependencies **do not use** Griffel
+        // exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-plugin/loader',
+        },
+      },
+      // "css-loader" and "mini-css-extract-plugin" are required to handle CSS assets produced by Griffel
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [new MiniCssExtractPlugin(), new GriffelPlugin()],
+};
+```
+
+The plugin automatically:
+
+- Transforms `makeStyles()`, `makeResetStyles()`, and `makeStaticStyles()` calls at build time
+- Extracts CSS into a dedicated chunk (named `griffel`) via `mini-css-extract-plugin`
+- Sorts CSS rules by specificity buckets and media queries
+
+## Options
+
+```js
+new GriffelPlugin({
+  // Compare function for sorting media queries (default: @griffel/core's defaultCompareMediaQueries)
+  compareMediaQueries: myCompareFunction,
+
+  // Override the resolver used to resolve imports inside evaluated modules
+  resolverFactory: myResolverFactory,
+
+  // Attach extracted CSS to a specific entry point chunk
+  unstable_attachToEntryPoint: 'main',
+
+  // Collect and log timing stats
+  collectStats: false,
+});
+```

package/constants-aY3k4vvW.js

@@ -0,0 +1,6 @@
+const PLUGIN_NAME = "GriffelExtractPlugin";
+const GriffelCssLoaderContextKey = /* @__PURE__ */ Symbol.for(`${PLUGIN_NAME}/GriffelCssLoaderContextKey`);
+export {
+  GriffelCssLoaderContextKey as G,
+  PLUGIN_NAME as P
+};

package/constants.d.mts

@@ -0,0 +1,20 @@
+import { LoaderContext } from 'webpack';
+import { TransformResolver } from './resolver/types.mjs';
+export declare const PLUGIN_NAME = "GriffelExtractPlugin";
+export declare const GriffelCssLoaderContextKey: unique symbol;
+export interface GriffelLoaderContextSupplement {
+    resolveModule: TransformResolver;
+    registerExtractedCss(css: string): void;
+    getExtractedCss(): string;
+    runWithTimer<T>(cb: () => {
+        result: T;
+        meta: {
+            filename: string;
+            step: 'transform';
+            evaluationMode: 'ast' | 'vm';
+        };
+    }): T;
+}
+export type SupplementedLoaderContext<Options = unknown> = LoaderContext<Options> & {
+    [GriffelCssLoaderContextKey]?: GriffelLoaderContextSupplement;
+};

package/index.d.mts

@@ -0,0 +1,4 @@
+export { GriffelPlugin, type GriffelCSSExtractionPluginOptions } from './GriffelPlugin.mjs';
+export { createEnhancedResolverFactory } from './resolver/createEnhancedResolverFactory.mjs';
+export { createOxcResolverFactory } from './resolver/createOxcResolverFactory.mjs';
+export { createFluentOxcResolverFactory, type FluentOxcResolverOptions, } from './resolver/createFluentOxcResolverFactory.mjs';

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@griffel/webpack-plugin",
+  "version": "1.1.0",
+  "description": "Webpack plugin that performs CSS extraction for Griffel",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/griffel"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "node": "./webpack-plugin.js",
+      "types": "./index.d.mts"
+    },
+    "./loader": {
+      "node": "./webpack-loader.js",
+      "types": "./webpackLoader.d.mts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@griffel/transform": "^1.2.0",
+    "@griffel/core": "^1.20.0",
+    "enhanced-resolve": "^5.15.0",
+    "oxc-resolver": "^11.19.1",
+    "stylis": "^4.2.0"
+  },
+  "peerDependencies": {
+    "webpack": "^5"
+  }
+}

package/resolver/createEnhancedResolverFactory.d.mts

@@ -0,0 +1,6 @@
+import { Configuration } from 'webpack';
+import { TransformResolverFactory } from './types.mjs';
+export declare function createEnhancedResolverFactory(resolveOptions?: {
+    inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[];
+    webpackResolveOptions?: Pick<Required<Configuration>['resolve'], 'alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions'>;
+}): TransformResolverFactory;

package/resolver/createFluentOxcResolverFactory.d.mts

@@ -0,0 +1,7 @@
+import { NapiResolveOptions } from 'oxc-resolver';
+import { TransformResolverFactory } from './types.mjs';
+export type FluentOxcResolverOptions = Pick<NapiResolveOptions, 'conditionNames' | 'extensions' | 'alias' | 'mainFields' | 'modules'> & {
+    /** Predicate to determine if a module specifier should be resolved with ESM conditions. Defaults to matching `@fluentui/` prefixed packages. */
+    isFluentPackage?: (id: string) => boolean;
+};
+export declare function createFluentOxcResolverFactory(resolveOptions?: FluentOxcResolverOptions): TransformResolverFactory;

package/resolver/createOxcResolverFactory.d.mts

@@ -0,0 +1,2 @@
+import { TransformResolverFactory } from './types.mjs';
+export declare function createOxcResolverFactory(): TransformResolverFactory;

package/resolver/types.d.mts

@@ -0,0 +1,4 @@
+import { Module } from '@griffel/transform';
+import { Compilation } from 'webpack';
+export type TransformResolver = (typeof Module)['_resolveFilename'];
+export type TransformResolverFactory = (compilation: Compilation) => TransformResolver;

package/utils/generateCSSRules.d.mts

@@ -0,0 +1,2 @@
+import { CSSRulesByBucket } from '@griffel/core';
+export declare function generateCSSRules(cssRulesByBucket: CSSRulesByBucket): string;

package/utils/parseCSSRules.d.mts

@@ -0,0 +1,5 @@
+import { CSSRulesByBucket } from '@griffel/core';
+export declare function parseCSSRules(css: string): {
+    cssRulesByBucket: Required<CSSRulesByBucket>;
+    remainingCSS: string;
+};

package/utils/resolveAssetPaths.d.mts

@@ -0,0 +1,5 @@
+import { CSSRulesByBucket } from '@griffel/core';
+/**
+ * Walks `CSSRulesByBucket` and replaces all tagged asset paths with paths relative to `sourceFile`.
+ */
+export declare function resolveAssetPathsInCSSRules(cssRulesByBucket: CSSRulesByBucket, sourceFile: string): CSSRulesByBucket;

package/utils/sortCSSRules.d.mts

@@ -0,0 +1,10 @@
+import { GriffelRenderer, StyleBucketName, CSSRulesByBucket } from '@griffel/core';
+type RuleEntry = {
+    styleBucketName: StyleBucketName;
+    cssRule: string;
+    priority: number;
+    media: string;
+};
+export declare function getUniqueRulesFromSets(setOfCSSRules: CSSRulesByBucket[]): RuleEntry[];
+export declare function sortCSSRules(setOfCSSRules: CSSRulesByBucket[], compareMediaQueries: GriffelRenderer['compareMediaQueries']): string;
+export {};

package/virtual-loader/griffel.css

@@ -0,0 +1 @@
+/** A fake CSS file, used for Rspack compat */

package/virtual-loader/index.cjs

@@ -0,0 +1,20 @@
+const { URLSearchParams } = require('url');
+
+const GriffelCssLoaderContextKey = Symbol.for(`GriffelExtractPlugin/GriffelCssLoaderContextKey`);
+
+/**
+ * @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;

package/webpack-loader.js

@@ -0,0 +1,160 @@
+import { ASSET_TAG_OPEN, ASSET_TAG_CLOSE, EvalCache, Module, transformSync } from "@griffel/transform";
+import * as path from "node:path";
+import { G as GriffelCssLoaderContextKey } from "./constants-aY3k4vvW.js";
+import { normalizeCSSBucketEntry } from "@griffel/core";
+function generateCSSRules(cssRulesByBucket) {
+  const entries = Object.entries(cssRulesByBucket);
+  if (entries.length === 0) {
+    return "";
+  }
+  const cssLines = [];
+  let lastEntryKey = "";
+  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");
+}
+function resolveAssetPathsInString(cssRule, sourceDir) {
+  let result = "";
+  let searchFrom = 0;
+  while (searchFrom < cssRule.length) {
+    const openIdx = cssRule.indexOf(ASSET_TAG_OPEN, searchFrom);
+    if (openIdx === -1) {
+      result += cssRule.slice(searchFrom);
+      break;
+    }
+    result += cssRule.slice(searchFrom, openIdx);
+    const contentStart = openIdx + ASSET_TAG_OPEN.length;
+    const closeIdx = cssRule.indexOf(ASSET_TAG_CLOSE, contentStart);
+    if (closeIdx === -1) {
+      result += cssRule.slice(openIdx);
+      break;
+    }
+    const absolutePath = cssRule.slice(contentStart, closeIdx);
+    const relativePath = path.relative(sourceDir, absolutePath);
+    result += relativePath;
+    searchFrom = closeIdx + ASSET_TAG_CLOSE.length;
+  }
+  return result;
+}
+function resolveEntry(entry, sourceDir) {
+  if (typeof entry === "string") {
+    return resolveAssetPathsInString(entry, sourceDir);
+  }
+  return [resolveAssetPathsInString(entry[0], sourceDir), entry[1]];
+}
+function resolveAssetPathsInCSSRules(cssRulesByBucket, sourceFile) {
+  const sourceDir = path.dirname(sourceFile);
+  const resolved = {};
+  for (const bucketName in cssRulesByBucket) {
+    const entries = cssRulesByBucket[bucketName];
+    resolved[bucketName] = entries.map((entry) => resolveEntry(entry, sourceDir));
+  }
+  return resolved;
+}
+const __dirname$1 = path.dirname(new URL(import.meta.url).pathname);
+const virtualLoaderPath = path.resolve(__dirname$1, "virtual-loader", "index.cjs");
+const virtualCSSFilePath = path.resolve(__dirname$1, "virtual-loader", "griffel.css");
+function toURIComponent(rule) {
+  return encodeURIComponent(rule).replace(/!/g, "%21");
+}
+function webpackLoader(sourceCode, inputSourceMap) {
+  this.async();
+  this.cacheable();
+  if (sourceCode.indexOf("makeStyles") === -1 && sourceCode.indexOf("makeResetStyles") === -1 && sourceCode.indexOf("makeStaticStyles") === -1) {
+    this.callback(null, sourceCode, inputSourceMap);
+    return;
+  }
+  const IS_RSPACK = !this.webpack;
+  if (!IS_RSPACK) {
+    if (!this[GriffelCssLoaderContextKey]) {
+      throw new Error("GriffelCSSExtractionPlugin is not configured, please check your webpack config");
+    }
+  }
+  const { classNameHashSalt, modules, evaluationRules, babelOptions } = this.getOptions();
+  this[GriffelCssLoaderContextKey].runWithTimer(() => {
+    EvalCache.clearForFile(this.resourcePath);
+    const originalResolveFilename = Module._resolveFilename;
+    let result = null;
+    let error = null;
+    try {
+      Module._resolveFilename = (id, params) => {
+        const resolvedPath = this[GriffelCssLoaderContextKey].resolveModule(id, params);
+        this.addDependency(resolvedPath);
+        return resolvedPath;
+      };
+      result = transformSync(sourceCode, {
+        filename: this.resourcePath,
+        classNameHashSalt,
+        modules,
+        evaluationRules,
+        babelOptions
+      });
+    } catch (err) {
+      error = err;
+    } finally {
+      Module._resolveFilename = originalResolveFilename;
+    }
+    if (result) {
+      const { code, cssRulesByBucket, usedVMForEvaluation } = result;
+      const meta = {
+        filename: this.resourcePath,
+        step: "transform",
+        evaluationMode: usedVMForEvaluation ? "vm" : "ast"
+      };
+      if (cssRulesByBucket) {
+        const resolvedCssRulesByBucket = resolveAssetPathsInCSSRules(cssRulesByBucket, this.resourcePath);
+        const css = generateCSSRules(resolvedCssRulesByBucket);
+        if (css.length === 0) {
+          this.callback(null, code);
+          return { result: void 0, meta };
+        }
+        if (IS_RSPACK) {
+          const request2 = `griffel.css!=!${virtualLoaderPath}!${virtualCSSFilePath}?style=${toURIComponent(css)}`;
+          const stringifiedRequest2 = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request2));
+          this.callback(null, `${result.code}
+
+import ${stringifiedRequest2};`);
+          return { result: void 0, meta };
+        }
+        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, `${result.code}
+
+import ${stringifiedRequest};`);
+        return { result: void 0, meta };
+      }
+      this.callback(null, code);
+      return { result: void 0, meta };
+    }
+    this.callback(error);
+    return {
+      result: void 0,
+      meta: {
+        filename: this.resourcePath,
+        step: "transform",
+        evaluationMode: "ast"
+      }
+    };
+  });
+}
+export {
+  webpackLoader as default
+};

package/webpack-plugin.js

@@ -0,0 +1,368 @@
+import { styleBucketOrdering, normalizeCSSBucketEntry, defaultCompareMediaQueries } from "@griffel/core";
+import { P as PLUGIN_NAME, G as GriffelCssLoaderContextKey } from "./constants-aY3k4vvW.js";
+import enhancedResolve from "enhanced-resolve";
+import * as path from "node:path";
+import { compile, COMMENT, serialize, stringify } from "stylis";
+import { ResolverFactory } from "oxc-resolver";
+const RESOLVE_OPTIONS_DEFAULTS$2 = {
+  conditionNames: ["require"],
+  extensions: [".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx", ".json"]
+};
+function createEnhancedResolverFactory(resolveOptions = {}) {
+  const { inheritResolveOptions = ["alias", "modules", "plugins"], webpackResolveOptions } = resolveOptions;
+  return function(compilation) {
+    const resolveOptionsFromWebpackConfig = compilation?.options.resolve ?? {};
+    const resolveSync = enhancedResolve.create.sync({
+      ...RESOLVE_OPTIONS_DEFAULTS$2,
+      ...Object.fromEntries(
+        inheritResolveOptions.map((resolveOptionKey) => [
+          resolveOptionKey,
+          resolveOptionsFromWebpackConfig[resolveOptionKey]
+        ])
+      ),
+      ...webpackResolveOptions
+    });
+    return function resolveModule(id, { filename }) {
+      const resolvedPath = resolveSync(path.dirname(filename), id);
+      if (!resolvedPath) {
+        throw new Error(`enhanced-resolve: Failed to resolve module "${id}"`);
+      }
+      return resolvedPath;
+    };
+  };
+}
+function parseCSSRules(css) {
+  const cssRulesByBucket = styleBucketOrdering.reduce((acc, styleBucketName) => {
+    acc[styleBucketName] = [];
+    return acc;
+  }, {});
+  const elements = compile(css);
+  const unrelatedElements = [];
+  let cssBucketName = null;
+  let cssMeta = null;
+  for (const element of elements) {
+    if (element.type === COMMENT) {
+      if (element.value.indexOf("/** @griffel:css-start") === 0) {
+        cssBucketName = element.value.charAt(24);
+        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 = cssMeta ? [cssRule, cssMeta] : cssRule;
+      cssRulesByBucket[cssBucketName].push(bucketEntry);
+      continue;
+    }
+    unrelatedElements.push(element);
+  }
+  return { cssRulesByBucket, remainingCSS: serialize(unrelatedElements, stringify) };
+}
+const styleBucketOrderingMap = styleBucketOrdering.reduce((acc, cur, j) => {
+  acc[cur] = j;
+  return acc;
+}, {});
+function getUniqueRulesFromSets(setOfCSSRules) {
+  const uniqueCSSRules = /* @__PURE__ */ new Map();
+  for (const cssRulesByBucket of setOfCSSRules) {
+    for (const _styleBucketName in cssRulesByBucket) {
+      const styleBucketName = _styleBucketName;
+      for (const bucketEntry of cssRulesByBucket[styleBucketName]) {
+        const [cssRule, meta] = normalizeCSSBucketEntry(bucketEntry);
+        const priority = meta?.["p"] ?? 0;
+        const media = meta?.["m"] ?? "";
+        uniqueCSSRules.set(cssRule, { styleBucketName, cssRule, priority, media });
+      }
+    }
+  }
+  return Array.from(uniqueCSSRules.values());
+}
+function compareCSSRules(a, b, compareMediaQueries) {
+  return compareMediaQueries(a.media, b.media) || styleBucketOrderingMap[a.styleBucketName] - styleBucketOrderingMap[b.styleBucketName] || a.priority - b.priority;
+}
+function sortCSSRules(setOfCSSRules, compareMediaQueries) {
+  const entries = getUniqueRulesFromSets(setOfCSSRules).sort((a, b) => compareCSSRules(a, b, compareMediaQueries));
+  let result = "";
+  for (let i = 0; i < entries.length; i++) {
+    result += entries[i].cssRule;
+  }
+  return result;
+}
+const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10;
+function attachGriffelChunkToAnotherChunk(compilation, griffelChunk, attachToEntryPoint) {
+  const entryPoints = Array.from(compilation.entrypoints.values());
+  if (entryPoints.length === 0) {
+    return;
+  }
+  const searchFn = typeof attachToEntryPoint === "string" ? (chunk) => chunk.name === attachToEntryPoint : attachToEntryPoint;
+  const mainEntryPoint = entryPoints.find(searchFn) ?? entryPoints[0];
+  const targetChunk = mainEntryPoint.getEntrypointChunk();
+  targetChunk.split(griffelChunk);
+}
+function getAssetSourceContents(assetSource) {
+  const source = assetSource.source();
+  if (typeof source === "string") {
+    return source;
+  }
+  return source.toString();
+}
+function isCSSModule(module) {
+  return module.type === "css/mini-extract";
+}
+function isGriffelCSSModule(module) {
+  if (isCSSModule(module)) {
+    if (Buffer.isBuffer(module.content)) {
+      return module.content.indexOf("/** @griffel:css-start") !== -1;
+    }
+  }
+  return false;
+}
+function moveCSSModulesToGriffelChunk(compilation) {
+  let griffelChunk = compilation.namedChunks.get("griffel");
+  if (!griffelChunk) {
+    griffelChunk = compilation.addChunk("griffel");
+  }
+  const matchingChunks = /* @__PURE__ */ new Set();
+  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);
+  }
+}
+class GriffelPlugin {
+  #attachToEntryPoint;
+  #collectStats;
+  #compareMediaQueries;
+  #resolverFactory;
+  #stats = {};
+  constructor(options = {}) {
+    this.#attachToEntryPoint = options.unstable_attachToEntryPoint;
+    this.#collectStats = options.collectStats ?? false;
+    this.#compareMediaQueries = options.compareMediaQueries ?? defaultCompareMediaQueries;
+    this.#resolverFactory = options.resolverFactory ?? createEnhancedResolverFactory();
+  }
+  apply(compiler) {
+    const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, "rspackVersion");
+    const { Compilation, NormalModule } = compiler.webpack;
+    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) => {
+            if (createData.matchResource && createData.matchResource.endsWith(".griffel.css")) {
+              createData.settings.sideEffects = true;
+            }
+          }
+        );
+      });
+    }
+    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) => {
+      const resolveModule = this.#resolverFactory(compilation);
+      if (!IS_RSPACK) {
+        const cssByModuleMap = /* @__PURE__ */ new Map();
+        NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
+          const resourcePath = module.resource;
+          loaderContext[GriffelCssLoaderContextKey] = {
+            resolveModule,
+            registerExtractedCss(css) {
+              cssByModuleMap.set(resourcePath, css);
+            },
+            getExtractedCss() {
+              const css = cssByModuleMap.get(resourcePath) ?? "";
+              cssByModuleMap.delete(resourcePath);
+              return css;
+            },
+            runWithTimer: (cb) => {
+              if (this.#collectStats) {
+                const start = process.hrtime.bigint();
+                const { meta, result } = cb();
+                const end = process.hrtime.bigint();
+                this.#stats[meta.filename] = {
+                  time: end - start,
+                  evaluationMode: meta.evaluationMode
+                };
+                return result;
+              }
+              return cb().result;
+            }
+          };
+        });
+      }
+      if (!compiler.options.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);
+        });
+      }
+      if (this.#attachToEntryPoint) {
+        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);
+          }
+        });
+      }
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
+        },
+        (assets) => {
+          let cssAssetDetails;
+          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));
+        }
+      );
+      compilation.hooks.statsPrinter.tap(
+        {
+          name: PLUGIN_NAME
+        },
+        () => {
+          if (this.#collectStats) {
+            let logTime = function(time) {
+              if (time > 1000000n) {
+                return (time / 1000000n).toString() + "ms";
+              }
+              if (time > 1000n) {
+                return (time / 1000n).toString() + "μs";
+              }
+              return time.toString() + "ns";
+            };
+            const entries = Object.entries(this.#stats).sort(([, a], [, b]) => Number(b.time - a.time));
+            console.log("\nGriffel CSS extraction stats:");
+            console.log("------------------------------------");
+            console.log(
+              "Total time spent in Griffel loader:",
+              logTime(entries.reduce((acc, cur) => acc + cur[1].time, 0n))
+            );
+            console.log(
+              "AST evaluation hit: ",
+              (entries.filter((s) => s[1].evaluationMode === "ast").length / entries.length * 100).toFixed(2) + "%"
+            );
+            console.log("------------------------------------");
+            for (const [filename, info] of entries) {
+              console.log(`  ${logTime(info.time)} - ${filename} (evaluation mode: ${info.evaluationMode})`);
+            }
+            console.log();
+          }
+        }
+      );
+    });
+  }
+}
+const RESOLVE_OPTIONS_DEFAULTS$1 = {
+  conditionNames: ["require"],
+  extensions: [".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx", ".json"]
+};
+function createOxcResolverFactory() {
+  return function(compilation) {
+    const resolverFactory = new ResolverFactory({
+      ...RESOLVE_OPTIONS_DEFAULTS$1
+      // ...resolveOptionsFromWebpackConfig,
+    });
+    return function resolveModule(id, { filename }) {
+      const resolvedResolver = resolverFactory.sync(path.dirname(filename), id);
+      if (resolvedResolver.error) {
+        throw resolvedResolver.error;
+      }
+      if (!resolvedResolver.path) {
+        throw new Error(`oxc-resolver: Failed to resolve module "${id}"`);
+      }
+      return resolvedResolver.path;
+    };
+  };
+}
+function defaultIsFluentPackage(id) {
+  return id.startsWith("@fluentui/");
+}
+const RESOLVE_OPTIONS_DEFAULTS = {
+  conditionNames: ["require"],
+  extensions: [".raw.js", ".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx", ".json"]
+};
+function createFluentOxcResolverFactory(resolveOptions) {
+  const { isFluentPackage = defaultIsFluentPackage, ...restOptions } = resolveOptions ?? {};
+  return function(compilation) {
+    const defaultResolver = new ResolverFactory({
+      ...RESOLVE_OPTIONS_DEFAULTS,
+      ...restOptions
+    });
+    const esmResolver = defaultResolver.cloneWithOptions({
+      conditionNames: ["import", "require"]
+    });
+    return function resolveModule(id, { filename }) {
+      const resolver = isFluentPackage(id) ? esmResolver : defaultResolver;
+      const resolved = resolver.sync(path.dirname(filename), id);
+      if (resolved.error) {
+        throw resolved.error;
+      }
+      if (!resolved.path) {
+        throw new Error(`oxc-resolver: Failed to resolve module "${id}"`);
+      }
+      return resolved.path;
+    };
+  };
+}
+export {
+  GriffelPlugin,
+  createEnhancedResolverFactory,
+  createFluentOxcResolverFactory,
+  createOxcResolverFactory
+};

package/webpackLoader.d.mts

@@ -0,0 +1,7 @@
+import { TransformOptions } from '@griffel/transform';
+import { SupplementedLoaderContext } from './constants.mjs';
+import type * as webpack from 'webpack';
+export type WebpackLoaderOptions = Omit<TransformOptions, 'filename' | 'generateMetadata'>;
+type WebpackLoaderParams = Parameters<webpack.LoaderDefinitionFunction<WebpackLoaderOptions>>;
+declare function webpackLoader(this: SupplementedLoaderContext<WebpackLoaderOptions>, sourceCode: WebpackLoaderParams[0], inputSourceMap: WebpackLoaderParams[1]): void;
+export default webpackLoader;