@stylexswc/webpack-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/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/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# 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":""}

package/dist/index.js

@@ -0,0 +1,153 @@
+"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 { 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;
+class StylexPlugin {
+    filesInLastRun = null;
+    filePath = null;
+    dev;
+    appendTo;
+    filename;
+    stylexImports;
+    useCSSLayers;
+    rsOptions;
+    stylexRules = {};
+    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, (loaderContext, module) => {
+                if (
+                // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts
+                /\.[mc]?[jt]sx?$/.test(path_1.default.extname(module.resource))) {
+                    // It might make sense to 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, 'loader.js'),
+                        options: { stylexPlugin: this },
+                        ident: null,
+                        type: null,
+                    });
+                }
+            });
+            // Make a list of all modules that were included in the last compilation.
+            // This might need to be tweaked if not all files are included after a change
+            compilation.hooks.finishModules.tap(PLUGIN_NAME, modules => {
+                this.filesInLastRun = [...modules.values()].map(m => m.resource);
+            });
+            const getStyleXRules = () => {
+                const { stylexRules } = this;
+                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)
+                    .filter(filename => this.filesInLastRun == null ? true : this.filesInLastRun.includes(filename))
+                    .map(filename => stylexRules[filename])
+                    .flat()
+                    .filter(Boolean);
+                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));
+                    if (cssFileName) {
+                        const cssAsset = assets[cssFileName];
+                        const stylexCSS = getStyleXRules();
+                        if (stylexCSS != null && cssAsset) {
+                            assets[cssFileName] = new ConcatSource(cssAsset, new RawSource(stylexCSS));
+                        }
+                    }
+                });
+            }
+            else {
+                // We'll emit an asset ourselves. This comes with some complications in from Webpack.
+                // If the filename contains replacement tokens, like [contenthash], we need to
+                // process those tokens ourselves. Webpack does provide a way to reuse the configured
+                // hashing functions. We'll take advantage of that to process tokens.
+                const getContentHash = (source) => {
+                    const { outputOptions } = compilation;
+                    const { hashDigest, hashDigestLength, hashFunction, hashSalt } = outputOptions;
+                    const hash = compiler.webpack.util.createHash(hashFunction);
+                    if (hashSalt) {
+                        hash.update(hashSalt);
+                    }
+                    hash.update(source);
+                    const fullContentHash = hash.digest(hashDigest);
+                    return fullContentHash.toString().slice(0, hashDigestLength);
+                };
+                // Consume collected rules and emit the stylex CSS asset
+                compilation.hooks.processAssets.tap({
+                    name: PLUGIN_NAME,
+                    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+                }, () => {
+                    try {
+                        const collectedCSS = getStyleXRules();
+                        if (collectedCSS && this.filename) {
+                            // build up a content hash for the rules using webpack's configured hashing functions
+                            const contentHash = getContentHash(collectedCSS);
+                            // pretend to be a chunk so we can reuse the webpack routine to process the filename and do token replacement
+                            // see https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L4733
+                            // see https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js#L102
+                            const data = {
+                                filename: this.filename,
+                                contentHash: contentHash,
+                                chunk: {
+                                    id: this.filename,
+                                    name: path_1.default.parse(this.filename).name,
+                                    hash: contentHash,
+                                },
+                            };
+                            const { path: hashedPath, info: assetsInfo } = compilation.getPathWithInfo(data.filename, data);
+                            compilation.emitAsset(hashedPath, new RawSource(collectedCSS), assetsInfo);
+                        }
+                    }
+                    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) {
+        if (this.stylexImports.some(importName => inputCode.includes(importName))) {
+            const originalSource = inputCode;
+            let result = (0, rs_compiler_1.transform)(filename, originalSource, this.rsOptions);
+            const metadata = result?.metadata;
+            const code = result.code;
+            const map = result.map;
+            if (metadata.stylex != null && metadata.stylex.length > 0) {
+                this.stylexRules[filename] = metadata.stylex;
+                logger.debug(`Read stylex styles from ${filename}:`, metadata.stylex);
+            }
+            return { code, map };
+        }
+        return { code: inputCode };
+    }
+}
+module.exports = StylexPlugin;

package/dist/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=loader.d.ts.map

package/dist/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/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,QAa7F;AAED,eAAe,YAAY,CAAC"}

package/dist/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/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@stylexswc/webpack-plugin",
+  "description": "Stylex webpack plugin with NAPI-RS compiler",
+  "version": "0.4.0-rc.1",
+  "config": {
+    "scripty": {
+      "path": "../../scripts/packages"
+    }
+  },
+  "dependencies": {
+    "@stylexjs/babel-plugin": "^0.8.0"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.23.9",
+    "@stylexswc/eslint-config": "0.4.0-rc.1",
+    "@stylexswc/rs-compiler": "0.4.0-rc.1",
+    "@stylexswc/typescript-config": "0.4.0-rc.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^20.12.11",
+    "webpack": "^5.88.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "stylex",
+    "webpack",
+    "webpack-plugin"
+  ],
+  "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"
+  }
+}