stylex-webpack 0.1.1-beta.2 → 0.1.1-beta.3

package/dist/index.d.ts

@@ -1,14 +1,13 @@
 import webpack from 'webpack';
 import { Options, Rule } from '@stylexjs/babel-plugin';
 
+interface StyleXLoaderOptions {
+    stylexImports: string[];
+    stylexOption: Partial<Options>;
+}
+
 interface StyleXPluginOption {
     stylexOption?: Partial<Options>;
-    /**
-     * Specify where to inject the StyleX generated CSS
-     *
-     * @default (filename) => filename.endsWith('stylex.css')
-     */
-    appendTo?: (assetPath: string) => boolean;
     /**
      * Specify where stylex will be imported from
      *
@@ -21,18 +20,13 @@ interface StyleXPluginOption {
      * @default false
      */
     useCSSLayers?: boolean;
-    /**
-     * Enable stylex's unstable_moduleResolution and specify rootDir
-     */
-    rootDir?: string;
 }
 type RegisterStyleXRules = (resourcePath: string, stylexRules: Rule[]) => void;
 declare class StyleXPlugin {
     static stylexLoader: string;
     stylexRules: Map<string, readonly Rule[]>;
-    readonly stylexImports: string[];
     useCSSLayers: boolean;
-    stylexOption: Partial<Options>;
+    loaderOption: StyleXLoaderOptions;
     constructor({ stylexImports, useCSSLayers, stylexOption }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }

package/dist/index.js

@@ -6,6 +6,7 @@ var path = require('path');
 const PLUGIN_NAME = 'stylex';
 const VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
 const VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+const STYLEX_CHUNK_NAME = '_stylex-webpack-generated';
 // Webpack does not export these constants
 // https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/OptimizationStages.js#L8
 const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10;
@@ -45,6 +46,7 @@ class StyleXPlugin {
         // stylex-loader adds virtual css import (which triggers virtual-loader)
         // This prevents "stylex.virtual.css" files from being tree shaken by forcing
         // "sideEffects" setting.
+        // TODO-RSPACK: rspack does support normalModuleFactory, we need to test this out
         compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf)=>{
             nmf.hooks.createModule.tap(PLUGIN_NAME, (createData)=>{
                 const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
@@ -56,7 +58,7 @@ class StyleXPlugin {
             });
         });
         const { Compilation, NormalModule, sources } = compiler.webpack;
-        const { ConcatSource, RawSource } = sources;
+        const { RawSource } = sources;
         // Apply loader to JS modules
         compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
             NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, mod)=>{
@@ -73,10 +75,7 @@ class StyleXPlugin {
                     // our loader before anything else.
                     mod.loaders.push({
                         loader: stylexLoaderPath,
-                        options: {
-                            stylexImports: this.stylexImports,
-                            stylexOption: this.stylexOption
-                        },
+                        options: this.loaderOption,
                         ident: null,
                         type: null
                     });
@@ -88,7 +87,9 @@ class StyleXPlugin {
                 name: PLUGIN_NAME,
                 stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED
             }, ()=>{
-                const stylexChunk = compilation.namedChunks.get('stylex') || compilation.addChunk('stylex');
+                // TODO-RSPACK: rspack doesn't support manually manipulating chunks
+                // Find a way to do this in rspack
+                const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME) || compilation.addChunk(STYLEX_CHUNK_NAME);
                 const matchingChunks = new Set();
                 let moduleIndex = 0;
                 for (const module of compilation.modules){
@@ -113,14 +114,23 @@ class StyleXPlugin {
                 name: PLUGIN_NAME,
                 stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
             }, (assets)=>{
-                const cssFileName = Object.keys(assets).find((filename)=>filename.endsWith('stylex.css'));
-                if (cssFileName) {
-                    const cssAsset = assets[cssFileName];
-                    const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
-                    if (stylexCSS != null) {
-                        assets[cssFileName] = new ConcatSource(cssAsset, new RawSource(stylexCSS));
-                    }
+                // on previous step, we create a "stylex" chunk to hold all virtual stylex css
+                // the chunk contains all css chunks generated by mini-css-extract-plugin
+                // TODO-RSPACK: once again, rspack doesn't have this
+                const stylexChunk = compilation.namedChunks.get(STYLEX_CHUNK_NAME);
+                if (stylexChunk == null) {
+                    return;
+                }
+                // Let's find the css file that belongs to the stylex chunk
+                const cssAssetDetails = Object.entries(assets).find(([assetName])=>stylexChunk.files.has(assetName));
+                if (!cssAssetDetails) {
+                    return;
+                }
+                const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
+                if (stylexCSS == null) {
+                    return;
                 }
+                compilation.updateAsset(cssAssetDetails[0], new RawSource(stylexCSS));
             });
         });
     }
@@ -129,20 +139,21 @@ class StyleXPlugin {
         '@stylexjs/stylex'
     ], useCSSLayers = false, stylexOption = {} } = {}){
         _define_property(this, "stylexRules", new Map());
-        _define_property(this, "stylexImports", []);
         _define_property(this, "useCSSLayers", void 0);
-        _define_property(this, "stylexOption", void 0);
+        _define_property(this, "loaderOption", void 0);
         this.useCSSLayers = useCSSLayers;
-        this.stylexOption = {
-            dev: process.env.NODE_ENV === 'development',
-            useRemForFontSize: true,
-            runtimeInjection: false,
-            genConditionalClasses: true,
-            treeshakeCompensation: true,
-            importSources: stylexImports,
-            ...stylexOption
+        this.loaderOption = {
+            stylexImports,
+            stylexOption: {
+                dev: process.env.NODE_ENV === 'development',
+                useRemForFontSize: true,
+                runtimeInjection: false,
+                genConditionalClasses: true,
+                treeshakeCompensation: true,
+                importSources: stylexImports,
+                ...stylexOption
+            }
         };
-        this.stylexImports = stylexImports;
     }
 }
 _define_property(StyleXPlugin, "stylexLoader", stylexLoaderPath);

package/dist/next.d.ts

@@ -3,12 +3,6 @@ import { Options } from '@stylexjs/babel-plugin';
 
 interface StyleXPluginOption {
     stylexOption?: Partial<Options>;
-    /**
-     * Specify where to inject the StyleX generated CSS
-     *
-     * @default (filename) => filename.endsWith('stylex.css')
-     */
-    appendTo?: (assetPath: string) => boolean;
     /**
      * Specify where stylex will be imported from
      *
@@ -21,10 +15,6 @@ interface StyleXPluginOption {
      * @default false
      */
     useCSSLayers?: boolean;
-    /**
-     * Enable stylex's unstable_moduleResolution and specify rootDir
-     */
-    rootDir?: string;
 }
 
 declare const withStyleX: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;

package/dist/stylex-loader.js

@@ -2,6 +2,7 @@
 
 var core = require('@babel/core');
 var stylexBabelPlugin = require('@stylexjs/babel-plugin');
+var loaderUtils = require('loader-utils');
 
 function stringifyRequest(loaderContext, request) {
     return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
@@ -50,8 +51,14 @@ async function stylexLoader(inputCode, inputSourceMap) {
         }
         // this.stylexRules[filename] = metadata.stylex;
         logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
+        // TODO: rspack doesn't support custom loader context
+        // Find a better way to register stylex rules to the compiler instance
         this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
-        const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${JSON.stringify(metadata.stylex)}`);
+        const serializedStyleXRules = JSON.stringify(metadata.stylex);
+        const virtualFileName = loaderUtils.interpolateName(this, '[path][name].[hash:base64:8].stylex.virtual.css', {
+            content: serializedStyleXRules
+        });
+        const virtualCssRequest = stringifyRequest(this, `${virtualFileName}!=!${VIRTUAL_CSS_PATH}?${serializedStyleXRules}`);
         const postfix = `\nimport ${virtualCssRequest};`;
         return callback(null, code + postfix, map ?? undefined);
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.1.1-beta.2",
+  "version": "0.1.1-beta.3",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {