@stylexswc/nextjs-plugin 0.4.4 → 0.5.0-rc.2

package/README.md

@@ -4,25 +4,41 @@ Next.js plugin for an unofficial
 [`napi-rs`](https://github.com/dwlad90/stylex-swc-plugin/tree/develop/crates/stylex-rs-compiler)
 compiler that includes the StyleX SWC code transformation under the hood.
 
+## Breaking Changes in v0.5.0
+
+> [!IMPORTANT]
+> The plugin API has been updated since version
+> [0.5.0](https://www.npmjs.com/package/@stylexswc/swc-plugin/v/0.5.0). If
+> you're upgrading from an earlier version, please note that the configuration
+> options have changed. See the [Plugin Options](#plugin-options) section for
+> the updated API.
+
 ## Overview
 
-This package combines two solutions to enhance your Next.js development experience with StyleX:
+This package combines two solutions to enhance your Next.js development
+experience with StyleX:
 
 ### StyleX SWC Plugin
 
-* Integrates StyleX with the SWC compiler, potentially leading to faster build times compared to using Babel.
-* Maintains high compatibility with official StyleX tests, ensuring a reliable experience.
-* Integrates seamlessly with Next.js SWC Compiler for a streamlined workflow.
+- Integrates StyleX with the SWC compiler, potentially leading to faster build
+  times compared to using Babel.
+- Maintains high compatibility with official StyleX tests, ensuring a reliable
+  experience.
+- Integrates seamlessly with Next.js SWC Compiler for a streamlined workflow.
 
 ### Stylex NAPI-RS Compiler
 
-* Utilizes NAPI-RS to compile StyleX code, offering advantages over the SWC plugin approach.
-* Provides access to StyleX metadata and source maps, enabling advanced plugin and tool development.
+- Utilizes NAPI-RS to compile StyleX code, offering advantages over the SWC
+  plugin approach.
+- Provides access to StyleX metadata and source maps, enabling advanced plugin
+  and tool development.
 
 ## Why choose this approach?
 
-* Leverage SWC's speed: Benefit from Next.js's default SWC compiler for potentially faster build times.
-* Maintain StyleX familiarity: The usage of StyleX remains unchanged for developers.
+- Leverage SWC's speed: Benefit from Next.js's default SWC compiler for
+  potentially faster build times.
+- Maintain StyleX familiarity: The usage of StyleX remains unchanged for
+  developers.
 
 ## Installation
 
@@ -32,48 +48,85 @@ To install the package, run the following command:
 npm install --save-dev @stylexswc/nextjs-plugin
 ```
 
-Please install `@stylexswc/rs-compiler` if you haven't done so already:
+## Plugin Options
 
-```bash
-npm install --save-dev @stylexswc/rs-compiler
-```
+### Basic Options
 
-## Usage
+#### `rsOptions`
 
-Modify Next.js config. For example:
+- Type: `Partial<StyleXOptions>`
+- Optional
+- Description: StyleX compiler options that will be passed to the NAPI-RS
+  compiler. See
+  [StyleX configuration docs](https://stylexjs.com/docs/api/configuration/babel-plugin/)
+  for details.
 
-```js
-/** @type {import('next').NextConfig} */
-const stylexPlugin = require('@stylexswc/nextjs-plugin');
+#### `stylexImports`
 
-const nextConfig = {
-  // Configure `pageExtensions` to include MDX files
-  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
-  transpilePackages: ['@stylexjs/open-props'],
-  // Optionally, add any other Next.js config below
-  swcMinify: true,
-};
+- Type: `Array<string | { as: string, from: string }>`
+- Default: `['stylex', '@stylexjs/stylex']`
+- Description: Specifies where StyleX will be imported from. Supports both
+  string paths and import aliases.
+
+#### `useCSSLayers`
+
+- Type: `boolean`
+- Default: `false`
+- Description: Enables CSS cascade layers support for better style isolation.
+
+### Advanced Options
+
+#### `transformCss`
+
+- Type: `(css: string) => string | Buffer | Promise<string | Buffer>`
+- Optional
+- Description: Custom CSS transformation function. Since the plugin injects CSS
+  after all loaders, use this to apply PostCSS or other CSS transformations.
+
+### Example Configuration
+
+```javascript
+const path = require('path');
+const stylexPlugin = require('@stylexswc/nextjs-plugin');
+const rootDir = __dirname;
 
 module.exports = stylexPlugin({
-  rootDir: __dirname,
-  // Stylex RS compiler options
-  dev: false,
-  runtimeInjection: false,
-  genConditionalClasses: true,
-  treeshakeCompensation: true,
-  unstable_moduleResolution: {
-    type: 'commonJS',
-    rootDir: __dirname,
+  // Add any StyleX options here
+  rsOptions: {
+    dev: process.env.NODE_ENV !== 'production',
+    useRemForFontSize: true,
+    aliases: {
+      '@/*': [path.join(rootDir, '*')],
+    },
+    unstable_moduleResolution: {
+      type: 'commonJS',
+      rootDir,
+    },
   },
-})(nextConfig);
+  stylexImports: ['@stylexjs/stylex', { from: './theme', as: 'tokens' }],
+  useCSSLayers: true,
+  transformCss: async css => {
+    const postcss = require('postcss');
+    const result = await postcss([require('autoprefixer')]).process(css);
+    return result.css;
+  },
+})({
+  transpilePackages: ['@stylexjs/open-props'],
+  // Optionally, add any other Next.js config below
+});
 ```
 
 ## Examples
 
-* [Example repo](https://github.com/Dwlad90/nextjs-app-dir-stylex)
-* [CodeSandbox with example repo](https://codesandbox.io/p/github/Dwlad90/nextjs-app-dir-stylex/main)
+- [Example repo](https://github.com/Dwlad90/nextjs-app-dir-stylex)
+- [CodeSandbox with example repo](https://codesandbox.io/p/github/Dwlad90/nextjs-app-dir-stylex/main)
 
 ## Documentation
 
-* [StyleX Documentation](https://stylexjs.com)
-* [NAPI-RS compiler for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/develop/crates/stylex-rs-compiler)
+- [StyleX Documentation](https://stylexjs.com)
+- [NAPI-RS compiler for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/develop/crates/stylex-rs-compiler)
+
+## Acknowledgments
+
+This plugin was inspired by
+[`stylex-webpack`](https://github.com/SukkaW/stylex-webpack).

package/dist/index.d.ts

@@ -1,114 +1,5 @@
-import type { Configuration } from 'webpack';
-import type { NextConfig } from 'next';
-import type { ConfigurationContext } from 'next/dist/build/webpack/config/utils';
-import type { WebpackConfigContext } from 'next/dist/server/config-shared';
-import type { StyleXOptions } from '@stylexswc/rs-compiler';
-interface StylexNextJSPluginOptions extends StyleXOptions {
-    rootDir: string;
-    filename?: string;
-}
-declare function StylexNextJSPlugin({ rootDir, filename, ...pluginOptions }: StylexNextJSPluginOptions): (nextConfig?: NextConfig) => {
-    transpilePackages: string[];
-    webpack(config: Configuration & ConfigurationContext, options: WebpackConfigContext): Configuration & ConfigurationContext;
-    exportPathMap?: (defaultMap: import("next/dist/server/config-shared").ExportPathMap, ctx: {
-        dev: boolean;
-        dir: string;
-        outDir: string | null;
-        distDir: string;
-        buildId: string;
-    }) => Promise<import("next/dist/server/config-shared").ExportPathMap> | import("next/dist/server/config-shared").ExportPathMap;
-    i18n?: import("next/dist/server/config-shared").I18NConfig | null;
-    eslint?: import("next/dist/server/config-shared").ESLintConfig;
-    typescript?: import("next/dist/server/config-shared").TypeScriptConfig;
-    headers?: () => Promise<import("next/dist/lib/load-custom-routes").Header[]>;
-    rewrites?: () => Promise<import("next/dist/lib/load-custom-routes").Rewrite[] | {
-        beforeFiles: import("next/dist/lib/load-custom-routes").Rewrite[];
-        afterFiles: import("next/dist/lib/load-custom-routes").Rewrite[];
-        fallback: import("next/dist/lib/load-custom-routes").Rewrite[];
-    }>;
-    redirects?: () => Promise<import("next/dist/lib/load-custom-routes").Redirect[]>;
-    excludeDefaultMomentLocales?: boolean;
-    trailingSlash?: boolean;
-    env?: Record<string, string | undefined>;
-    distDir?: string;
-    cleanDistDir?: boolean;
-    assetPrefix?: string;
-    cacheHandler?: string | undefined;
-    cacheMaxMemorySize?: number;
-    useFileSystemPublicRoutes?: boolean;
-    generateBuildId?: () => string | null | Promise<string | null>;
-    generateEtags?: boolean;
-    pageExtensions?: string[];
-    compress?: boolean;
-    analyticsId?: string;
-    poweredByHeader?: boolean;
-    images?: import("next/dist/shared/lib/image-config").ImageConfig;
-    devIndicators?: {
-        buildActivity?: boolean;
-        buildActivityPosition?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
-    };
-    onDemandEntries?: {
-        maxInactiveAge?: number;
-        pagesBufferLength?: number;
-    };
-    amp?: {
-        canonicalBase?: string;
-    };
-    deploymentId?: string;
-    basePath?: string;
-    sassOptions?: {
-        [key: string]: any;
-    };
-    productionBrowserSourceMaps?: boolean;
-    optimizeFonts?: boolean;
-    reactProductionProfiling?: boolean;
-    reactStrictMode?: boolean | null;
-    publicRuntimeConfig?: {
-        [key: string]: any;
-    };
-    serverRuntimeConfig?: {
-        [key: string]: any;
-    };
-    httpAgentOptions?: {
-        keepAlive?: boolean;
-    };
-    outputFileTracing?: boolean;
-    staticPageGenerationTimeout?: number;
-    crossOrigin?: "anonymous" | "use-credentials";
-    swcMinify?: boolean;
-    compiler?: {
-        reactRemoveProperties?: boolean | {
-            properties?: string[];
-        };
-        relay?: {
-            src: string;
-            artifactDirectory?: string;
-            language?: "typescript" | "javascript" | "flow";
-            eagerEsModules?: boolean;
-        };
-        removeConsole?: boolean | {
-            exclude?: string[];
-        };
-        styledComponents?: boolean | import("next/dist/server/config-shared").StyledComponentsConfig;
-        emotion?: boolean | import("next/dist/server/config-shared").EmotionConfig;
-        styledJsx?: boolean | {
-            useLightningcss?: boolean;
-        };
-    };
-    output?: "standalone" | "export";
-    skipMiddlewareUrlNormalize?: boolean;
-    skipTrailingSlashRedirect?: boolean;
-    modularizeImports?: Record<string, {
-        transform: string | Record<string, string>;
-        preventFullImport?: boolean;
-        skipDefaultConversion?: boolean;
-    }>;
-    logging?: {
-        fetches?: {
-            fullUrl?: boolean;
-        };
-    };
-    experimental?: import("next/dist/server/config-shared").ExperimentalConfig;
-};
-export default StylexNextJSPlugin;
+import type { NextConfig } from 'next/dist/server/config-shared';
+import type { StyleXPluginOption } from '@stylexswc/webpack-plugin';
+declare const withStyleX: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;
+export default withStyleX;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI5D,UAAU,yBAA0B,SAAQ,aAAa;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,QAA8B,EAC9B,GAAG,aAAa,EACjB,EAAE,yBAAyB,iBACN,UAAU;;oBAIV,aAAa,GAAG,oBAAoB,WAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkD0wjB,CAAC;6BAAsG,CAAC;;;sBAAke,CAAC;yBAA4H,CAAC;;;qBAA+H,CAAC;;;;;;;;;;;;;;;;;;iBAA8pE,CAAC;;;;;;;6BAAg6C,CAAC;sBAAoC,CAAC;;aAAoC,CAAC;;6BAA0D,CAAC;oBAA8B,CAAC;0BAAkE,CAAC;;qBAA2C,CAAC;mBAAiC,CAAC;;wBAA+C,CAAC;eAAmD,CAAC;iBAA4C,CAAC;2BAAyC,CAAC;;;;;;;;yBAA4zC,CAAC;6BAAwC,CAAC;;;eAAkD,CAAC;mBAAuB,CAAC;;;;EAJ3owB;AAED,eAAe,kBAAkB,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,UAqI9B,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/dist/index.js

@@ -1,52 +1,198 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const custom_webpack_plugin_1 = __importDefault(require("./custom-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("next/dist/build/webpack/plugins/mini-css-extract-plugin"));
+const log_1 = require("next/dist/build/output/log");
+const browserslist_1 = __importDefault(require("next/dist/compiled/browserslist"));
+const css_1 = require("next/dist/build/webpack/config/blocks/css");
+const webpack_plugin_1 = __importStar(require("@stylexswc/webpack-plugin"));
+/** Next.js' precompilation add "__esModule: true", but doesn't add an actual default exports */
+const NextMiniCssExtractPlugin = mini_css_extract_plugin_1.default;
+// Adopted from https://github.com/vercel/next.js/blob/1f1632979c78b3edfe59fd85d8cce62efcdee688/packages/next/build/webpack-config.ts#L60-L72
+const getSupportedBrowsers = (dir, isDevelopment) => {
+    try {
+        return browserslist_1.default.loadConfig({
+            path: dir,
+            env: isDevelopment ? 'development' : 'production',
+        });
+    }
+    catch { }
+};
+const getNextMiniCssExtractPlugin = (isDev) => {
+    // Use own MiniCssExtractPlugin to ensure HMR works
+    // v9 has issues when using own plugin in production
+    // v10.2.1 has issues when using built-in plugin in development since it
+    // doesn't bundle HMR files
+    // v12.1.7 finaly fixes the issue by adding the missing hmr/hotModuleReplacement.js file
+    if (isDev) {
+        try {
+            // Check if hotModuleReplacement exists
+            require.resolve('next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement');
+            return NextMiniCssExtractPlugin;
+        }
+        catch {
+            (0, log_1.warn)('Next.js built-in mini-css-extract-plugin is broken, will fallback to "mini-css-extract-plugin"');
+            return require('mini-css-extract-plugin');
+        }
+    }
+    // Always use Next.js built-in MiniCssExtractPlugin in production
+    return NextMiniCssExtractPlugin;
+};
+// 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, 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
+    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: `${ctx.config.assetPrefix}/_next/`,
+                esModule: false,
+            },
+        });
+    }
+    // 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.
+    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'),
+        options: {
+            // https://github.com/vercel/next.js/blob/88a5f263f11cb55907f0d89a4cd53647ee8e96ac/packages/next/build/webpack/config/blocks/css/index.ts#L142-L147
+            postcss,
+            importLoaders: 1,
+            modules: false,
+        },
+    });
+    return loaders;
+}
 let count = 0;
-function StylexNextJSPlugin({ rootDir, filename = 'stylex-bundle.css', ...pluginOptions }) {
-    return (nextConfig = {}) => {
-        return {
-            ...nextConfig,
-            transpilePackages: [...(nextConfig.transpilePackages || []), '@stylexjs/open-props'],
-            webpack(config, options) {
-                if (typeof nextConfig.webpack === 'function') {
-                    config = nextConfig.webpack(config, options);
-                }
-                const { buildId, dev, isServer } = options;
-                console.log([
-                    '!!!GETTING WEBPACK CONFIG!!!',
-                    '======================',
-                    `Count: ${++count}`,
-                    `Build ID: ${buildId}`,
-                    `Server: ${isServer}`,
-                    `Env: ${dev ? 'dev' : 'prod'}`,
-                ].join('\n'));
-                if (config.optimization?.splitChunks) {
-                    config.optimization.splitChunks ||= { cacheGroups: {} };
-                    if (config.optimization.splitChunks.cacheGroups) {
-                        config.optimization.splitChunks.cacheGroups.stylex = {
-                            name: 'stylex',
-                            chunks: 'all',
-                            test: /\.css$/,
-                            enforce: true,
-                        };
-                    }
-                }
-                const webpackPluginOptions = {
-                    rootDir,
-                    appendTo: (name) => name.endsWith('.css'),
+const withStyleX = (pluginOptions) => (nextConfig = {}) => {
+    return {
+        ...nextConfig,
+        webpack(config, ctx) {
+            if (typeof nextConfig.webpack === 'function') {
+                config = nextConfig.webpack(config, ctx);
+            }
+            const { buildId, dev, isServer } = ctx;
+            console.log([
+                '!!!GETTING WEBPACK CONFIG!!!',
+                '======================',
+                `Count: ${++count}`,
+                `Build ID: ${buildId}`,
+                `Server: ${isServer}`,
+                `Env: ${dev ? 'dev' : 'prod'}`,
+            ].join('\n'));
+            // For some reason, Next 11.0.1 has `config.optimization.splitChunks`
+            // set to `false` when webpack 5 is enabled.
+            config.optimization ||= {};
+            config.optimization.splitChunks ||= {};
+            config.optimization.splitChunks.cacheGroups ||= {};
+            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,
-                    dev,
-                    rsOptions: pluginOptions,
-                };
-                const stylexPlugin = new custom_webpack_plugin_1.default(webpackPluginOptions);
-                config.plugins?.push(stylexPlugin);
-                return config;
-            },
-        };
+                    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,
+                rsOptions: {
+                    ...pluginOptions?.rsOptions,
+                    dev: ctx.dev,
+                },
+                // 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);
+                    }
+                    return result.css;
+                },
+            }));
+            return config;
+        },
     };
-}
-exports.default = StylexNextJSPlugin;
-module.exports = StylexNextJSPlugin;
+};
+exports.default = withStyleX;
+module.exports = withStyleX;
+module.exports.default = withStyleX;

package/package.json

@@ -1,25 +1,24 @@
 {
   "name": "@stylexswc/nextjs-plugin",
   "description": "Stylex NextJS plugin with NAPI-RS compiler",
-  "version": "0.4.4",
+  "version": "0.5.0-rc.2",
   "config": {
     "scripty": {
       "path": "../../scripts/packages"
     }
   },
-  "dependencies": {
-    "@stylexjs/babel-plugin": "^0.9.3"
-  },
   "devDependencies": {
     "@babel/types": "^7.23.9",
-    "@stylexswc/eslint-config": "0.4.4",
-    "@stylexswc/rs-compiler": "0.4.4",
-    "@stylexswc/typescript-config": "0.4.4",
+    "@stylexswc/eslint-config": "0.5.0-rc.2",
+    "@stylexswc/rs-compiler": "0.5.0-rc.2",
+    "@stylexswc/typescript-config": "0.5.0-rc.2",
+    "@stylexswc/webpack-plugin": "0.5.0-rc.2",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^22.5.1",
-    "next": "^14.2.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^15.0.4",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "webpack": "^5.94.0"
   },
   "files": [
@@ -34,7 +33,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "peerDependencies": {
-    "next": ">=14.0.1"
+    "next": ">=15.0.0"
   },
   "private": false,
   "publishConfig": {

package/dist/constants.d.ts

@@ -1,4 +0,0 @@
-import type { LoaderContext } from 'webpack';
-export declare const PLUGIN_NAME = "stylex";
-export type SupplementedLoaderContext<Options = unknown> = LoaderContext<Options> & {};
-//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,WAAW,WAAW,CAAC;AAEpC,MAAM,MAAM,yBAAyB,CAAC,OAAO,GAAG,OAAO,IAAI,aAAa,CAAC,OAAO,CAAC,GAAG,EAEnF,CAAC"}

package/dist/constants.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLUGIN_NAME = void 0;
-exports.PLUGIN_NAME = 'stylex';

package/dist/custom-webpack-loader.d.ts

@@ -1,16 +0,0 @@
-import type * as webpack from 'webpack';
-import { type SupplementedLoaderContext } from './constants';
-export type WebpackLoaderOptions = {
-    /**
-     * Please never use this feature, it will be removed without further notice.
-     */
-    stylexPlugin?: {
-        transformCode: (code: string, filePath: string, logger?: ReturnType<webpack.Compiler['getInfrastructureLogger']>) => Promise<{
-            code: string;
-            map: string;
-        }>;
-    };
-};
-declare function stylexLoader(this: SupplementedLoaderContext<WebpackLoaderOptions>, inputCode: string): void;
-export default stylexLoader;
-//# sourceMappingURL=custom-webpack-loader.d.ts.map

package/dist/custom-webpack-loader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-webpack-loader.d.ts","sourceRoot":"","sources":["../src/custom-webpack-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,CAAC;AAExC,OAAO,EAAe,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE;QACb,aAAa,EAAE,CACb,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,KAC7D,OAAO,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC7C,CAAC;CACH,CAAC;AAIF,iBAAS,YAAY,CAAC,IAAI,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAM,QAc7F;AAED,eAAe,YAAY,CAAC"}

package/dist/custom-webpack-loader.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const constants_1 = require("./constants");
-function stylexLoader(inputCode) {
-    const callback = this.async();
-    const { stylexPlugin } = this.getOptions();
-    const logger = this._compiler?.getInfrastructureLogger(constants_1.PLUGIN_NAME);
-    stylexPlugin?.transformCode(inputCode, this.resourcePath, logger).then(({ code, map }) => {
-        callback(null, code, map);
-    }, (error) => {
-        callback(error);
-    });
-}
-exports.default = stylexLoader;
-module.exports = stylexLoader;

package/dist/custom-webpack-plugin.d.ts

@@ -1,23 +0,0 @@
-import type { Compiler } from 'webpack';
-import type { StyleXOptions } from '@stylexswc/rs-compiler';
-declare class StylexPlugin {
-    filesInLastRun: any;
-    filePath?: string | null;
-    dev: boolean;
-    appendTo: any;
-    filename?: string;
-    stylexImports: any[];
-    useCSSLayers: any;
-    rsOptions: StyleXOptions;
-    constructor({ dev, appendTo, filename, stylexImports, useCSSLayers, rsOptions, }?: any);
-    apply(compiler: Compiler): void;
-    transformCode(inputCode: string, filename: string, logger: any): Promise<{
-        code: string;
-        map: string | undefined;
-    } | {
-        code: string;
-        map?: undefined;
-    }>;
-}
-export default StylexPlugin;
-//# sourceMappingURL=custom-webpack-plugin.d.ts.map

package/dist/custom-webpack-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-webpack-plugin.d.ts","sourceRoot":"","sources":["../src/custom-webpack-plugin.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAgB,MAAM,SAAS,CAAC;AAEtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAc5D,cAAM,YAAY;IAChB,cAAc,EAAE,GAAG,CAAQ;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAChC,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,YAAY,EAAE,GAAG,CAAC;IAClB,SAAS,EAAE,aAAa,CAAC;gBAEb,EACV,GAAgB,EAChB,QAAQ,EACR,QAAsD,EACtD,aAA8C,EAC9C,YAAoB,EACpB,SAAc,GACf,GAAE,GAAQ;IAUX,KAAK,CAAC,QAAQ,EAAE,QAAQ;IA2FlB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG;;;;;;;CA0CrE;AACD,eAAe,YAAY,CAAC"}

package/dist/custom-webpack-plugin.js

@@ -1,143 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
-const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
-const rs_compiler_1 = require("@stylexswc/rs-compiler");
-const webpack_1 = __importDefault(require("webpack"));
-const promises_1 = __importDefault(require("fs/promises"));
-const { NormalModule, Compilation } = webpack_1.default;
-const PLUGIN_NAME = 'stylex';
-const IS_DEV_ENV = process.env.NODE_ENV === 'development';
-const { RawSource, ConcatSource } = webpack_1.default.sources;
-const stylexRules = {};
-const cssFiles = new Set();
-const compilers = new Set();
-class StylexPlugin {
-    filesInLastRun = null;
-    filePath = null;
-    dev;
-    appendTo;
-    filename;
-    stylexImports;
-    useCSSLayers;
-    rsOptions;
-    constructor({ dev = IS_DEV_ENV, appendTo, filename = appendTo == null ? 'stylex.css' : undefined, stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, rsOptions = {}, } = {}) {
-        this.dev = dev;
-        this.appendTo = appendTo;
-        this.filename = filename;
-        this.stylexImports = stylexImports;
-        this.useCSSLayers = useCSSLayers;
-        this.rsOptions = rsOptions;
-    }
-    apply(compiler) {
-        compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
-            // Apply loader to JS modules.
-            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (_, module) => {
-                if (
-                // JavaScript (and Flow) modules
-                /\.jsx?/.test(path_1.default.extname(module.resource)) ||
-                    // TypeScript modules
-                    /\.tsx?/.test(path_1.default.extname(module.resource))) {
-                    // We use .unshift() and not .push() like original babel plugin
-                    // because we want to run other transformations first, e.g. custom SWC plugins.
-                    module.loaders.unshift({
-                        loader: path_1.default.resolve(__dirname, 'custom-webpack-loader.js'),
-                        options: { stylexPlugin: this },
-                        ident: null,
-                        type: null,
-                    });
-                }
-                if (
-                // JavaScript (and Flow) modules
-                /\.css/.test(path_1.default.extname(module.resource))) {
-                    cssFiles.add(module.resource);
-                }
-            });
-            const getStyleXRules = () => {
-                if (Object.keys(stylexRules).length === 0) {
-                    return null;
-                }
-                // Take styles for the modules that were included in the last compilation.
-                const allRules = Object.keys(stylexRules)
-                    .map(filename => stylexRules[filename])
-                    .flat()
-                    .filter((rule) => !!rule);
-                return babel_plugin_1.default.processStylexRules(allRules, this.useCSSLayers);
-            };
-            if (this.appendTo) {
-                compilation.hooks.processAssets.tap({
-                    name: PLUGIN_NAME,
-                    stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, // see below for more stages
-                }, assets => {
-                    const cssFileName = Object.keys(assets).find(typeof this.appendTo === 'function'
-                        ? this.appendTo
-                        : filename => filename.endsWith(this.appendTo));
-                    const stylexCSS = getStyleXRules();
-                    if (cssFileName && stylexCSS != null) {
-                        this.filePath = path_1.default.join(process.cwd(), '.next', cssFileName);
-                        const updatedSource = new ConcatSource(new RawSource(assets[cssFileName]?.source() || ''), new RawSource(stylexCSS));
-                        compilation.updateAsset(cssFileName, updatedSource);
-                        compilers.add(compiler);
-                    }
-                });
-            }
-            else {
-                // Consume collected rules and emit the stylex CSS asset
-                compilation.hooks.additionalAssets.tap(PLUGIN_NAME, () => {
-                    try {
-                        const collectedCSS = getStyleXRules();
-                        if (collectedCSS && this.filename) {
-                            console.log('emitting asset', this.filename, collectedCSS);
-                            compilation.emitAsset(this.filename, new RawSource(collectedCSS));
-                            promises_1.default.writeFile(this.filename, collectedCSS).then(() => console.log('wrote file', this.filename));
-                        }
-                    }
-                    catch (e) {
-                        compilation.errors.push(e);
-                    }
-                });
-            }
-        });
-    }
-    // This function is not called by Webpack directly.
-    // Instead, `NormalModule.getCompilationHooks` is used to inject a loader
-    // for JS modules. The loader than calls this function.
-    async transformCode(inputCode, filename, logger) {
-        const originalSource = inputCode;
-        if (inputCode.includes('Welcome to my MDX page'))
-            console.log('originalSource: ', originalSource);
-        if (this.stylexImports.some(importName => originalSource.includes(importName))) {
-            let result = (0, rs_compiler_1.transform)(filename, inputCode, this.rsOptions);
-            const metadata = result?.metadata;
-            const code = result.code;
-            const map = result.map;
-            if (metadata.stylex != null && metadata.stylex.length > 0) {
-                const oldRules = stylexRules[filename] || [];
-                stylexRules[filename] = metadata.stylex;
-                logger.debug(`Read stylex styles from ${filename}:`, metadata.stylex);
-                const oldClassNames = new Set(oldRules.map(rule => rule[0]));
-                const newClassNames = new Set(metadata.stylex.map(rule => rule[0]));
-                // If there are any new classNames in the output we need to recompile
-                // the CSS bundle.
-                if (oldClassNames.size !== newClassNames.size ||
-                    [...newClassNames].some(className => !oldClassNames.has(className)) ||
-                    filename.endsWith('.stylex.ts') ||
-                    filename.endsWith('.stylex.tsx') ||
-                    filename.endsWith('.stylex.js')) {
-                    compilers.forEach(compiler => {
-                        cssFiles.forEach(cssFile => {
-                            compiler.watchFileSystem.watcher.fileWatchers.get(cssFile).watcher.emit('change');
-                        });
-                    });
-                }
-            }
-            return { code, map };
-        }
-        return { code: inputCode };
-    }
-}
-exports.default = StylexPlugin;
-module.exports = StylexPlugin;

package/dist/types.d.ts

@@ -1,9 +0,0 @@
-export type PluginRule = {
-    class_name: string;
-    style: {
-        ltr: string;
-        rtl?: null | string;
-    };
-    priority: number;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });