@stylexswc/nextjs-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Vladislav Buinovski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# SWC Stylex plugin for Next.js
+
+Next.js plugin for an unofficial
+[`StyleX SWC`](https://github.com/dwlad90/stylex-swc-plugin/tree/master/packages/swc-plugin)
+plugin.
+
+## Why SWC instead of Babel
+
+Since version 12, Next.js uses SWC Compiler by default.
+[According to Vercel](https://nextjs.org/docs/architecture/nextjs-compiler),
+compilation using the SWC Compiler is 17x faster than Babel.
+
+However, if you have a Babel config, the application will out put of SWC
+Compiler and continue to use Babel.
+
+This plugin allows us to use StyleX and take advantage of SWC Compiler.
+
+**The usage of StyleX does not change**, all changes are internal. All you need
+to do, is install SWC StyleX plugin and update Next.js config.
+
+## Installation
+
+Install the package and SWC plugin by using:
+
+```bash
+npm install --save-dev @stylexswc/nextjs-plugin
+```
+
+Please install `@stylexswc/swc-plugin` if you haven't done so already:
+
+```bash
+npm install --save-dev @stylexswc/swc-plugin
+```
+
+## Usage
+
+Modify Next.js config. For example:
+
+```js
+/** @type {import('next').NextConfig} */
+const stylexPlugin = require('@stylexswc/nextjs-plugin');
+
+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,
+  experimental: {
+    swcPlugins: [
+      '@stylexswc/swc-plugin',
+      {
+        dev: false,
+        runtimeInjection: false,
+        genConditionalClasses: true,
+        treeshakeCompensation: true,
+        unstable_moduleResolution: {
+          type: 'commonJS',
+          rootDir: __dirname,
+        },
+      },
+    ],
+  },
+};
+
+module.exports = stylexPlugin({
+  rootDir: __dirname,
+})(nextConfig);
+```
+
+## 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)
+
+## Documentation
+
+- [StyleX Documentation](https://stylexjs.com)
+- [SWC plugin for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/master/packages/swc-plugin)

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+"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

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

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

@@ -0,0 +1 @@
+{"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,cAAM,YAAY;IAChB,cAAc,EAAE,GAAG,CAAQ;IAC3B,QAAQ,EAAE,GAAG,CAAQ;IACrB,GAAG,EAAE,GAAG,CAAC;IACT,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,EAAE,GAAG,CAAC;IACd,WAAW,EAAE,GAAG,CAAC;IACjB,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,WAAW,EAAE,GAAG,CAAC;IACjB,YAAY,EAAE,GAAG,CAAC;gBAEN,EACV,GAAgB,EAChB,QAAQ,EACR,QAAsD,EACtD,aAA8C,EAC9C,YAAoB,GACrB,GAAE,GAAQ;IASX,KAAK,CAAC,QAAQ,EAAE,QAAQ;IAgGlB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG;;;;;;;CA2DrE;AACD,eAAe,YAAY,CAAC"}

package/dist/custom-webpack-plugin.js

@@ -0,0 +1,155 @@
+"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 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' || process.env.BABEL_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;
+    babelConfig;
+    stylexImports;
+    babelPlugin;
+    useCSSLayers;
+    constructor({ dev = IS_DEV_ENV, appendTo, filename = appendTo == null ? 'stylex.css' : undefined, stylexImports = ['stylex', '@stylexjs/stylex'], useCSSLayers = false, } = {}) {
+        this.dev = dev;
+        this.appendTo = appendTo;
+        this.filename = filename;
+        this.stylexImports = stylexImports;
+        this.useCSSLayers = useCSSLayers;
+    }
+    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 .push() here instead of .unshift()
+                    // Webpack usually runs loaders in reverse order and we want to ideally run
+                    // our loader before anything else.
+                    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])
+                    .filter(Boolean)
+                    .flat();
+                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 source = assets?.[cssFileName]?.source();
+                        if (source) {
+                            const updatedSource = new ConcatSource(new RawSource(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) {
+                            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 metadataStr = '[]';
+            const code = originalSource.replace(/\/\/*__stylex_metadata_start__(?<metadata>.+)__stylex_metadata_end__/, (...args) => {
+                metadataStr = args.at(-1)?.metadata.split('"__stylex_metadata_end__')[0];
+                return '';
+            });
+            const metadata = { stylex: [] };
+            try {
+                metadata.stylex = JSON.parse(metadataStr);
+            }
+            catch (e) {
+                console.error('error parsing metadata', e);
+            }
+            const map = null;
+            if (metadata.stylex != null && metadata.stylex.length > 0) {
+                const oldRules = stylexRules[filename] || [];
+                stylexRules[filename] = metadata.stylex?.map((rule) => [rule.class_name, rule.style, rule.priority]);
+                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/index.d.ts

@@ -0,0 +1,109 @@
+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';
+declare function StylexNextJSPlugin({ rootDir, filename, ...pluginOptions }: any): (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;
+    }) => import("next/dist/server/config-shared").ExportPathMap | Promise<import("next/dist/server/config-shared").ExportPathMap>) | undefined;
+    i18n?: import("next/dist/server/config-shared").I18NConfig | null | undefined;
+    eslint?: import("next/dist/server/config-shared").ESLintConfig | undefined;
+    typescript?: import("next/dist/server/config-shared").TypeScriptConfig | undefined;
+    headers?: (() => Promise<import("next/dist/lib/load-custom-routes").Header[]>) | undefined;
+    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[];
+    }>) | undefined;
+    redirects?: (() => Promise<import("next/dist/lib/load-custom-routes").Redirect[]>) | undefined;
+    excludeDefaultMomentLocales?: boolean | undefined;
+    trailingSlash?: boolean | undefined;
+    env?: Record<string, string | undefined> | undefined;
+    distDir?: string | undefined;
+    cleanDistDir?: boolean | undefined;
+    assetPrefix?: string | undefined;
+    cacheHandler?: string | undefined;
+    cacheMaxMemorySize?: number | undefined;
+    useFileSystemPublicRoutes?: boolean | undefined;
+    generateBuildId?: (() => string | Promise<string | null> | null) | undefined;
+    generateEtags?: boolean | undefined;
+    pageExtensions?: string[] | undefined;
+    compress?: boolean | undefined;
+    analyticsId?: string | undefined;
+    poweredByHeader?: boolean | undefined;
+    images?: Partial<import("next/dist/shared/lib/image-config").ImageConfigComplete> | undefined;
+    devIndicators?: {
+        buildActivity?: boolean | undefined;
+        buildActivityPosition?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | undefined;
+    } | undefined;
+    onDemandEntries?: {
+        maxInactiveAge?: number | undefined;
+        pagesBufferLength?: number | undefined;
+    } | undefined;
+    amp?: {
+        canonicalBase?: string | undefined;
+    } | undefined;
+    deploymentId?: string | undefined;
+    basePath?: string | undefined;
+    sassOptions?: {
+        [key: string]: any;
+    } | undefined;
+    productionBrowserSourceMaps?: boolean | undefined;
+    optimizeFonts?: boolean | undefined;
+    reactProductionProfiling?: boolean | undefined;
+    reactStrictMode?: boolean | null | undefined;
+    publicRuntimeConfig?: {
+        [key: string]: any;
+    } | undefined;
+    serverRuntimeConfig?: {
+        [key: string]: any;
+    } | undefined;
+    httpAgentOptions?: {
+        keepAlive?: boolean | undefined;
+    } | undefined;
+    outputFileTracing?: boolean | undefined;
+    staticPageGenerationTimeout?: number | undefined;
+    crossOrigin?: "anonymous" | "use-credentials" | undefined;
+    swcMinify?: boolean | undefined;
+    compiler?: {
+        reactRemoveProperties?: boolean | {
+            properties?: string[] | undefined;
+        } | undefined;
+        relay?: {
+            src: string;
+            artifactDirectory?: string | undefined;
+            language?: "typescript" | "javascript" | "flow" | undefined;
+            eagerEsModules?: boolean | undefined;
+        } | undefined;
+        removeConsole?: boolean | {
+            exclude?: string[] | undefined;
+        } | undefined;
+        styledComponents?: boolean | import("next/dist/server/config-shared").StyledComponentsConfig | undefined;
+        emotion?: boolean | import("next/dist/server/config-shared").EmotionConfig | undefined;
+        styledJsx?: boolean | {
+            useLightningcss?: boolean | undefined;
+        } | undefined;
+    } | undefined;
+    output?: "standalone" | "export" | undefined;
+    skipMiddlewareUrlNormalize?: boolean | undefined;
+    skipTrailingSlashRedirect?: boolean | undefined;
+    modularizeImports?: Record<string, {
+        transform: string | Record<string, string>;
+        preventFullImport?: boolean | undefined;
+        skipDefaultConversion?: boolean | undefined;
+    }> | undefined;
+    logging?: {
+        fetches?: {
+            fullUrl?: boolean | undefined;
+        } | undefined;
+    } | undefined;
+    experimental?: import("next/dist/server/config-shared").ExperimentalConfig | undefined;
+};
+export default StylexNextJSPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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;AAG3E,iBAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,QAA8B,EAAE,GAAG,aAAa,EAAE,EAAE,GAAG,iBACxE,UAAU;;oBAIV,aAAa,GAAG,oBAAoB,WAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CxF;AAED,eAAe,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,52 @@
+"use strict";
+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"));
+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'),
+                    filename,
+                    dev,
+                    ...pluginOptions,
+                };
+                const stylexPlugin = new custom_webpack_plugin_1.default(webpackPluginOptions);
+                config.plugins?.push(stylexPlugin);
+                return config;
+            },
+        };
+    };
+}
+exports.default = StylexNextJSPlugin;
+module.exports = StylexNextJSPlugin;

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1 @@
+{"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

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@stylexswc/nextjs-plugin",
+  "description": "Stylex NextJS plugin with swc plugin",
+  "version": "0.1.0",
+  "config": {
+    "scripty": {
+      "path": "../../scripts/packages"
+    }
+  },
+  "devDependencies": {
+    "@babel/types": "^7.23.9",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^20.12.11",
+    "next": "^14.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.88.2",
+    "@stylexswc/eslint-config": "0.1.0",
+    "@stylexswc/typescript-config": "0.1.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "next",
+    "nextjs",
+    "nextjs-plugin",
+    "stylex"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@stylexjs/babel-plugin": "^0.6.1",
+    "next": ">=14.0.1"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "dwlad90/stylex-swc-plugin",
+  "sideEffects": false,
+  "scripts": {
+    "build": "scripty --ts",
+    "clean": "del-cli dist",
+    "precommit": "lint-staged",
+    "prepush": "lint-prepush",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  }
+}