stylex-webpack 0.2.1-beta.0 → 0.2.1-beta.2

package/dist/index.d.ts

@@ -7,6 +7,7 @@ interface StyleXLoaderOptions {
     nextjsMode: boolean;
 }
 
+type CSSTransformer = (css: string) => string | Buffer | Promise<string | Buffer>;
 interface StyleXPluginOption {
     stylexOption?: Partial<Options>;
     /**
@@ -27,6 +28,13 @@ interface StyleXPluginOption {
      * @default false
      */
     nextjsMode?: boolean;
+    /**
+     * Enable other CSS transformation
+     *
+     * Since stylex-webpack only inject CSS after all loaders, you can not use postcss-loader.
+     * With this you can incovate `postcss()` here.
+     */
+    transformCss?: CSSTransformer;
 }
 type RegisterStyleXRules = (resourcePath: string, stylexRules: Rule[]) => void;
 declare class StyleXPlugin {
@@ -34,7 +42,8 @@ declare class StyleXPlugin {
     stylexRules: Map<string, readonly Rule[]>;
     useCSSLayers: boolean;
     loaderOption: StyleXLoaderOptions;
-    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode }?: StyleXPluginOption);
+    transformCss: CSSTransformer;
+    constructor({ stylexImports, useCSSLayers, stylexOption, nextjsMode, transformCss }?: StyleXPluginOption);
     apply(compiler: webpack.Compiler): void;
 }
 

package/dist/index.js

@@ -30,6 +30,7 @@ const 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;
@@ -87,10 +88,10 @@ class StyleXPlugin {
                     });
                 }
             });
-            compilation.hooks.processAssets.tap({
+            compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
-            }, (assets)=>{
+            }, async (assets)=>{
                 // 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
@@ -109,7 +110,7 @@ class StyleXPlugin {
                             if (!stringifiedStylexRule) {
                                 continue;
                             }
-                            this.stylexRules.set(cssModule.identifier(), JSON.parse(stringifiedStylexRule));
+                            this.stylexRules.set(cssModule.identifier(), JSON.parse(decodeURIComponent(stringifiedStylexRule)));
                         }
                     }
                 }
@@ -122,17 +123,18 @@ class StyleXPlugin {
                 if (stylexCSS == null) {
                     return;
                 }
-                compilation.updateAsset(cssAssetDetails[0], new RawSource(stylexCSS));
+                compilation.updateAsset(cssAssetDetails[0], new RawSource(await this.transformCss(stylexCSS)));
             });
         });
     }
     constructor({ stylexImports = [
         'stylex',
         '@stylexjs/stylex'
-    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false } = {}){
+    ], useCSSLayers = false, stylexOption = {}, nextjsMode = false, transformCss = identityTransfrom } = {}){
         _define_property(this, "stylexRules", new Map());
         _define_property(this, "useCSSLayers", void 0);
         _define_property(this, "loaderOption", void 0);
+        _define_property(this, "transformCss", void 0);
         this.useCSSLayers = useCSSLayers;
         this.loaderOption = {
             stylexImports,
@@ -147,6 +149,7 @@ class StyleXPlugin {
             },
             nextjsMode
         };
+        this.transformCss = transformCss;
     }
 }
 _define_property(StyleXPlugin, "stylexLoader", stylexLoaderPath);

package/dist/next.d.ts

@@ -1,6 +1,7 @@
 import { NextConfig } from 'next/dist/server/config-shared';
 import { Options } from '@stylexjs/babel-plugin';
 
+type CSSTransformer = (css: string) => string | Buffer | Promise<string | Buffer>;
 interface StyleXPluginOption {
     stylexOption?: Partial<Options>;
     /**
@@ -21,6 +22,13 @@ interface StyleXPluginOption {
      * @default false
      */
     nextjsMode?: boolean;
+    /**
+     * Enable other CSS transformation
+     *
+     * Since stylex-webpack only inject CSS after all loaders, you can not use postcss-loader.
+     * With this you can incovate `postcss()` here.
+     */
+    transformCss?: CSSTransformer;
 }
 
 declare const withStyleX: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;

