stylex-webpack 0.1.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sukka
+
+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/dist/index.d.ts

@@ -0,0 +1,40 @@
+import webpack from 'webpack';
+import { Options, Rule } from '@stylexjs/babel-plugin';
+
+interface StyleXPluginOption {
+    stylexOption?: Partial<Options>;
+    /**
+     * Specify where to inject the StyleX generated CSS
+     *
+     * @default (filename) => filename.endsWith('stylex.css')
+     */
+    appendTo?: (assetPath: string) => boolean;
+    /**
+     * Specify where stylex will be imported from
+     *
+     * @default ['stylex', '@stylexjs/stylex']
+     */
+    stylexImports?: string[];
+    /**
+     * Whether to use CSS layers
+     *
+     * @default false
+     */
+    useCSSLayers?: boolean;
+    /**
+     * Enable stylex's unstable_moduleResolution and specify rootDir
+     */
+    rootDir?: string;
+}
+type RegisterStyleXRules = (resourcePath: string, stylexRules: Rule[]) => void;
+declare class StyleXPlugin {
+    static stylexLoader: string;
+    stylexRules: Map<string, readonly Rule[]>;
+    readonly stylexImports: string[];
+    useCSSLayers: boolean;
+    stylexOption: Partial<Options>;
+    constructor({ stylexImports, useCSSLayers, stylexOption }?: StyleXPluginOption);
+    apply(compiler: webpack.Compiler): void;
+}
+
+export { type RegisterStyleXRules, StyleXPlugin, type StyleXPluginOption };

package/dist/index.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var stylexBabelPlugin = require('@stylexjs/babel-plugin');
+var path = require('path');
+
+const PLUGIN_NAME = 'stylex';
+const VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
+const VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+// Webpack does not export these constants
+// https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/OptimizationStages.js#L8
+const OPTIMIZE_CHUNKS_STAGE_ADVANCED = 10;
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+const stylexLoaderPath = require.resolve('./stylex-loader');
+const getStyleXRules = (stylexRules, useCSSLayers)=>{
+    if (stylexRules.size === 0) {
+        return null;
+    }
+    // Take styles for the modules that were included in the last compilation.
+    const allRules = Array.from(stylexRules.values()).flat();
+    return stylexBabelPlugin.processStylexRules(allRules, useCSSLayers);
+};
+class StyleXPlugin {
+    apply(compiler) {
+        // If splitChunk is enabled, we create a dedicated chunk for stylex css
+        if (!compiler.options.optimization.splitChunks) {
+            throw new Error([
+                'You don\'t have "optimization.splitChunks" enabled.',
+                '"optimization.splitChunks" should be enabled for "stylex-webpack" to function properly.'
+            ].join(' '));
+        }
+        // const IS_RSPACK = Object.prototype.hasOwnProperty.call(compiler.webpack, 'rspackVersion');
+        // stylex-loader adds virtual css import (which triggers virtual-loader)
+        // This prevents "stylex.virtual.css" files from being tree shaken by forcing
+        // "sideEffects" setting.
+        compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf)=>{
+            nmf.hooks.createModule.tap(PLUGIN_NAME, (createData)=>{
+                const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
+                if (modPath === VIRTUAL_CSS_PATH) {
+                    var _createData;
+                    (_createData = createData).settings ?? (_createData.settings = {});
+                    createData.settings.sideEffects = true;
+                }
+            });
+        });
+        const { Compilation, NormalModule, sources } = compiler.webpack;
+        const { ConcatSource, RawSource } = sources;
+        // Apply loader to JS modules
+        compiler.hooks.make.tap(PLUGIN_NAME, (compilation)=>{
+            NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, mod)=>{
+                const extname = path.extname(mod.resource);
+                if (// JavaScript (and Flow) modules
+                /\.jsx?/.test(extname) || /\.tsx?/.test(extname)) {
+                    loaderContext.StyleXWebpackContextKey = {
+                        registerStyleXRules: (resourcePath, stylexRules)=>{
+                            this.stylexRules.set(resourcePath, stylexRules);
+                        }
+                    };
+                    // 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.
+                    mod.loaders.push({
+                        loader: stylexLoaderPath,
+                        options: {
+                            stylexImports: this.stylexImports,
+                            stylexOption: this.stylexOption
+                        },
+                        ident: null,
+                        type: null
+                    });
+                }
+            });
+            // Create a "stylex" chunk to hold all collected virtual stylex css
+            // This eliminates the need for manually specify splitChunks.cacheGroups.stylex
+            compilation.hooks.optimizeChunks.tap({
+                name: PLUGIN_NAME,
+                stage: OPTIMIZE_CHUNKS_STAGE_ADVANCED
+            }, ()=>{
+                const stylexChunk = compilation.namedChunks.get('stylex') || compilation.addChunk('stylex');
+                const matchingChunks = new Set();
+                let moduleIndex = 0;
+                for (const module of compilation.modules){
+                    const moduleName = module.nameForCondition();
+                    if (module.type === 'css/mini-extract' && moduleName && VIRTUAL_CSS_PATTERN.test(moduleName)) {
+                        const moduleChunks = compilation.chunkGraph.getModuleChunksIterable(module);
+                        for (const chunk of moduleChunks){
+                            compilation.chunkGraph.disconnectChunkAndModule(chunk, module);
+                            for (const group of chunk.groupsIterable){
+                                group.setModulePostOrderIndex(module, moduleIndex++);
+                            }
+                            matchingChunks.add(chunk);
+                        }
+                        compilation.chunkGraph.connectChunkAndModule(stylexChunk, module);
+                    }
+                }
+                for (const chunk of matchingChunks){
+                    chunk.split(stylexChunk);
+                }
+            });
+            compilation.hooks.processAssets.tap({
+                name: PLUGIN_NAME,
+                stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
+            }, (assets)=>{
+                const cssFileName = Object.keys(assets).find((filename)=>filename.endsWith('stylex.css'));
+                if (cssFileName) {
+                    const cssAsset = assets[cssFileName];
+                    const stylexCSS = getStyleXRules(this.stylexRules, this.useCSSLayers);
+                    if (stylexCSS != null) {
+                        assets[cssFileName] = new ConcatSource(cssAsset, new RawSource(stylexCSS));
+                    }
+                }
+            });
+        });
+    }
+    constructor({ stylexImports = [
+        'stylex',
+        '@stylexjs/stylex'
+    ], useCSSLayers = false, stylexOption = {} } = {}){
+        _define_property(this, "stylexRules", new Map());
+        _define_property(this, "stylexImports", []);
+        _define_property(this, "useCSSLayers", void 0);
+        _define_property(this, "stylexOption", void 0);
+        this.useCSSLayers = useCSSLayers;
+        this.stylexOption = {
+            dev: process.env.NODE_ENV === 'development',
+            useRemForFontSize: true,
+            runtimeInjection: false,
+            genConditionalClasses: true,
+            treeshakeCompensation: true,
+            importSources: stylexImports,
+            ...stylexOption
+        };
+        this.stylexImports = stylexImports;
+    }
+}
+_define_property(StyleXPlugin, "stylexLoader", stylexLoaderPath);
+
+exports.StyleXPlugin = StyleXPlugin;

package/dist/next.d.ts

@@ -0,0 +1,32 @@
+import { NextConfig } from 'next/dist/server/config-shared';
+import { Options } from '@stylexjs/babel-plugin';
+
+interface StyleXPluginOption {
+    stylexOption?: Partial<Options>;
+    /**
+     * Specify where to inject the StyleX generated CSS
+     *
+     * @default (filename) => filename.endsWith('stylex.css')
+     */
+    appendTo?: (assetPath: string) => boolean;
+    /**
+     * Specify where stylex will be imported from
+     *
+     * @default ['stylex', '@stylexjs/stylex']
+     */
+    stylexImports?: string[];
+    /**
+     * Whether to use CSS layers
+     *
+     * @default false
+     */
+    useCSSLayers?: boolean;
+    /**
+     * Enable stylex's unstable_moduleResolution and specify rootDir
+     */
+    rootDir?: string;
+}
+
+declare const _default: (pluginOptions?: StyleXPluginOption) => (nextConfig?: NextConfig) => NextConfig;
+
+export { _default as default };

package/dist/next.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var nextMiniCssExtractPluginExports = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var log = require('next/dist/build/output/log');
+var index = require('./index');
+
+require.resolve('./stylex.virtual.css');
+const VIRTUAL_CSS_PATTERN = /stylex\.virtual\.css/;
+
+/** Next.js' precompilation add "__esModule: true", but doesn't add an actual default exports */ // @ts-expect-error -- Next.js fucks something up
+const NextMiniCssExtractPlugin = nextMiniCssExtractPluginExports.default;
+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('next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement');
+            return NextMiniCssExtractPlugin;
+        } catch  {
+            log.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(options, MiniCssExtractPlugin) {
+    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 (!options.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: `${options.assetPrefix}/_next/`,
+                esModule: false
+            }
+        });
+    }
+    return loaders;
+}
+module.exports = (pluginOptions)=>(nextConfig = {})=>{
+        return {
+            ...nextConfig,
+            webpack (config, ctx) {
+                var // For some reason, Next 11.0.1 has `config.optimization.splitChunks`
+                // set to `false` when webpack 5 is enabled.
+                _config_optimization, _config_optimization_splitChunks;
+                if (typeof nextConfig.webpack === 'function') {
+                    config = nextConfig.webpack(config, ctx);
+                }
+                (_config_optimization = config.optimization).splitChunks || (_config_optimization.splitChunks = {});
+                (_config_optimization_splitChunks = config.optimization.splitChunks).cacheGroups || (_config_optimization_splitChunks.cacheGroups = {});
+                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)=>Array.isArray(rule.oneOf) && rule.oneOf.some(({ test })=>typeof test === 'object' && typeof test.test === 'function' && test.test('filename.css'))).oneOf;
+                // Here we matches virtual css file emitted by Style9Plugin
+                cssRules.unshift({
+                    test: VIRTUAL_CSS_PATTERN,
+                    use: getStyleXVirtualCssLoader(ctx, MiniCssExtractPlugin)
+                });
+                // 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,
+                        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 index.StyleXPlugin({
+                    ...pluginOptions,
+                    stylexOption: {
+                        ...pluginOptions?.stylexOption,
+                        dev: ctx.dev
+                    }
+                }));
+                return config;
+            }
+        };
+    };

