@griffel/webpack-plugin 1.1.0 → 3.0.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # 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.
+This log was last generated on Wed, 11 Mar 2026 13:31:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.0.0
+
+Wed, 11 Mar 2026 13:31:20 GMT
+
+### Major changes
+
+- BREAKING: Remove babelOptions from WebpackLoaderOptions. Uses @griffel/transform-shaker instead of @linaria/shaker. (olfedias@microsoft.com)
+- Bump @griffel/transform to v2.0.0
+
+### Patches
+
+- fix: make CJS the default resolver, ESM the clone (olfedias@microsoft.com)
+- feat: add collectPerfIssues option to report CJS modules and barrel re-exports (olfedias@microsoft.com)
+
+## 2.0.0
+
+Fri, 06 Mar 2026 15:56:28 GMT
+
+### Major changes
+
+- BREAKING: consolidate resolvers into ESM-first createResolverFactory, remove enhanced-resolve dependency (olfedias@microsoft.com)
+- Bump @griffel/transform to v1.2.1
+- Bump @griffel/core to v1.20.1
+
 ## 1.1.0
 
-Fri, 06 Mar 2026 08:15:28 GMT
+Fri, 06 Mar 2026 08:17:05 GMT
 
 ### Minor changes
 

package/GriffelPlugin.d.mts

@@ -1,9 +1,10 @@
 import { GriffelRenderer } from '@griffel/core';
 import { Compilation, Compiler } from 'webpack';
-import { TransformResolverFactory } from './resolver/types.mjs';
+import { TransformResolverFactory } from './resolver/createResolverFactory.mjs';
 type EntryPoint = Compilation['entrypoints'] extends Map<unknown, infer I> ? I : never;
 export type GriffelCSSExtractionPluginOptions = {
     collectStats?: boolean;
+    collectPerfIssues?: boolean;
     compareMediaQueries?: GriffelRenderer['compareMediaQueries'];
     /** Allows to override resolver used to resolve imports inside evaluated modules. */
     resolverFactory?: TransformResolverFactory;

package/constants.d.mts

@@ -1,8 +1,9 @@
 import { LoaderContext } from 'webpack';
-import { TransformResolver } from './resolver/types.mjs';
+import { TransformResolver, TransformPerfIssue } from '@griffel/transform';
 export declare const PLUGIN_NAME = "GriffelExtractPlugin";
 export declare const GriffelCssLoaderContextKey: unique symbol;
 export interface GriffelLoaderContextSupplement {
+    collectPerfIssues: boolean;
     resolveModule: TransformResolver;
     registerExtractedCss(css: string): void;
     getExtractedCss(): string;
@@ -12,6 +13,7 @@ export interface GriffelLoaderContextSupplement {
             filename: string;
             step: 'transform';
             evaluationMode: 'ast' | 'vm';
+            perfIssues?: TransformPerfIssue[];
         };
     }): T;
 }

package/index.d.mts

@@ -1,4 +1,2 @@
 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';
+export { createResolverFactory } from './resolver/createResolverFactory.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/webpack-plugin",
-  "version": "1.1.0",
+  "version": "3.0.0",
   "description": "Webpack plugin that performs CSS extraction for Griffel",
   "license": "MIT",
   "repository": {
@@ -20,9 +20,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@griffel/transform": "^1.2.0",
-    "@griffel/core": "^1.20.0",
-    "enhanced-resolve": "^5.15.0",
+    "@griffel/core": "^1.20.1",
+    "@griffel/transform": "^2.0.0",
     "oxc-resolver": "^11.19.1",
     "stylis": "^4.2.0"
   },

package/resolver/createResolverFactory.d.mts

@@ -0,0 +1,4 @@
+import { TransformResolver } from '@griffel/transform';
+import { Compilation } from 'webpack';
+export type TransformResolverFactory = (compilation: Compilation) => TransformResolver;
+export declare function createResolverFactory(): TransformResolverFactory;

package/webpack-loader.js

@@ -1,4 +1,4 @@
-import { ASSET_TAG_OPEN, ASSET_TAG_CLOSE, EvalCache, Module, transformSync } from "@griffel/transform";
+import { ASSET_TAG_OPEN, ASSET_TAG_CLOSE, EvalCache, transformSync } from "@griffel/transform";
 import * as path from "node:path";
 import { G as GriffelCssLoaderContextKey } from "./constants-aY3k4vvW.js";
 import { normalizeCSSBucketEntry } from "@griffel/core";
@@ -86,36 +86,34 @@ function webpackLoader(sourceCode, inputSourceMap) {
       throw new Error("GriffelCSSExtractionPlugin is not configured, please check your webpack config");
     }
   }
-  const { classNameHashSalt, modules, evaluationRules, babelOptions } = this.getOptions();
+  const { classNameHashSalt, modules, evaluationRules } = 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,
+        resolveModule: (id, params) => {
+          const resolved = this[GriffelCssLoaderContextKey].resolveModule(id, params);
+          this.addDependency(resolved.path);
+          return resolved;
+        },
         classNameHashSalt,
         modules,
         evaluationRules,
-        babelOptions
+        collectPerfIssues: this[GriffelCssLoaderContextKey]?.collectPerfIssues
       });
     } catch (err) {
       error = err;
-    } finally {
-      Module._resolveFilename = originalResolveFilename;
     }
     if (result) {
-      const { code, cssRulesByBucket, usedVMForEvaluation } = result;
+      const { code, cssRulesByBucket, usedVMForEvaluation, perfIssues } = result;
       const meta = {
         filename: this.resourcePath,
         step: "transform",
-        evaluationMode: usedVMForEvaluation ? "vm" : "ast"
+        evaluationMode: usedVMForEvaluation ? "vm" : "ast",
+        perfIssues
       };
       if (cssRulesByBucket) {
         const resolvedCssRulesByBucket = resolveAssetPathsInCSSRules(cssRulesByBucket, this.resourcePath);

package/webpack-plugin.js

@@ -1,33 +1,39 @@
 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 { ResolverFactory } from "oxc-resolver";
 import * as path from "node:path";
 import { compile, COMMENT, serialize, stringify } from "stylis";
-import { ResolverFactory } from "oxc-resolver";
-const RESOLVE_OPTIONS_DEFAULTS$2 = {
+function isCJSOnlyPackage(id) {
+  return id === "tslib" || id.startsWith("@babel/runtime") || id.startsWith("@swc/helpers");
+}
+const RESOLVE_OPTIONS_DEFAULTS = {
   conditionNames: ["require"],
   extensions: [".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx", ".json"]
 };
-function createEnhancedResolverFactory(resolveOptions = {}) {
-  const { inheritResolveOptions = ["alias", "modules", "plugins"], webpackResolveOptions } = resolveOptions;
+function createResolverFactory() {
   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
+    const cjsResolver = new ResolverFactory({
+      ...RESOLVE_OPTIONS_DEFAULTS
+      // ...resolveOptionsFromWebpackConfig,
+    });
+    const esmResolver = cjsResolver.cloneWithOptions({
+      ...RESOLVE_OPTIONS_DEFAULTS,
+      conditionNames: ["import"],
+      mainFields: ["module", "main"]
     });
     return function resolveModule(id, { filename }) {
-      const resolvedPath = resolveSync(path.dirname(filename), id);
-      if (!resolvedPath) {
-        throw new Error(`enhanced-resolve: Failed to resolve module "${id}"`);
+      const resolver = isCJSOnlyPackage(id) ? cjsResolver : esmResolver;
+      const resolved = resolver.sync(path.dirname(filename), id);
+      if (resolved.error) {
+        throw resolved.error;
       }
-      return resolvedPath;
+      if (!resolved.path) {
+        throw new Error(`oxc-resolver: Failed to resolve module "${id}"`);
+      }
+      return {
+        path: resolved.path,
+        builtin: !!resolved.builtin
+      };
     };
   };
 }
@@ -149,14 +155,17 @@ function moveCSSModulesToGriffelChunk(compilation) {
 class GriffelPlugin {
   #attachToEntryPoint;
   #collectStats;
+  #collectPerfIssues;
   #compareMediaQueries;
   #resolverFactory;
   #stats = {};
+  #perfIssues = /* @__PURE__ */ new Map();
   constructor(options = {}) {
     this.#attachToEntryPoint = options.unstable_attachToEntryPoint;
     this.#collectStats = options.collectStats ?? false;
+    this.#collectPerfIssues = options.collectPerfIssues ?? false;
     this.#compareMediaQueries = options.compareMediaQueries ?? defaultCompareMediaQueries;
-    this.#resolverFactory = options.resolverFactory ?? createEnhancedResolverFactory();
+    this.#resolverFactory = options.resolverFactory ?? createResolverFactory();
   }
   apply(compiler) {
     const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, "rspackVersion");
@@ -193,6 +202,7 @@ class GriffelPlugin {
         NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
           const resourcePath = module.resource;
           loaderContext[GriffelCssLoaderContextKey] = {
+            collectPerfIssues: this.#collectPerfIssues,
             resolveModule,
             registerExtractedCss(css) {
               cssByModuleMap.set(resourcePath, css);
@@ -203,17 +213,34 @@ class GriffelPlugin {
               return css;
             },
             runWithTimer: (cb) => {
+              if (!this.#collectStats && !this.#collectPerfIssues) {
+                return cb().result;
+              }
+              const start = this.#collectStats ? process.hrtime.bigint() : 0n;
+              const { meta, result } = 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 (this.#collectPerfIssues && meta.perfIssues) {
+                for (const issue of meta.perfIssues) {
+                  const key = `${issue.type}:${issue.dependencyFilename}`;
+                  const existing = this.#perfIssues.get(key);
+                  if (existing) {
+                    existing.sourceFilenames.add(meta.filename);
+                  } else {
+                    this.#perfIssues.set(key, {
+                      type: issue.type,
+                      dependencyFilename: issue.dependencyFilename,
+                      sourceFilenames: /* @__PURE__ */ new Set([meta.filename])
+                    });
+                  }
+                }
+              }
+              return result;
             }
           };
         });
@@ -287,15 +314,17 @@ class GriffelPlugin {
               return time.toString() + "ns";
             };
             const entries = Object.entries(this.#stats).sort(([, a], [, b]) => Number(b.time - a.time));
+            const totalTime = entries.reduce((acc, cur) => acc + cur[1].time, 0n);
+            const fileCount = entries.length;
+            const avgTime = fileCount > 0 ? totalTime / BigInt(fileCount) : 0n;
             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("Total time spent in Griffel loader:", logTime(totalTime));
+            console.log("Files processed:", fileCount);
+            console.log("Average time per file:", logTime(avgTime));
             console.log(
               "AST evaluation hit: ",
-              (entries.filter((s) => s[1].evaluationMode === "ast").length / entries.length * 100).toFixed(2) + "%"
+              (entries.filter((s) => s[1].evaluationMode === "ast").length / fileCount * 100).toFixed(2) + "%"
             );
             console.log("------------------------------------");
             for (const [filename, info] of entries) {
@@ -303,66 +332,28 @@ class GriffelPlugin {
             }
             console.log();
           }
+          if (this.#collectPerfIssues && this.#perfIssues.size > 0) {
+            const issues = Array.from(this.#perfIssues.values());
+            const cjsCount = issues.filter((i) => i.type === "cjs-module").length;
+            const barrelCount = issues.filter((i) => i.type === "barrel-export-star").length;
+            console.log("\nGriffel performance issues:");
+            console.log("------------------------------------");
+            console.log(`CJS modules (no tree-shaking): ${cjsCount}`);
+            console.log(`Barrel files with remaining export *: ${barrelCount}`);
+            console.log("------------------------------------");
+            for (const issue of issues) {
+              const tag = issue.type === "cjs-module" ? "cjs" : "barrel";
+              const sources = Array.from(issue.sourceFilenames).join(", ");
+              console.log(`  [${tag}] ${issue.dependencyFilename} (source: ${sources})`);
+            }
+            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
+  createResolverFactory
 };

package/webpackLoader.d.mts

@@ -1,7 +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'>;
+export type WebpackLoaderOptions = Omit<TransformOptions, 'filename' | 'generateMetadata' | 'resolveModule'>;
 type WebpackLoaderParams = Parameters<webpack.LoaderDefinitionFunction<WebpackLoaderOptions>>;
 declare function webpackLoader(this: SupplementedLoaderContext<WebpackLoaderOptions>, sourceCode: WebpackLoaderParams[0], inputSourceMap: WebpackLoaderParams[1]): void;
 export default webpackLoader;

package/resolver/createEnhancedResolverFactory.d.mts

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/resolver/types.d.mts

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