@griffel/webpack-plugin 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @griffel/webpack-plugin
 
-This log was last generated on Fri, 06 Mar 2026 15:54:55 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:54:55 GMT
+Fri, 06 Mar 2026 15:56:28 GMT
 
 ### Major 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/package.json

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

package/resolver/createResolverFactory.d.mts

@@ -1,2 +1,4 @@
-import { TransformResolverFactory } from './types.mjs';
+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

@@ -7,22 +7,22 @@ function isCJSOnlyPackage(id) {
   return id === "tslib" || id.startsWith("@babel/runtime") || id.startsWith("@swc/helpers");
 }
 const RESOLVE_OPTIONS_DEFAULTS = {
-  conditionNames: ["import", "require"],
+  conditionNames: ["require"],
   extensions: [".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx", ".json"]
 };
 function createResolverFactory() {
   return function(compilation) {
-    const defaultResolver = new ResolverFactory({
+    const cjsResolver = new ResolverFactory({
       ...RESOLVE_OPTIONS_DEFAULTS
       // ...resolveOptionsFromWebpackConfig,
     });
-    const cjsResolver = defaultResolver.cloneWithOptions({
-      conditionNames: ["require"],
-      extensions: RESOLVE_OPTIONS_DEFAULTS.extensions,
+    const esmResolver = cjsResolver.cloneWithOptions({
+      ...RESOLVE_OPTIONS_DEFAULTS,
+      conditionNames: ["import"],
       mainFields: ["module", "main"]
     });
     return function resolveModule(id, { filename }) {
-      const resolver = isCJSOnlyPackage(id) ? cjsResolver : defaultResolver;
+      const resolver = isCJSOnlyPackage(id) ? cjsResolver : esmResolver;
       const resolved = resolver.sync(path.dirname(filename), id);
       if (resolved.error) {
         throw resolved.error;
@@ -30,7 +30,10 @@ function createResolverFactory() {
       if (!resolved.path) {
         throw new Error(`oxc-resolver: Failed to resolve module "${id}"`);
       }
-      return resolved.path;
+      return {
+        path: resolved.path,
+        builtin: !!resolved.builtin
+      };
     };
   };
 }
@@ -152,12 +155,15 @@ 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 ?? createResolverFactory();
   }
@@ -196,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);
@@ -206,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;
             }
           };
         });
@@ -290,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) {
@@ -306,6 +332,22 @@ 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();
+          }
         }
       );
     });

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/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;