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

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { Options, Rule } from '@stylexjs/babel-plugin';
 interface StyleXLoaderOptions {
     stylexImports: string[];
     stylexOption: Partial<Options>;
+    nextjsMode: boolean;
 }
 
 interface StyleXPluginOption {
@@ -20,6 +21,12 @@ interface StyleXPluginOption {
      * @default false
      */
     useCSSLayers?: boolean;
+    /**
+     * Next.js Mode
+     *
+     * @default false
+     */
+    nextjsMode?: boolean;
 }
 type RegisterStyleXRules = (resourcePath: string, stylexRules: Rule[]) => void;
 declare class StyleXPlugin {
@@ -27,7 +34,7 @@ declare class StyleXPlugin {
     stylexRules: Map<string, readonly Rule[]>;
     useCSSLayers: boolean;
     loaderOption: StyleXLoaderOptions;
-    constructor({ stylexImports, useCSSLayers, stylexOption }?: StyleXPluginOption);
+    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 

package/dist/index.js

@@ -137,7 +137,7 @@ class StyleXPlugin {
     constructor({ stylexImports = [
         'stylex',
         '@stylexjs/stylex'
-    ], useCSSLayers = false, stylexOption = {} } = {}){
+    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false } = {}){
         _define_property(this, "stylexRules", new Map());
         _define_property(this, "useCSSLayers", void 0);
         _define_property(this, "loaderOption", void 0);
@@ -152,7 +152,8 @@ class StyleXPlugin {
                 treeshakeCompensation: true,
                 importSources: stylexImports,
                 ...stylexOption
-            }
+            },
+            nextjsMode
         };
     }
 }

package/dist/next.d.ts

@@ -15,6 +15,12 @@ interface StyleXPluginOption {
      * @default false
      */
     useCSSLayers?: boolean;
+    /**
+     * Next.js Mode
+     *
+     * @default false
+     */
+    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

@@ -17,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);
@@ -55,10 +55,19 @@ async function stylexLoader(inputCode, inputSourceMap) {
         // Find a better way to register stylex rules to the compiler instance
         this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, 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}`);
+        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.3",
+  "version": "0.1.1-beta.4",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {