@stylexswc/nextjs-plugin 0.5.1 → 0.6.0-rc.1

package/README.md

@@ -26,7 +26,7 @@ experience with StyleX:
   experience.
 - Integrates seamlessly with Next.js SWC Compiler for a streamlined workflow.
 
-### Stylex NAPI-RS Compiler
+### StyleX NAPI-RS Compiler
 
 - Utilizes NAPI-RS to compile StyleX code, offering advantages over the SWC
   plugin approach.
@@ -74,6 +74,13 @@ npm install --save-dev @stylexswc/nextjs-plugin
 - Default: `false`
 - Description: Enables CSS cascade layers support for better style isolation.
 
+#### `extractCSS`
+
+- Type: `boolean`
+- Optional
+- Default: `true`
+- Description: Controls whether CSS should be extracted into a separate file
+
 ### Advanced Options
 
 #### `transformCss`
@@ -100,7 +107,6 @@ module.exports = stylexPlugin({
     },
     unstable_moduleResolution: {
       type: 'commonJS',
-      rootDir,
     },
   },
   stylexImports: ['@stylexjs/stylex', { from: './theme', as: 'tokens' }],

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,gCAAgC,CAAC;AACvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAmFpE,QAAA,MAAM,UAAU,mBACG,kBAAkB,mBACtB,UAAU,KAAQ,UAqI9B,CAAC;AAEJ,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAwB,MAAM,gCAAgC,CAAC;AACvF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAmFpE,QAAA,MAAM,UAAU,mBACG,kBAAkB,mBACtB,UAAU,KAAQ,UA6I9B,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/dist/index.js

@@ -117,60 +117,63 @@ const withStyleX = (pluginOptions) => (nextConfig = {}) => {
             config.optimization ||= {};
             config.optimization.splitChunks ||= {};
             config.optimization.splitChunks.cacheGroups ||= {};
+            const extractCSS = pluginOptions?.extractCSS ?? true;
+            config.plugins ??= [];
             let lazyPostCSSPromise = null;
             const postcss = () => {
                 lazyPostCSSPromise ||= (0, css_1.lazyPostCSS)(ctx.dir, getSupportedBrowsers(ctx.dir, ctx.dev), undefined, false);
                 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 => typeof rule === 'object' &&
-                rule !== null &&
-                Array.isArray(rule.oneOf) &&
-                rule.oneOf.some(setRule => setRule &&
-                    setRule.test instanceof RegExp &&
-                    typeof setRule.test.test === 'function' &&
-                    setRule.test.test('filename.css')))).oneOf;
-            // Here we matches virtual css file emitted by StyleXPlugin
-            cssRules?.unshift({
-                test: webpack_plugin_1.VIRTUAL_CSS_PATTERN,
-                use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss),
-            });
-            config.plugins ??= [];
-            // StyleX need to emit the css file on both server and client, both during the
-            // development and production.
-            // However, Next.js only add MiniCssExtractPlugin on client + production.
-            //
-            // To simplify the logic at our side, we will add MiniCssExtractPlugin based on
-            // the "instanceof" check (We will only add our required MiniCssExtractPlugin if
-            // Next.js hasn't added it yet).
-            // This also prevent multiple MiniCssExtractPlugin being added (which will cause
-            // RealContentHashPlugin to panic)
-            if (!config.plugins.some((plugin) => plugin instanceof MiniCssExtractPlugin)) {
-                // HMR reloads the CSS file when the content changes but does not use
-                // the new file name, which means it can't contain a hash.
-                const filename = ctx.dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
-                // Logic adopted from https://git.io/JtdBy
-                config.plugins.push(new MiniCssExtractPlugin({
-                    filename,
-                    chunkFilename: filename,
-                    // Next.js guarantees that CSS order "doesn't matter", due to imposed
-                    // restrictions:
-                    // 1. Global CSS can only be defined in a single entrypoint (_app)
-                    // 2. CSS Modules generate scoped class names by default and cannot
-                    //    include Global CSS (:global() selector).
-                    //
-                    // While not a perfect guarantee (e.g. liberal use of `:global()`
-                    // selector), this assumption is required to code-split CSS.
-                    //
-                    // As for StyleX, the CSS is always atomic (so classes are always unique),
-                    // and StyleX Plugin will always sort the css based on media query and pseudo
-                    // selector.
-                    //
-                    // If this warning were to trigger, it'd be unactionable by the user,
-                    // but likely not valid -- so just disable it.
-                    ignoreOrder: true,
-                }));
+            if (extractCSS) {
+                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 => typeof rule === 'object' &&
+                    rule !== null &&
+                    Array.isArray(rule.oneOf) &&
+                    rule.oneOf.some(setRule => setRule &&
+                        setRule.test instanceof RegExp &&
+                        typeof setRule.test.test === 'function' &&
+                        setRule.test.test('filename.css')))).oneOf;
+                // Here we matches virtual css file emitted by StyleXPlugin
+                cssRules?.unshift({
+                    test: webpack_plugin_1.VIRTUAL_CSS_PATTERN,
+                    use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin, postcss),
+                });
+                // StyleX need to emit the css file on both server and client, both during the
+                // development and production.
+                // However, Next.js only add MiniCssExtractPlugin on client + production.
+                //
+                // To simplify the logic at our side, we will add MiniCssExtractPlugin based on
+                // the "instanceof" check (We will only add our required MiniCssExtractPlugin if
+                // Next.js hasn't added it yet).
+                // This also prevent multiple MiniCssExtractPlugin being added (which will cause
+                // RealContentHashPlugin to panic)
+                if (!config.plugins.some((plugin) => plugin instanceof MiniCssExtractPlugin)) {
+                    // HMR reloads the CSS file when the content changes but does not use
+                    // the new file name, which means it can't contain a hash.
+                    const filename = ctx.dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
+                    // Logic adopted from https://git.io/JtdBy
+                    config.plugins.push(new MiniCssExtractPlugin({
+                        filename,
+                        chunkFilename: filename,
+                        // Next.js guarantees that CSS order "doesn't matter", due to imposed
+                        // restrictions:
+                        // 1. Global CSS can only be defined in a single entrypoint (_app)
+                        // 2. CSS Modules generate scoped class names by default and cannot
+                        //    include Global CSS (:global() selector).
+                        //
+                        // While not a perfect guarantee (e.g. liberal use of `:global()`
+                        // selector), this assumption is required to code-split CSS.
+                        //
+                        // As for StyleX, the CSS is always atomic (so classes are always unique),
+                        // and StyleX Plugin will always sort the css based on media query and pseudo
+                        // selector.
+                        //
+                        // If this warning were to trigger, it'd be unactionable by the user,
+                        // but likely not valid -- so just disable it.
+                        ignoreOrder: true,
+                    }));
+                }
             }
             config.plugins.push(new webpack_plugin_1.default({
                 ...pluginOptions,
@@ -180,14 +183,18 @@ const withStyleX = (pluginOptions) => (nextConfig = {}) => {
                 },
                 // Enforce nextjsMode to true
                 nextjsMode: true,
-                async transformCss(css) {
-                    const { postcssWithPlugins } = await postcss();
-                    const result = await postcssWithPlugins.process(css);
-                    if (typeof pluginOptions?.transformCss === 'function') {
-                        return pluginOptions.transformCss(result.css);
+                ...(extractCSS
+                    ? {
+                        async transformCss(css) {
+                            const { postcssWithPlugins } = await postcss();
+                            const result = await postcssWithPlugins.process(css);
+                            if (typeof pluginOptions?.transformCss === 'function') {
+                                return pluginOptions.transformCss(result.css);
+                            }
+                            return result.css;
+                        },
                     }
-                    return result.css;
-                },
+                    : { transformCss: undefined }),
             }));
             return config;
         },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stylexswc/nextjs-plugin",
-  "description": "Stylex NextJS plugin with NAPI-RS compiler",
-  "version": "0.5.1",
+  "description": "StyleX NextJS plugin with NAPI-RS compiler",
+  "version": "0.6.0-rc.1",
   "config": {
     "scripty": {
       "path": "../../scripts/packages"
@@ -9,13 +9,13 @@
   },
   "devDependencies": {
     "@babel/types": "^7.23.9",
-    "@stylexswc/eslint-config": "0.5.1",
-    "@stylexswc/rs-compiler": "0.5.1",
-    "@stylexswc/typescript-config": "0.5.1",
-    "@stylexswc/webpack-plugin": "0.5.1",
+    "@stylexswc/eslint-config": "0.6.0-rc.1",
+    "@stylexswc/rs-compiler": "0.6.0-rc.1",
+    "@stylexswc/typescript-config": "0.6.0-rc.1",
+    "@stylexswc/webpack-plugin": "0.6.0-rc.1",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.5.1",
-    "next": "^15.0.4",
+    "next": "^15.1.2",
     "postcss": "^8.4.49",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -28,7 +28,8 @@
     "next",
     "nextjs",
     "nextjs-plugin",
-    "stylex"
+    "stylex",
+    "swc"
   ],
   "license": "MIT",
   "main": "dist/index.js",