package/dist/stylex-loader.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var core = require('@babel/core');
+var stylexBabelPlugin = require('@stylexjs/babel-plugin');
+
+function stringifyRequest(loaderContext, request) {
+    return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
+}
+
+const VIRTUAL_CSS_PATH = require.resolve('./stylex.virtual.css');
+const isSupplementedLoaderContext = (context)=>{
+    // eslint-disable-next-line prefer-object-has-own -- target older
+    return Object.prototype.hasOwnProperty.call(context, 'StyleXWebpackContextKey');
+};
+
+const PLUGIN_NAME = 'stylex';
+async function stylexLoader(inputCode, inputSourceMap) {
+    const callback = this.async();
+    const { stylexImports, stylexOption } = this.getOptions();
+    // bail out early if the input doesn't contain stylex imports
+    if (!stylexImports.some((importName)=>inputCode.includes(importName))) {
+        return callback(null, inputCode, inputSourceMap);
+    }
+    if (!isSupplementedLoaderContext(this)) {
+        return callback(new Error('stylex-loader: loader context is not SupplementedLoaderContext!'));
+    }
+    try {
+        const { code, map, metadata } = await core.transformAsync(inputCode, {
+            babelrc: false,
+            inputSourceMap,
+            sourceFileName: this.resourcePath,
+            filename: this.resourcePath,
+            parserOpts: {
+                plugins: /\.tsx?$/.test(this.resourcePath) ? [
+                    'typescript',
+                    'jsx'
+                ] : [
+                    'jsx'
+                ]
+            },
+            plugins: [
+                stylexBabelPlugin.withOptions(stylexOption)
+            ]
+        });
+        const logger = this._compiler?.getInfrastructureLogger(PLUGIN_NAME);
+        // If metadata.stylex doesn't exist at all, we only need to return the transformed code
+        if (!metadata || !('stylex' in metadata) || metadata.stylex == null) {
+            logger?.debug(`No stylex styles generated from ${this.resourcePath}`);
+            return callback(null, code ?? undefined, map ?? undefined);
+        }
+        // this.stylexRules[filename] = metadata.stylex;
+        logger?.debug(`Read stylex styles from ${this.resourcePath}:`, metadata.stylex);
+        this.StyleXWebpackContextKey.registerStyleXRules(this.resourcePath, metadata.stylex);
+        const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${JSON.stringify(metadata.stylex)}`);
+        const postfix = `\nimport ${virtualCssRequest};`;
+        return callback(null, code + postfix, map ?? undefined);
+    } catch (error) {
+        return callback(error);
+    }
+}
+
+module.exports = stylexLoader;

package/dist/stylex.virtual.css

@@ -0,0 +1,7 @@
+/*
+ * This is a noop file for extracted CSS source to point to, as webpack
+ * requires a file to exist on disk for virtual source files
+ *
+ * The filename "virtual.stylexrules" is intensionally chose to be not
+ * matched by any other loaders
+ */

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "stylex-webpack",
+  "version": "0.1.1-beta.1",
+  "description": "The another Webpack Plugin for Facebook's StyleX",
+  "homepage": "https://github.com/SukkaW/style9-webpack#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SukkaW/stylex-webpack.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SukkaW/style9-webpack/issues"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "next.js"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.ts --configPlugin swc3 --bundleConfigAsCjs",
+    "prerelease": "npm run build",
+    "lint": "eslint --format=sukka .",
+    "test": "mocha --require @swc-node/register test/index.ts",
+    "test:update": "mocha --update --require @swc-node/register test/index.ts",
+    "release": "bumpp -r --all --commit=\"release: %s\" --tag=\"%s\""
+  },
+  "keywords": [
+    "css",
+    "atomic-css",
+    "stylex",
+    "css-in-js",
+    "webpack",
+    "nextjs",
+    "app-router"
+  ],
+  "author": "Sukka <https://skk.moe>",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@stylexjs/babel-plugin": "^0.5.1",
+    "loader-utils": "^3.2.1"
+  },
+  "devDependencies": {
+    "@eslint-sukka/node": "^5.1.0",
+    "@eslint-sukka/ts": "^5.1.0",
+    "@swc-node/register": "^1.8.0",
+    "@swc/core": "^1.4.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/chai": "^4.3.11",
+    "@types/loader-utils": "^2.0.6",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^20.11.17",
+    "bumpp": "^9.3.0",
+    "chai": "^4.4.1",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.56.0",
+    "eslint-config-sukka": "^5.1.0",
+    "eslint-formatter-sukka": "^5.1.0",
+    "memfs": "^4.7.0",
+    "mini-css-extract-plugin": "^2.8.0",
+    "mocha": "^10.3.0",
+    "mocha-chai-jest-snapshot": "^1.1.4",
+    "next": "^14.1.0",
+    "rollup": "^4.10.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-swc3": "^0.11.0",
+    "swc-loader": "^0.2.6",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.1"
+  },
+  "peerDependencies": {
+    "@stylexjs/stylex": "*"
+  },
+  "overrides": {
+    "chai": "$chai"
+  }
+}