@stylexswc/webpack-plugin 0.13.0-rc.9 → 0.13.1-rc.1

package/README.md

@@ -113,6 +113,35 @@ module.exports = config;
 - Default: `true`
 - Description: Controls whether CSS should be extracted into a separate file
 
+#### `loaderOrder`
+
+- Type: `'first' | 'last'`
+- Optional
+- Default: `'first'`
+- Description: Determines when the StyleX transformation is applied relative to other webpack loaders.
+  - `'first'` (recommended): StyleX processes the source code before any other loaders run.
+    Automatically enables `injectStylexSideEffects` to prevent tree-shaking from removing `.stylex` and `.consts` imports.
+  - `'last'`: StyleX processes after all other loaders have completed.
+    Use this if you need other loaders (like TypeScript or SWC plugins) to transform your code before StyleX processing.
+
+  **Why `'first'` is recommended:**
+  When StyleX transforms your code first, imports from `.stylex` and `.consts` files may appear unused to subsequent loaders/bundlers and get removed by tree-shaking. The plugin automatically injects side-effect imports to prevent this issue.
+
+  **Example of the problem:**
+  ```ts
+  // Before transformation
+  import { colors } from './theme.stylex';
+  const styles = stylex.create({
+    root: { backgroundColor: colors.primary }
+  });
+
+  // After StyleX transformation (appears unused to bundler)
+  import { colors } from './theme.stylex';  // ← May be tree-shaken!
+  const styles = { root: { backgroundColor: 'x1a2b3c', $$css: true } };
+  ```
+
+  With `loaderOrder: 'first'`, the plugin automatically preserves these imports by injecting side-effect imports.
+
 ### Advanced Options
 
 #### `transformCss`
@@ -141,6 +170,7 @@ module.exports = {
       stylexImports: ['@stylexjs/stylex', { from: './theme', as: 'tokens' }],
       useCSSLayers: true,
       nextjsMode: false,
+      loaderOrder: 'first', // Process before other loaders (default)
       transformCss: async css => {
         const postcss = require('postcss');
         const result = await postcss([require('autoprefixer')]).process(css);

package/dist/index.d.ts

@@ -8,7 +8,8 @@ export default class StyleXPlugin {
     useCSSLayers: boolean;
     loaderOption: StyleXWebpackLoaderOptions;
     transformCss: CSSTransformer;
-    constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, extractCSS, }?: StyleXPluginOption);
+    loaderOrder: StyleXPluginOption['loaderOrder'];
+    constructor({ stylexImports, useCSSLayers, rsOptions, nextjsMode, transformCss, extractCSS, loaderOrder, }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 export { VIRTUAL_CSS_PATTERN };

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;gBAEjB,EACV,aAA8C,EAC9C,YAAoB,EACpB,SAAc,EACd,UAAkB,EAClB,YAAgC,EAChC,UAAiB,GAClB,GAAE,kBAAuB;IAkB1B,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CAyKjC;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,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"}

package/dist/index.js

@@ -25,7 +25,8 @@ class StyleXPlugin {
     useCSSLayers;
     loaderOption;
     transformCss;
-    constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransfrom, extractCSS = true, } = {}) {
+    loaderOrder;
+    constructor({ stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, nextjsMode = false, transformCss = identityTransfrom, extractCSS = true, loaderOrder = 'first', } = {}) {
         this.useCSSLayers = useCSSLayers;
         this.loaderOption = {
             stylexImports,
@@ -35,12 +36,14 @@ class StyleXPlugin {
                 runtimeInjection: false,
                 treeshakeCompensation: true,
                 importSources: stylexImports,
+                injectStylexSideEffects: loaderOrder !== 'last',
                 ...rsOptions,
             },
             nextjsMode,
             extractCSS,
         };
         this.transformCss = transformCss;
+        this.loaderOrder = loaderOrder;
     }
     apply(compiler) {
         // If splitChunk is enabled, we create a dedicated chunk for stylex css
@@ -91,11 +94,8 @@ class StyleXPlugin {
                             this.stylexRules.set(resourcePath, stylexRules);
                         },
                     };
-                    // We use .unshift() and not .push() like original webpack plugin
-                    // because we want to transpile theme imports first,
-                    // else it will be unused imports, that will be removed by tree shaking,
-                    // and to run other transformations first, e.g. custom SWC plugins.
-                    mod.loaders.unshift({
+                    const insertMethod = this.loaderOrder === 'last' ? 'unshift' : 'push';
+                    mod.loaders[insertMethod]({
                         loader: stylexLoaderPath,
                         options: this.loaderOption,
                         ident: null,

package/dist/stylex-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylex-loader.d.ts","sourceRoot":"","sources":["../src/stylex-loader.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,wBAA8B,YAAY,CACxC,IAAI,EAAE,aAAa,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,EACzE,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,SAAS,iBA8F1B"}
+{"version":3,"file":"stylex-loader.d.ts","sourceRoot":"","sources":["../src/stylex-loader.ts"],"names":[],"mappings":"AACA,OAAoB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C,wBAA8B,YAAY,CACxC,IAAI,EAAE,aAAa,CAAC,uBAAuB,GAAG,0BAA0B,CAAC,EACzE,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,SAAS,iBA0G1B"}

package/dist/stylex-loader.js

@@ -31,6 +31,15 @@ async function stylexLoader(inputCode, inputSourceMap) {
     }
     try {
         const { code, map, metadata } = (0, utils_1.generateStyleXOutput)(this.resourcePath, stringifiedInputCode, rsOptions);
+        let parsedMap = undefined;
+        if (map) {
+            try {
+                parsedMap = typeof map === 'string' ? JSON.parse(map) : map;
+            }
+            catch (error) {
+                logger?.warn(`@stylexswc/webpack-plugin: failed to parse map for resource ${this.resourcePath}: ${error.message}`);
+            }
+        }
         // If metadata.stylex doesn't exist at all, we only need to return the transformed code
         if (!extractCSS ||
             !metadata ||
@@ -39,7 +48,7 @@ async function stylexLoader(inputCode, inputSourceMap) {
             !metadata.stylex.length) {
             if (extractCSS)
                 logger?.debug(`No stylex styles generated from ${this.resourcePath}`);
-            return callback(null, code ?? undefined, map ?? undefined);
+            return callback(null, code, parsedMap);
         }
         logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
         this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
@@ -54,13 +63,13 @@ async function stylexLoader(inputCode, inputSourceMap) {
             const virtualFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', { content: serializedStyleXRules });
             const virtualCssRequest = (0, utils_1.stringifyRequest)(this, `${virtualFileName}!=!${constants_1.VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
             const postfix = `\nimport ${virtualCssRequest};`;
-            return callback(null, code + postfix, map ?? undefined);
+            return callback(null, code + postfix, parsedMap);
         }
         // Next.js App Router doesn't support inline matchResource and inline loaders
         // So we adapt Next.js' "external" css import approach instead
         const virtualCssRequest = (0, utils_1.stringifyRequest)(this, `${constants_1.VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
         const postfix = `\nimport ${virtualCssRequest};`;
-        return callback(null, code + postfix, map ?? undefined);
+        return callback(null, code + postfix, parsedMap);
     }
     catch (error) {
         return callback(error);

package/dist/types.d.ts

@@ -44,6 +44,16 @@ export interface StyleXPluginOption {
      * @default true
      */
     extractCSS?: boolean;
+    /**
+     * Loader execution order
+     *
+     * Determines when the StyleX transformation is applied relative to other webpack loaders:
+     * - 'first': StyleX processes source code before any other loaders (recommended)
+     * - 'last': StyleX processes after all other loaders have run
+     *
+     * @default 'first'
+     */
+    loaderOrder?: 'first' | 'last';
 }
 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;CACtB;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,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"}

package/package.json

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