@stylexswc/rollup-plugin 0.4.0-rc.1

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,55 @@
+# Webpack plugin with NAPI-RS StyleX compiler integration
+
+`Webpack plugin` for an unofficial
+[`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.
+
+## Installation
+
+To install the package, run the following command:
+
+```bash
+npm install --save-dev @stylexswc/webpack-plugin
+```
+
+Please install `@stylexswc/rs-compiler` if you haven't done so already:
+
+```bash
+npm install --save-dev @stylexswc/rs-compiler
+```
+
+## Usage
+
+Modify Webpack config. For example:
+
+```js
+const StylexPlugin = require('@stylexswc/webpack-plugin');
+const path = require('path');
+
+const config = (env, argv) => ({
+  entry: {
+    main: './js/index.js',
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  plugins: [
+    new StylexPlugin({
+      filename: 'styles.[contenthash].css',
+      dev: argv.mode === 'development',
+    }),
+  ],
+  cache: true,
+});
+
+module.exports = config;
+```
+
+## Plugin Options
+The options are similar like `@stylexjs/babel-plugin` and can be found [here](https://stylexjs.com/docs/api/configuration/babel-plugin/)
+
+## Documentation
+
+* [StyleX Documentation](https://stylexjs.com)
+* [NAPI-RS compiler for StyleX](https://github.com/Dwlad90/stylex-swc-plugin/tree/master/crates/stylex-rs-compiler)

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import type { TransformOptions } from 'lightningcss';
+import type { Plugin } from 'rollup';
+import type { StyleXOptions } from '@stylexswc/rs-compiler';
+export type PluginOptions = {
+    rsOptions?: StyleXOptions;
+    fileName?: string;
+    useCSSLayers?: boolean;
+    lightningcssOptions?: Omit<TransformOptions<{}>, 'code' | 'filename' | 'visitor'>;
+};
+export default function stylexPlugin({ rsOptions, fileName, useCSSLayers, lightningcssOptions, }?: PluginOptions): Plugin;
+//# 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":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAA0D,MAAM,QAAQ,CAAC;AAK7F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,SAAc,EACd,QAAuB,EACvB,YAAoB,EACpB,mBAAmB,GACpB,GAAE,aAAkB,GAAG,MAAM,CAiG7B"}

package/dist/index.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const rs_compiler_1 = __importDefault(require("@stylexswc/rs-compiler"));
+const lightningcss_1 = require("lightningcss");
+const browserslist_1 = __importDefault(require("browserslist"));
+const lightningcss_2 = require("lightningcss");
+const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
+const IS_DEV_ENV = process.env.NODE_ENV === 'development';
+function stylexPlugin({ rsOptions = {}, fileName = 'stylex.css', useCSSLayers = false, lightningcssOptions, } = {}) {
+    const { dev = IS_DEV_ENV, unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() }, importSources = ['stylex', '@stylexjs/stylex'], ...options } = rsOptions;
+    let stylexRules = {};
+    return {
+        name: 'rollup-plugin-stylex',
+        buildStart() {
+            stylexRules = {};
+        },
+        generateBundle() {
+            const rules = Object.values(stylexRules).flat();
+            if (rules.length > 0) {
+                const collectedCSS = babel_plugin_1.default.processStylexRules(rules, useCSSLayers);
+                // Process the CSS using lightningcss
+                const { code } = (0, lightningcss_1.transform)({
+                    targets: (0, lightningcss_2.browserslistToTargets)((0, browserslist_1.default)('>= 1%')),
+                    ...lightningcssOptions,
+                    filename: fileName,
+                    code: Buffer.from(collectedCSS),
+                });
+                // Convert the Buffer back to a string
+                const processedCSS = code.toString();
+                this.emitFile({
+                    fileName,
+                    source: processedCSS,
+                    type: 'asset',
+                });
+            }
+        },
+        shouldTransformCachedModule({ code: _code, id, meta }) {
+            stylexRules[id] = meta.stylex;
+            return false;
+        },
+        async transform(inputCode, id) {
+            if (!importSources.some(importName => typeof importName === 'string'
+                ? inputCode.includes(importName)
+                : inputCode.includes(importName.from))) {
+                // In rollup, returning null from any plugin phase means
+                // "no changes made".
+                return null;
+            }
+            let result = rs_compiler_1.default.transform(id, inputCode, {
+                ...options,
+                dev,
+                unstable_moduleResolution,
+                importSources,
+            });
+            if (result == null) {
+                console.warn('stylex: transformAsync returned null');
+                return { code: inputCode };
+            }
+            const { code, map, metadata } = result;
+            if (code == null) {
+                console.warn('stylex: transformAsync returned null code');
+                return { code: inputCode };
+            }
+            if (this.meta.watchMode) {
+                const ast = this.parse(code);
+                for (const stmt of ast.body) {
+                    if (stmt.type === 'ImportDeclaration') {
+                        const resolved = await this.resolve(stmt.source.value?.toString() || '', id);
+                        if (resolved && !resolved.external) {
+                            const result = await this.load(resolved);
+                            if (result && result.meta && 'stylex' in result.meta) {
+                                stylexRules[resolved.id] = result.meta.stylex;
+                            }
+                        }
+                    }
+                }
+            }
+            if (!dev && metadata.stylex != null && metadata.stylex.length > 0) {
+                stylexRules[id] = metadata.stylex;
+            }
+            return { code, map: map, meta: metadata };
+        },
+    };
+}
+exports.default = stylexPlugin;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@stylexswc/rollup-plugin",
+  "description": "Stylex rollup plugin with NAPI-RS compiler",
+  "version": "0.4.0-rc.1",
+  "config": {
+    "scripty": {
+      "path": "../../scripts/packages"
+    }
+  },
+  "dependencies": {
+    "@stylexjs/babel-plugin": "0.8.0",
+    "@stylexswc/rs-compiler": "0.4.0-rc.1",
+    "lightningcss": "^1.27.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.8.5",
+    "browserslist": "^4.24.2",
+    "rollup": "^4.24.3"
+  },
+  "files": [
+    "dist"
+  ],
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "__builds__",
+      "/__fixtures__/"
+    ],
+    "testEnvironment": "node"
+  },
+  "keywords": [
+    "rollup-plugin",
+    "rolup",
+    "stylex"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": "https://github.com/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"
+  }
+}