package/dist/next.js

@@ -41,7 +41,7 @@ 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(ctx, MiniCssExtractPlugin) {
+function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss) {
     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
@@ -59,7 +59,6 @@ function getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin) {
     // We don't actually use postcss-loader or css-loader to run against
     // the stylex css (which doesn't exist yet).
     // We use this loader to run against the virtual dummy css.
-    const postcss = ()=>css.lazyPostCSS(ctx.dir, getSupportedBrowsers(ctx.dir, ctx.dev), undefined);
     loaders.push({
         // https://github.com/vercel/next.js/blob/0572e218afe130656be53f7367bf18c4ea389f7d/packages/next/build/webpack/config/blocks/css/loaders/global.ts#L29-L38
         loader: require.resolve('next/dist/build/webpack/loaders/css-loader/src'),
@@ -84,13 +83,18 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                 }
                 (_config_optimization = config.optimization).splitChunks || (_config_optimization.splitChunks = {});
                 (_config_optimization_splitChunks = config.optimization.splitChunks).cacheGroups || (_config_optimization_splitChunks.cacheGroups = {});
+                let lazyPostCSSPromise = null;
+                const postcss = ()=>{
+                    lazyPostCSSPromise || (lazyPostCSSPromise = css.lazyPostCSS(ctx.dir, getSupportedBrowsers(ctx.dir, ctx.dev), undefined));
+                    return lazyPostCSSPromise;
+                };
                 const MiniCssExtractPlugin = getNextMiniCssExtractPlugin(ctx.dev);
                 // Based on https://github.com/vercel/next.js/blob/88a5f263f11cb55907f0d89a4cd53647ee8e96ac/packages/next/build/webpack/config/helpers.ts#L12-L18
                 const cssRules = config.module.rules.find((rule)=>Array.isArray(rule.oneOf) && rule.oneOf.some(({ test })=>typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
                 // Here we matches virtual css file emitted by StyleXPlugin
                 cssRules.unshift({
                     test: VIRTUAL_CSS_PATTERN,
-                    use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin)
+                    use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss)
                 });
                 // StyleX need to emit the css file on both server and client, both during the
                 // development and production.
@@ -134,7 +138,12 @@ const withStyleX = (pluginOptions)=>(nextConfig = {})=>{
                         dev: ctx.dev
                     },
                     // Enforce nextjsMode to true
-                    nextjsMode: true
+                    nextjsMode: true,
+                    async transformCss (css) {
+                        const { postcssWithPlugins } = await postcss();
+                        const result = await postcssWithPlugins.process(css);
+                        return result.css;
+                    }
                 }));
                 return config;
             }

package/dist/stylex-loader.js

@@ -54,7 +54,8 @@ async function stylexLoader(inputCode, inputSourceMap) {
         // 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 serializedStyleXRules = JSON.stringify(metadata.stylex);
+        // color: #fff is not url safe
+        const serializedStyleXRules = encodeURIComponent(JSON.stringify(metadata.stylex));
         if (!nextjsMode) {
             // Normal webpack mode
             // We generate a virtual css file that looks like it is relative to the source

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylex-webpack",
-  "version": "0.2.1-beta.0",
+  "version": "0.2.1-beta.2",
   "description": "The another Webpack Plugin for Facebook's StyleX",
   "homepage": "https://github.com/SukkaW/style9-webpack#readme",
   "repository": {
@@ -66,6 +66,7 @@
     "mocha": "^10.3.0",
     "mocha-chai-jest-snapshot": "^1.1.4",
     "next": "^14.1.0",
+    "postcss": "^8.4.35",
     "rimraf": "^5.0.5",
     "rollup": "^4.10.0",
     "rollup-plugin-copy": "^3.5.0",