stylex-webpack 0.4.0 → 0.4.2

package/dist/index.js

@@ -4,13 +4,16 @@ var stylexBabelPlugin = require('@stylexjs/babel-plugin');
 var path = require('node:path');
 var process = require('node:process');
 var VirtualModulesPlugin = require('webpack-virtual-modules');
+var identity = require('foxts/identity');
+
+var version = "0.4.2";
 
 const PLUGIN_NAME = 'stylex';
 const VIRTUAL_ENTRYPOINT_CSS_PATH = require.resolve('./stylex.css');
 const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
 const STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
-require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
-const FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN = /stylex\.fuck-nextjs\.virtual-carrier\.js/;
+require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
+const FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN = /stylex\.fuck-nextjs\.virtual-carrier\.css/;
 const FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME = '_stylex-fuck-nextjs-collect-stylex-rules';
 const INCLUDE_REGEXP = /\.[cm]?[jt]sx?$/;
 
@@ -37,7 +40,6 @@ function getStyleXRules(stylexRules, useCSSLayers) {
     const allRules = Array.from(stylexRules.values()).flat();
     return stylexBabelPlugin.processStylexRules(allRules, useCSSLayers);
 }
-const identityTransfrom = (css)=>css;
 class StyleXPlugin {
     apply(compiler) {
         var _compiler_options_optimization_splitChunks;
@@ -61,6 +63,7 @@ class StyleXPlugin {
             compiler.options.optimization.splitChunks.cacheGroups[FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME] = {
                 name: FUCK_NEXTJS_VIRTUAL_CARRIERCHUNK_NAME,
                 test: FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN,
+                type: 'css/mini-extract',
                 chunks: 'all',
                 enforce: true
             };
@@ -80,10 +83,16 @@ class StyleXPlugin {
                 }
             });
         });
-        const { Compilation, NormalModule } = compiler.webpack;
-        // const { RawSource } = sources;
+        const { Compilation, NormalModule, sources } = compiler.webpack;
+        const { RawSource } = sources;
+        const meta = JSON.stringify({
+            name: 'stylex-webpack',
+            packageVersion: version,
+            opt: this.loaderOption
+        });
         // Apply loader to JS modules
         compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
+            compilation.hooks.chunkHash.tap(PLUGIN_NAME, (_, hash)=>hash.update(meta));
             NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, mod)=>{
                 const extname = path.extname(mod.matchResource || mod.resource);
                 if (this.loaderOption.nextjsMode && FUCK_NEXTJS_VIRTUAL_CARRIER_PATTERN.test(mod.matchResource || mod.resource)) {
@@ -114,7 +123,7 @@ class StyleXPlugin {
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
-            }, async (_)=>{
+            }, async (assets)=>{
                 if (this.loaderOption.nextjsMode) {
                     // Collect stylex rules from module instead of self maintained map
                     // on previous step, we create a "stylex" chunk to hold all virtual stylex css
@@ -125,7 +134,6 @@ class StyleXPlugin {
                         const cssModulesInFuckNextjsChunk = compilation.chunkGraph.getChunkModulesIterableBySourceType(fuckNextjsChunk, 'css/mini-extract');
                         // we only re-collect stylex rules if we can found css in the stylex chunk
                         if (cssModulesInFuckNextjsChunk) {
-                            this.stylexRules.clear();
                             for (const cssModule of cssModulesInFuckNextjsChunk){
                                 if (!('_identifier' in cssModule) || typeof cssModule._identifier !== 'string') {
                                     continue;
@@ -142,6 +150,13 @@ class StyleXPlugin {
                                 }
                             }
                         }
+                        // Let's find the css file that belongs to the fuck-next.js chunk to remove it
+                        const fuckNextjsChunkCssAssetNames = Object.keys(assets).filter((assetName)=>fuckNextjsChunk.files.has(assetName) && assetName.endsWith('.css'));
+                        if (fuckNextjsChunkCssAssetNames.length > 0) {
+                            for (const assetName of fuckNextjsChunkCssAssetNames){
+                                compilation.deleteAsset(assetName);
+                            }
+                        }
                     }
                 }
                 const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
@@ -149,17 +164,35 @@ class StyleXPlugin {
                     return;
                 }
                 const finalCss = await this.transformCss(stylexCSS);
-                /**
-           * Now we write final CSS to virtual module, which acts like `stylex-webpack/stylex.css` has been
-           * updated locally on the disk, and Next.js and webpack will have no choice but to update the global css
-           */ this._virtualModuleInstance.writeModule(VIRTUAL_ENTRYPOINT_CSS_PATH, finalCss.toString());
+                if (compiler.options.mode === 'development') {
+                    // In development mode, a.k.a. HMR
+                    /**
+             * Now we write final CSS to virtual module, which acts like `stylex-webpack/stylex.css` has been
+             * updated locally on the disk, and Next.js and webpack will have no choice but to update the global css
+             */ this._virtualModuleInstance.writeModule(VIRTUAL_ENTRYPOINT_CSS_PATH, finalCss.toString());
+                } else {
+                    const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
+                    if (!stylexChunk) return;
+                    // Let's find the css file that belongs to the stylex chunk
+                    const stylexChunkCssAssetNames = Object.keys(assets).filter((assetName)=>stylexChunk.files.has(assetName) && assetName.endsWith('.css'));
+                    if (stylexChunkCssAssetNames.length === 0) {
+                        return;
+                    }
+                    if (stylexChunkCssAssetNames.length > 1) {
+                        console.warn('[stylex-webpack] Multiple CSS assets found for the stylex chunk. This should not happen. Please report this issue.');
+                    }
+                    const stylexAssetName = stylexChunkCssAssetNames[0];
+                    compilation.updateAsset(stylexAssetName, ()=>new RawSource(finalCss), {
+                        minimized: false
+                    });
+                }
             });
         });
     }
     constructor({ stylexImports = [
         'stylex',
         '@stylexjs/stylex'
-    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false, transformCss = identityTransfrom } = {}){
+    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false, transformCss = identity.identity } = {}){
         _define_property(this, "stylexRules", new Map());
         _define_property(this, "useCSSLayers", void 0);
         _define_property(this, "loaderOption", void 0);

package/dist/next.js

@@ -8,7 +8,7 @@ var index = require('./index');
 
 require.resolve('./stylex.css');
 const VIRTUAL_ENTRYPOINT_CSS_PATTERN = /stylex\.css/;
-require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
+require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
 
 /** Next.js' precompilation add "__esModule: true", but doesn't add an actual default exports */ // @ts-expect-error -- Next.js fucks something up
 const NextMiniCssExtractPlugin = nextMiniCssExtractPluginExports.default;

package/dist/stylex-fuck-nextjs-virtual-carrier-loader.js

@@ -17,7 +17,7 @@ function stylexFuckNextjsVirtualCarrierLoader(inputCode, inputSourceMap) {
         const hash = loaderUtils.getHashDigest(stylex, 'xxhash64', 'base62', 32);
         const code = tsDedent.dedent`
       /** stylex rules: ${stylex} */
-      export default ${JSON.stringify('stylex-webpack-fuck-nextjs-' + hash)};
+      .stylex-fuck-nextjs-${hash} {}
     `;
         callback(null, inputCode + '\n' + code);
     } catch (e) {

package/dist/stylex-loader.js

@@ -4,7 +4,7 @@ var core = require('@babel/core');
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
 
 require.resolve('./stylex.css');
-const FUCK_NEXTJS_VIRTUAL_CARRIER_PATH = require.resolve('./stylex.fuck-nextjs.virtual-carrier.js');
+const FUCK_NEXTJS_VIRTUAL_CARRIER_PATH = require.resolve('./stylex.fuck-nextjs.virtual-carrier.css');
 function isSupplementedLoaderContext(context) {
     // eslint-disable-next-line prefer-object-has-own -- target older
     return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@eslint-sukka/node": "^6.23.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@swc-node/register": "^1.11.1",
     "@swc/core": "^1.13.5",
     "@types/babel__core": "^7.20.5",