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

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import webpack from 'webpack';
 import { Options, Rule } from '@stylexjs/babel-plugin';
 
+interface StyleXLoaderOptions {
+    stylexImports: string[];
+    stylexOption: Partial<Options>;
+    nextjsMode: boolean;
+}
+
 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
      *
@@ -22,18 +22,19 @@ interface StyleXPluginOption {
      */
     useCSSLayers?: boolean;
     /**
-     * Enable stylex's unstable_moduleResolution and specify rootDir
+     * Next.js Mode
+     *
+     * @default false
      */
-    rootDir?: string;
+    nextjsMode?: boolean;
 }
 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>;
-    constructor({ stylexImports, useCSSLayers, stylexOption }?: StyleXPluginOption);
+    loaderOption: StyleXLoaderOptions;
+    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode }?: 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,36 +114,47 @@ 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));
             });
         });
     }
     constructor({ stylexImports = [
         'stylex',
         '@stylexjs/stylex'
-    ], useCSSLayers = false, stylexOption = {} } = {}){
+    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false } = {}){
         _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
+            },
+            nextjsMode
         };
-        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
      *
@@ -22,9 +16,11 @@ interface StyleXPluginOption {
      */
     useCSSLayers?: boolean;
     /**
-     * Enable stylex's unstable_moduleResolution and specify rootDir
+     * Next.js Mode
+     *
+     * @default false
      */
-    rootDir?: string;
+    nextjsMode?: boolean;
 }
 
 declare const withStyleX: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;

package/dist/next.js

@@ -30,21 +30,23 @@ const getNextMiniCssExtractPlugin = (isDev)=>{
 };
 // Adopt from Next.js' getGlobalCssLoader
 // https://github.com/vercel/next.js/blob/d61b0761efae09bd9cb1201ff134ed8950d9deca/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
-function getStyleXVirtualCssLoader(options, MiniCssExtractPlugin) {
+function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin) {
     const loaders = [];
     // Adopt from Next.js' getClientStyleLoader
     // https://github.com/vercel/next.js/blob/56d35ede8ed2ab25fa8e29583d4e81e3e76a0e29/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L7
-    if (!options.isServer) {
+    if (!ctx.isServer) {
         // https://github.com/vercel/next.js/blob/56d35ede8ed2ab25fa8e29583d4e81e3e76a0e29/packages/next/src/build/webpack/config/blocks/css/loaders/global.ts#L18
         // https://github.com/vercel/next.js/blob/56d35ede8ed2ab25fa8e29583d4e81e3e76a0e29/packages/next/src/build/webpack/config/blocks/css/loaders/client.ts#L3
         loaders.push({
             loader: MiniCssExtractPlugin.loader,
             options: {
-                publicPath: `${options.assetPrefix}/_next/`,
+                publicPath: `${ctx.assetPrefix}/_next/`,
                 esModule: false
             }
         });
     }
+    // We don't actually need to run postcss-loader or css-loader here
+    // As stylex virtual css won't contain any real css
     return loaders;
 }
 const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
@@ -107,7 +109,9 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                     stylexOption: {
                         ...pluginOptions?.stylexOption,
                         dev: ctx.dev
-                    }
+                    },
+                    // Enforce nextjsMode to true
+                    nextjsMode: true
                 }));
                 return config;
             }

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));
@@ -16,7 +17,7 @@ const isSupplementedLoaderContext = (context)=>{
 const PLUGIN_NAME = 'stylex';
 async function stylexLoader(inputCode, inputSourceMap) {
     const callback = this.async();
-    const { stylexImports, stylexOption } = this.getOptions();
+    const { stylexImports, stylexOption, nextjsMode } = this.getOptions();
     // bail out early if the input doesn't contain stylex imports
     if (!stylexImports.some((importName)=>inputCode.includes(importName))) {
         return callback(null, inputCode, inputSourceMap);
@@ -50,8 +51,23 @@ 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);
+        if (!nextjsMode) {
+            // Normal webpack mode
+            // We generate a virtual css file that looks like it is relative to the source
+            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);
+        }
+        // Next.js App Router doesn't support inline matchResource and inline loaders
+        // So we adapt Next.js' "external" css import approach instead
+        const virtualCssRequest = stringifyRequest(this, `${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.4",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {