@stylexswc/nextjs-plugin 0.2.4 → 0.3.0-rc.1

package/README.md

@@ -1,35 +1,41 @@
-# SWC Stylex plugin for Next.js
+# Next.js plugin with NAPI-RS StyleX compiler integration
 
 Next.js plugin for an unofficial
-[`StyleX SWC`](https://github.com/dwlad90/stylex-swc-plugin/tree/master/crates/stylex-swc-plugin)
-plugin.
+[`napi-rs`](https://github.com/dwlad90/stylex-swc-plugin/tree/master/crates/stylex-rs-compiler)
+compiler that includes the StyleX SWC code transformation under the hood.
 
-## Why SWC instead of Babel
+## Overview
 
-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.
+This package combines two solutions to enhance your Next.js development experience with StyleX:
 
-However, if you have a Babel config, the application will out put of SWC
-Compiler and continue to use Babel.
+### StyleX SWC Plugin
 
-This plugin allows us to use StyleX and take advantage of SWC Compiler.
+* 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.
 
-**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.
+### 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.
+
+## 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.
 
 ## Installation
 
-Install the package and SWC plugin by using:
+To install the package, run the following command:
 
 ```bash
 npm install --save-dev @stylexswc/nextjs-plugin
 ```
 
-Please install `@stylexswc/swc-plugin` if you haven't done so already:
+Please install `@stylexswc/rs-compiler` if you haven't done so already:
 
 ```bash
-npm install --save-dev @stylexswc/swc-plugin
+npm install --save-dev @stylexswc/rs-compiler
 ```
 
 ## Usage
@@ -46,34 +52,28 @@ const nextConfig = {
   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,
+  // Stylex RS compiler options
+  dev: false,
+  runtimeInjection: false,
+  genConditionalClasses: true,
+  treeshakeCompensation: true,
+  unstable_moduleResolution: {
+    type: 'commonJS',
+    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)
+* [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)
+* [StyleX Documentation](https://stylexjs.com)
+* [SWC plugin for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/master/packages/swc-plugin)

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

@@ -1,19 +1,19 @@
 import type { Compiler } from 'webpack';
+import type { StyleXOptions } from '@stylexswc/rs-compiler';
 declare class StylexPlugin {
     filesInLastRun: any;
-    filePath: any;
-    dev: any;
+    filePath?: string | null;
+    dev: boolean;
     appendTo: any;
-    filename: any;
-    babelConfig: any;
+    filename?: string;
     stylexImports: any[];
-    babelPlugin: any;
     useCSSLayers: any;
-    constructor({ dev, appendTo, filename, stylexImports, 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: null;
+        map: string | undefined;
     } | {
         code: string;
         map?: undefined;

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

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

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (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' || process.env.BABEL_ENV === 'development';
+const IS_DEV_ENV = process.env.NODE_ENV === 'development';
 const { RawSource, ConcatSource } = webpack_1.default.sources;
 const stylexRules = {};
 const cssFiles = new Set();
@@ -20,16 +21,16 @@ class StylexPlugin {
     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, } = {}) {
+    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 => {
@@ -40,9 +41,8 @@ class StylexPlugin {
                 /\.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.
+                    // 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 },
@@ -63,8 +63,8 @@ class StylexPlugin {
                 // Take styles for the modules that were included in the last compilation.
                 const allRules = Object.keys(stylexRules)
                     .map(filename => stylexRules[filename])
-                    .filter(Boolean)
-                    .flat();
+                    .flat()
+                    .filter((rule) => !!rule);
                 return babel_plugin_1.default.processStylexRules(allRules, this.useCSSLayers);
             };
             if (this.appendTo) {
@@ -78,12 +78,9 @@ class StylexPlugin {
                     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);
-                        }
+                        const updatedSource = new ConcatSource(new RawSource(assets[cssFileName]?.source() || ''), new RawSource(stylexCSS));
+                        compilation.updateAsset(cssFileName, updatedSource);
+                        compilers.add(compiler);
                     }
                 });
             }
@@ -92,7 +89,7 @@ class StylexPlugin {
                 compilation.hooks.additionalAssets.tap(PLUGIN_NAME, () => {
                     try {
                         const collectedCSS = getStyleXRules();
-                        if (collectedCSS) {
+                        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));
@@ -113,22 +110,13 @@ class StylexPlugin {
         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;
+            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?.map((rule) => [rule.class_name, rule.style, rule.priority]);
+                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]));
@@ -145,8 +133,8 @@ class StylexPlugin {
                         });
                     });
                 }
-                return { code, map };
             }
+            return { code, map };
         }
         return { code: inputCode };
     }

package/dist/index.d.ts

@@ -2,7 +2,12 @@ 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) => {
+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: {

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;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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CxF;AAED,eAAe,kBAAkB,CAAC"}

package/dist/index.js

@@ -39,7 +39,7 @@ function StylexNextJSPlugin({ rootDir, filename = 'stylex-bundle.css', ...plugin
                     appendTo: (name) => name.endsWith('.css'),
                     filename,
                     dev,
-                    ...pluginOptions,
+                    rsOptions: pluginOptions,
                 };
                 const stylexPlugin = new custom_webpack_plugin_1.default(webpackPluginOptions);
                 config.plugins?.push(stylexPlugin);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stylexswc/nextjs-plugin",
-  "description": "Stylex NextJS plugin with swc plugin",
-  "version": "0.2.4",
+  "description": "Stylex NextJS plugin with NAPI-RS compiler",
+  "version": "0.3.0-rc.1",
   "config": {
     "scripty": {
       "path": "../../scripts/packages"
@@ -15,8 +15,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "webpack": "^5.88.2",
-    "@stylexswc/eslint-config": "0.2.4",
-    "@stylexswc/typescript-config": "0.2.4"
+    "@stylexswc/typescript-config": "0.3.0-rc.1",
+    "@stylexswc/rs-compiler": "0.3.0-rc.1",
+    "@stylexswc/eslint-config": "0.3.0-rc.1"
   },
   "files": [
     "dist"
@@ -35,9 +36,10 @@
   },
   "private": false,
   "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "repository": "dwlad90/stylex-swc-plugin",
+  "repository": "https://github.com/Dwlad90/stylex-swc-plugin",
   "sideEffects": false,
   "scripts": {
     "build": "scripty --ts",