@stylexswc/webpack-plugin 0.17.2-dev.1 → 0.18.0-rc.2

package/README.md

@@ -71,19 +71,30 @@ Then import the carrier stylesheet **once** at the entry point of your app (e.g.
 import '@stylexswc/webpack-plugin/stylex.css';
 ```
 
-The plugin replaces this asset's content with the extracted StyleX CSS during
+The plugin appends the extracted StyleX CSS to this asset during
 the build. Like a regular CSS file, it must flow through your CSS pipeline, so a
 `css-loader` + `MiniCssExtractPlugin.loader` rule (or webpack's built-in CSS
 support) has to cover `.css` files.
 
-> [!IMPORTANT] **Migrating from 0.17.x**: version 0.18.0 adopts the upstream
-> [`stylex-webpack`](https://github.com/SukkaW/stylex-webpack) 0.4.x
-> architecture. The CSS is no longer injected through auto-generated
-> `stylex.virtual.css` imports — add the
+The carrier import is a **recommendation, not a hard requirement**. The plugin
+also appends tiny per-module CSS imports to every StyleX module, so any part of
+the bundle that renders a StyleX component pulls the stylesheet in on its own —
+most builds emit correct CSS even without the carrier. What the carrier adds is
+a guarantee that doesn't depend on your module graph: the stylesheet is always
+present and loaded with the entrypoint. That matters when something consumes
+StyleX **output** without rendering a StyleX **component** — plain CSS reading
+`defineVars` custom properties (`var(--x…)`), or injected markup carrying
+StyleX class names. If styles would actually be lost (no CSS asset exists to
+receive them at all), the plugin raises a compilation warning; it stays silent
+as long as the output is correct, carrier or not.
+
+> [!IMPORTANT] **Migrating from 0.17.x**: version 0.18.0 reworks the CSS
+> extraction architecture. The CSS is no longer injected through
+> auto-generated `stylex.virtual.css` imports — add the
 > `import '@stylexswc/webpack-plugin/stylex.css';` carrier import to your app
-> entrypoint, or no StyleX CSS will be emitted. Paths embedded in module
-> identifiers are now relative to `compiler.context`, which changes chunk hashes
-> once and makes builds reproducible across machines.
+> entrypoint (recommended; see above for when you can skip it). Paths embedded
+> in module identifiers are now relative to `compiler.context`, which changes
+> chunk hashes once and makes builds reproducible across machines.
 
 ## Plugin Options
 
@@ -216,9 +227,9 @@ new StylexPlugin({
 import './styles/stylex-carrier.css';
 ```
 
-If styles get extracted but no carrier asset is emitted to receive them (e.g.
-the import is missing), the plugin raises a compilation warning instead of
-silently dropping the CSS.
+If styles get extracted but no CSS asset is emitted to receive them (e.g. a
+custom `cacheGroup` renamed the chunk), the plugin raises a compilation
+warning instead of silently dropping the CSS.
 
 ### Advanced Options
 
@@ -247,10 +258,17 @@ new StylexPlugin({
 
 - Type: `CacheGroupOptions` (webpack cache group configuration)
 - Optional
-- Description: Extends the default webpack cache group used for StyleX CSS
+- Description: Replaces the default webpack cache group used for StyleX CSS
   extraction. By default the plugin creates a dedicated cache group named
-  `_stylex-webpack-generated`. Use this to customize chunk naming, priority, or
-  other split chunks options. Omitted fields retain the required defaults.
+  `_stylex-webpack-generated`. A custom cache group replaces the defaults with
+  standard `splitChunks` semantics — e.g. omitting `test` matches every
+  module, which funnels all extracted CSS into the StyleX chunk. `name` must be
+  a static string and falls back to the default chunk name. String and RegExp
+  shorthand values are treated as `test`. `false` disables the plugin's cache
+  group entirely — extracted styles then have no CSS asset to land in and the
+  build warns; to turn off extraction, use `extractCSS: false` instead.
+  Include `type: 'css/mini-extract'`, `chunks` and `enforce` yourself when you
+  need them.
 
 Default cache group configuration:
 

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export default class StyleXPlugin extends StyleXPluginCore {
     apply(compiler: webpack.Compiler): void;
 }
 export { StyleXPlugin, VIRTUAL_CSS_PATTERN, DEFAULT_STYLEX_PACKAGES, buildVirtualCssPattern };
-export { isAllowlistedPackage } from '@stylexswc/plugin-shared';
 export { stylexLoaderPath as loader, stylexVirtualCssLoaderPath as virtualLoader };
 export type { CacheGroupOptions, RegisterStyleXRules, StyleXPluginOption, } from '@stylexswc/plugin-shared';
 //# 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,EACL,uBAAuB,EAGvB,gBAAgB,EAChB,mBAAmB,EAEnB,sBAAsB,EACtB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAK7D,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,gBAAgB;IACxD,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CA2GjC;AAED,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,CAAC;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,0BAA0B,IAAI,aAAa,EAAE,CAAC;AAEnF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,uBAAuB,EAGvB,gBAAgB,EAChB,mBAAmB,EAEnB,sBAAsB,EACtB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,OAAO,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,iBAAiB,8BAA8B,CAAC;AAK7D,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,gBAAgB;IACxD,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ;CA4GjC;AAED,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,CAAC;AAI9F,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,0BAA0B,IAAI,aAAa,EAAE,CAAC;AAEnF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.virtualLoader = exports.loader = exports.isAllowlistedPackage = exports.buildVirtualCssPattern = exports.DEFAULT_STYLEX_PACKAGES = exports.VIRTUAL_CSS_PATTERN = exports.StyleXPlugin = exports.STYLEX_CHUNK_NAME = void 0;
+exports.virtualLoader = exports.loader = exports.buildVirtualCssPattern = exports.DEFAULT_STYLEX_PACKAGES = exports.VIRTUAL_CSS_PATTERN = exports.StyleXPlugin = exports.STYLEX_CHUNK_NAME = void 0;
 const path_1 = __importDefault(require("path"));
 const plugin_shared_1 = require("@stylexswc/plugin-shared");
 Object.defineProperty(exports, "DEFAULT_STYLEX_PACKAGES", { enumerable: true, get: function () { return plugin_shared_1.DEFAULT_STYLEX_PACKAGES; } });
@@ -33,7 +33,7 @@ class StyleXPlugin extends plugin_shared_1.StyleXPluginCore {
             });
         });
         const { Compilation, NormalModule, sources } = compiler.webpack;
-        const { RawSource } = sources;
+        const { ConcatSource, RawSource } = sources;
         compiler.hooks.make.tap(plugin_shared_1.PLUGIN_NAME, compilation => {
             // Plugin options change the generated CSS without any module changing;
             // mix them into chunk hashes so long-term caching notices.
@@ -90,10 +90,7 @@ class StyleXPlugin extends plugin_shared_1.StyleXPluginCore {
                         ? `import '${this.carrierCss}'`
                         : `import '${PACKAGE_NAME}/stylex.css'`,
                     getNamedChunk: name => compilation.namedChunks.get(name),
-                    createSource: css => new RawSource(css),
-                    updateAsset: (name, source) => compilation.updateAsset(name, () => source, {
-                        minimized: false,
-                    }),
+                    appendCssToAsset: (name, css) => compilation.updateAsset(name, source => new ConcatSource(source, '\n', new RawSource(css)), { minimized: false }),
                     // compilation warnings surface in stats and the dev overlay,
                     // unlike the infrastructure logger
                     warn: message => compilation.warnings.push(new compiler.webpack.WebpackError(`${PACKAGE_NAME}: ${message}`)),
@@ -104,8 +101,6 @@ class StyleXPlugin extends plugin_shared_1.StyleXPluginCore {
 }
 exports.default = StyleXPlugin;
 exports.StyleXPlugin = StyleXPlugin;
-var plugin_shared_2 = require("@stylexswc/plugin-shared");
-Object.defineProperty(exports, "isAllowlistedPackage", { enumerable: true, get: function () { return plugin_shared_2.isAllowlistedPackage; } });
 // Skipped when `module.exports` is an ES module namespace (frozen, cannot be
 // reassigned) — the ESM exports above provide the same surface there
 if (typeof module !== 'undefined' &&

package/dist/stylex.css

@@ -5,6 +5,6 @@
  *
  *   import '@stylexswc/webpack-plugin/stylex.css';
  *
- * During the build the plugin replaces the emitted asset content with the
- * extracted StyleX CSS.
+ * During the build the plugin appends the extracted StyleX CSS to the
+ * emitted asset (other CSS funneled into the chunk is preserved).
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stylexswc/webpack-plugin",
   "description": "StyleX plugin for webpack powered by a Rust NAPI-RS/SWC compiler. Fast StyleX transforms and CSS extraction without Babel.",
-  "version": "0.17.2-dev.1",
+  "version": "0.18.0-rc.2",
   "bugs": "https://github.com/Dwlad90/stylex-swc-plugin/issues",
   "config": {
     "scripty": {
@@ -9,13 +9,13 @@
     }
   },
   "dependencies": {
-    "@stylexswc/plugin-shared": "0.17.2-dev.1"
+    "@stylexswc/plugin-shared": "0.18.0-rc.2"
   },
   "devDependencies": {
     "@stylexjs/babel-plugin": "^0.19.0",
     "@stylexjs/stylex": "^0.19.0",
-    "@stylexswc/eslint-config": "0.17.2-dev.1",
-    "@stylexswc/typescript-config": "0.17.2-dev.1",
+    "@stylexswc/eslint-config": "0.18.0-rc.2",
+    "@stylexswc/typescript-config": "0.18.0-rc.2",
     "@types/node": "^26.1.0",
     "css-loader": "^7.1.2",
     "memfs": "^4.17.0",
@@ -29,11 +29,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./shared": {
-      "types": "./dist/shared.d.ts",
-      "import": "./dist/shared.js",
-      "require": "./dist/shared.js"
-    },
     "./stylex.css": "./dist/stylex.css",
     "./package.json": "./package.json"
   },

package/dist/shared.d.ts

@@ -1,7 +0,0 @@
-/**
- * @deprecated Import from `@stylexswc/plugin-shared` instead. This subpath
- * re-export is kept for backwards compatibility and will be removed in a
- * future release.
- */
-export { isAllowlistedPackage } from '@stylexswc/plugin-shared';
-//# sourceMappingURL=shared.d.ts.map

package/dist/shared.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/shared.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAllowlistedPackage = void 0;
-/**
- * @deprecated Import from `@stylexswc/plugin-shared` instead. This subpath
- * re-export is kept for backwards compatibility and will be removed in a
- * future release.
- */
-var plugin_shared_1 = require("@stylexswc/plugin-shared");
-Object.defineProperty(exports, "isAllowlistedPackage", { enumerable: true, get: function () { return plugin_shared_1.isAllowlistedPackage; } });