@stylexswc/webpack-plugin 0.13.1 → 0.14.0-rc.2

package/README.md

@@ -152,6 +152,37 @@ module.exports = config;
 - Description: Custom CSS transformation function. Since the plugin injects CSS
   after all loaders, use this to apply PostCSS or other CSS transformations.
 
+#### `cacheGroup`
+
+- Type: `CacheGroupOptions` (webpack cache group configuration)
+- Optional
+- Description: Allows overriding the default webpack cache group parameters for StyleX CSS extraction.
+  By default, the plugin creates a dedicated cache group named `stylex` for extracted StyleX CSS.
+  Use this option to customize cache group behavior such as chunk naming, priority, or other split chunks options.
+
+**Default cache group configuration:**
+```javascript
+{
+  name: 'stylex',
+  test: /\.stylex\.virtual\.css$/,
+  type: 'css/mini-extract',
+  chunks: 'all',
+  enforce: true,
+}
+```
+
+**Example - Custom cache group:**
+```javascript
+new StylexPlugin({
+  cacheGroup: {
+    name: 'my-stylex-bundle',
+    chunks: 'initial',
+    priority: 20,
+    enforce: true,
+  },
+})
+```
+
 ### Example Configuration
 
 ```javascript
@@ -176,6 +207,11 @@ module.exports = {
         const result = await postcss([require('autoprefixer')]).process(css);
         return result.css;
       },
+      // Optional: Override cache group settings
+      cacheGroup: {
+        name: 'stylex',
+        priority: 30,
+      },
     }),
   ],
 };

package/dist/index.d.ts

@@ -1,17 +1,18 @@
-import { VIRTUAL_CSS_PATTERN } from './constants';
+import { STYLEX_CHUNK_NAME, VIRTUAL_CSS_PATTERN } from './constants';
 import type webpack from 'webpack';
 import type { Rule as StyleXRule } from '@stylexjs/babel-plugin';
-import type { CSSTransformer, StyleXPluginOption, StyleXWebpackLoaderOptions } from './types';
+import type { CSSTransformer, StyleXPluginOption, StyleXWebpackLoaderOptions, CacheGroupOptions } from './types';
 export type RegisterStyleXRules = (_resourcePath: string, _stylexRules: StyleXRule[]) => void;
 export default class StyleXPlugin {
     stylexRules: Map<string, readonly StyleXRule[]>;
     useCSSLayers: boolean;
     loaderOption: StyleXWebpackLoaderOptions;
+    cacheGroup?: CacheGroupOptions;
     transformCss: CSSTransformer;
     loaderOrder: StyleXPluginOption['loaderOrder'];
-    constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, extractCSS, loaderOrder, }?: StyleXPluginOption);
+    constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, extractCSS, loaderOrder, cacheGroup, }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
-export { VIRTUAL_CSS_PATTERN };
-export type { StyleXPluginOption } from './types';
+export { VIRTUAL_CSS_PATTERN, STYLEX_CHUNK_NAME };
+export type { StyleXPluginOption, CacheGroupOptions } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAE3B,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;AAE9F,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,WAAW,qCAA4C;IACvD,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,0BAA0B,CAAC;IAEzC,YAAY,EAAE,cAAc,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;gBACnC,EACV,aAA8C,EAC9C,YAAoB,EACpB,SAAc,EACd,UAAkB,EAClB,YAAgC,EAChC,UAAiB,EACjB,WAAqB,GACtB,GAAE,kBAAuB;IAoB1B,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CAwKjC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,iBAAiB,EAEjB,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAGrB,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,0BAA0B,EAE1B,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAkBjB,MAAM,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;AAE9F,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,WAAW,qCAA4C;IACvD,YAAY,EAAE,OAAO,CAAC;IAEtB,YAAY,EAAE,0BAA0B,CAAC;IACzC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,YAAY,EAAE,cAAc,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;gBACnC,EACV,aAA8C,EAC9C,YAAoB,EACpB,SAAc,EACd,UAAkB,EAClB,YAAgC,EAChC,UAAiB,EACjB,WAAqB,EACrB,UAAU,GACX,GAAE,kBAAuB;IAqB1B,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CAuKjC;AAED,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,CAAC;AAElD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VIRTUAL_CSS_PATTERN = void 0;
+exports.STYLEX_CHUNK_NAME = exports.VIRTUAL_CSS_PATTERN = void 0;
 const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
 const path_1 = __importDefault(require("path"));
 const constants_1 = require("./constants");
+Object.defineProperty(exports, "STYLEX_CHUNK_NAME", { enumerable: true, get: function () { return constants_1.STYLEX_CHUNK_NAME; } });
 Object.defineProperty(exports, "VIRTUAL_CSS_PATTERN", { enumerable: true, get: function () { return constants_1.VIRTUAL_CSS_PATTERN; } });
 const rs_compiler_1 = require("@stylexswc/rs-compiler");
 const stylexLoaderPath = require.resolve('./stylex-loader');
@@ -24,9 +25,10 @@ class StyleXPlugin {
     stylexRules = new Map();
     useCSSLayers;
     loaderOption;
+    cacheGroup;
     transformCss;
     loaderOrder;
-    constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransfrom, extractCSS = true, loaderOrder = 'first', } = {}) {
+    constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransfrom, extractCSS = true, loaderOrder = 'first', cacheGroup, } = {}) {
         this.useCSSLayers = useCSSLayers;
         this.loaderOption = {
             stylexImports,
@@ -44,6 +46,7 @@ class StyleXPlugin {
         };
         this.transformCss = transformCss;
         this.loaderOrder = loaderOrder;
+        this.cacheGroup = cacheGroup;
     }
     apply(compiler) {
         // If splitChunk is enabled, we create a dedicated chunk for stylex css
@@ -54,7 +57,7 @@ class StyleXPlugin {
             ].join(' '));
         }
         compiler.options.optimization.splitChunks.cacheGroups ??= {};
-        compiler.options.optimization.splitChunks.cacheGroups[constants_1.STYLEX_CHUNK_NAME] = {
+        compiler.options.optimization.splitChunks.cacheGroups[constants_1.STYLEX_CHUNK_NAME] = this.cacheGroup ?? {
             name: constants_1.STYLEX_CHUNK_NAME,
             test: constants_1.VIRTUAL_CSS_PATTERN,
             type: 'css/mini-extract',
@@ -173,3 +176,4 @@ module.exports.default = StyleXPlugin;
 module.exports.loader = stylexLoaderPath;
 module.exports.virtualLoader = stylexVirtualLoaderPath;
 module.exports.VIRTUAL_CSS_PATTERN = constants_1.VIRTUAL_CSS_PATTERN;
+module.exports.STYLEX_CHUNK_NAME = constants_1.STYLEX_CHUNK_NAME;

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import type { StyleXOptions } from '@stylexswc/rs-compiler';
 import type { LoaderContext } from 'webpack';
 import type webpack from 'webpack';
 import type { RegisterStyleXRules } from '.';
+export type CacheGroupOptions = NonNullable<Exclude<Exclude<webpack.Configuration['optimization'], undefined>['splitChunks'], undefined | false>['cacheGroups']>[string];
 type AsyncFnParams = Parameters<ReturnType<LoaderContext<unknown>['async']>>;
 export type InputCode = AsyncFnParams['1'];
 export type SourceMap = AsyncFnParams['2'];
@@ -54,6 +55,16 @@ export interface StyleXPluginOption {
      * @default 'first'
      */
     loaderOrder?: 'first' | 'last';
+    /**
+     * Customizes the cache group configuration for extracted CSS chunks.
+     *
+     * Allows you to override or extend the default webpack `splitChunks.cacheGroups` settings
+     * for CSS generated by StyleX. This can be used to control how CSS is split into separate
+     * files, optimize caching, or group styles according to your application's needs.
+     *
+     * @see https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroups
+     */
+    cacheGroup?: CacheGroupOptions;
 }
 export type StyleXWebpackLoaderOptions = {
     stylexImports: StyleXOptions['importSources'];

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,GAAG,CAAC;AAE7C,KAAK,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,CAC3B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,SAAS,KAC1B,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEhD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;IAC1F,uBAAuB,EAAE;QACvB,mBAAmB,EAAE,mBAAmB,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,GAAG,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,WAAW,CACzC,OAAO,CACL,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC,aAAa,CAAC,EACxE,SAAS,GAAG,KAAK,CAClB,CAAC,aAAa,CAAC,CACjB,CAAC,MAAM,CAAC,CAAC;AAEV,KAAK,aAAa,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,CAC3B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,SAAS,KAC1B,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;AAEhD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC/C;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;CAChC;AACD,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;IAC1F,uBAAuB,EAAE;QACvB,mBAAmB,EAAE,mBAAmB,CAAC;KAC1C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stylexswc/webpack-plugin",
   "description": "StyleX webpack plugin with NAPI-RS compiler",
-  "version": "0.13.1",
+  "version": "0.14.0-rc.2",
   "private": false,
   "license": "MIT",
   "sideEffects": false,
@@ -18,14 +18,14 @@
     }
   },
   "dependencies": {
-    "@stylexjs/babel-plugin": "^0.16.3",
-    "@stylexswc/rs-compiler": "0.13.1",
+    "@stylexjs/babel-plugin": "^0.17.2",
+    "@stylexswc/rs-compiler": "0.14.0-rc.2",
     "loader-utils": "^3.3.1"
   },
   "devDependencies": {
     "@babel/types": "^7.28.5",
-    "@stylexswc/eslint-config": "0.13.1",
-    "@stylexswc/typescript-config": "0.13.1",
+    "@stylexswc/eslint-config": "0.14.0-rc.2",
+    "@stylexswc/typescript-config": "0.14.0-rc.2",
     "@types/babel__core": "^7.20.5",
     "@types/loader-utils": "^3.0.0",
     "@types/node": "^24.10.1",