@stylexswc/postcss-plugin 0.6.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,139 @@
+# PostCSS plugin with NAPI-RS StyleX compiler integration
+
+`PostCSS plugin` for an unofficial
+[`napi-rs`](https://github.com/dwlad90/stylex-swc-plugin/tree/develop/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/postcss-plugin
+```
+
+## Usage
+
+Modify `postcss.config.js`. For example:
+
+```js
+module.exports = {
+  plugins: {
+    '@stylexjs/postcss-plugin': {
+      include: ['src/**/*.{js,jsx,ts,tsx}'],
+    },
+    autoprefixer: {},
+  },
+};
+```
+
+Use on of the plugins to process JS/TS files with StyleX code. For example:
+
+```js
+/// next.config.js
+const path = require('path');
+const stylexPlugin = require('@stylexswc/nextjs-plugin');
+const rootDir = __dirname;
+
+module.exports = stylexPlugin({
+  // Add any StyleX options here
+  rsOptions: {
+    aliases: {
+      '@/*': [path.join(rootDir, '*')],
+    },
+    unstable_moduleResolution: {
+      type: 'commonJS',
+    },
+  },
+  // It's important to prevent creating a new CSS file with StyleX classes twice
+  extractCSS: false,
+})({
+  transpilePackages: ['@stylexjs/open-props'],
+  // Optionally, add any other Next.js config below
+});
+```
+
+> [!WARNING]
+> Each plugin of `@stylexswc` namespace accepts an `extractCSS` option to control CSS
+> extraction. When using the `postcss` plugin, this option should be set to
+> `false` to avoid double generation of CSS files with StyleX styles.
+
+> [!NOTE]
+> This approach requires transpiling JS/TS files with StyleX code twice:
+> first the source code and then using the PostCSS plugin. To avoid this
+> behavior when using `NextJS`, use the regular `@stylexswc/nextjs-plugin`
+> passing the `transformCss` parameter to transform the generated CSS if it's
+> possible, for example:
+>
+> ```js
+> /// next.config.js
+>
+> //...other code
+> transformCss: async css => {
+>   const postcss = require('postcss');
+>   const result = await postcss([require('autoprefixer')]).process(css);
+>   return result.css;
+> },
+> //...other code
+> ```
+
+Add the following CSS file to your project:
+
+```css
+/*[fileName].css*/
+
+/**
+ * The @stylex directive is used by the @stylexjs/postcss-plugin.
+ * It is automatically replaced with generated CSS during builds.
+ */
+@stylex;
+```
+
+And import it in your JS/TS files:
+
+```js
+import '[fileName].css';
+```
+
+## Plugin Options
+
+The plugin accepts the following configuration options:
+
+### `rsOptions`
+
+- Type: `StyleXOptions`
+- Optional
+- Default: `{}`
+- Description: StyleX compiler options passed to the StyleX compiler
+
+### `useCSSLayers`
+
+- Type: `boolean`
+- Optional
+- Default: `false`
+- Description: Whether to use CSS layers for better style isolation
+
+### `exclude`
+
+- Type: `string[]`
+- Optional
+- Description: Array of glob patterns to exclude from processing
+
+### `include`
+
+- Type: `string[]`
+- Optional
+- Description: Array of glob patterns to include for processing
+
+### `cwd`
+
+- Type: `string`
+- Optional
+- Default: `process.cwd()`
+- Description: Current working directory for resolving files
+
+### `isDev`
+
+- Type: `boolean`
+- Optional
+- Description: Whether the plugin is running in development mode

package/dist/builder.d.ts

@@ -0,0 +1,20 @@
+import postcss, { AtRule } from 'postcss';
+import type { StyleXPluginOption, TransformOptions } from './types';
+declare function createBuilder(): {
+    findStyleXAtRule: (root: postcss.Root) => AtRule | null;
+    configure: (options: StyleXPluginOption) => void;
+    build: ({ shouldSkipTransformError }: TransformOptions) => string;
+    getDependencies: () => ({
+        type: string;
+        dir: string;
+        glob: string;
+        file?: undefined;
+    } | {
+        type: string;
+        file: string;
+        dir?: undefined;
+        glob?: undefined;
+    })[];
+};
+export default createBuilder;
+//# sourceMappingURL=builder.d.ts.map

package/dist/builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../src/builder.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAS1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAkDpE,iBAAS,aAAa;6BAsBY,OAAO,CAAC,IAAI,KAAG,MAAM,GAAG,IAAI;yBAdhC,kBAAkB;0CA0CD,gBAAgB;;;;;;;;;;;;EAsE9D;AAED,eAAe,aAAa,CAAC"}

package/dist/builder.js

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_path_1 = __importDefault(require("node:path"));
+const node_fs_1 = __importDefault(require("node:fs"));
+const path_1 = require("path");
+const fast_glob_1 = require("fast-glob");
+const is_glob_1 = __importDefault(require("is-glob"));
+const glob_parent_1 = __importDefault(require("glob-parent"));
+const bundler_1 = __importDefault(require("./bundler"));
+// Parses a glob pattern and extracts its base directory and pattern.
+// Returns an object with `base` and `glob` properties.
+function parseGlob(pattern) {
+    // License: MIT
+    // Based on:
+    // https://github.com/chakra-ui/panda/blob/6ab003795c0b076efe6879a2e6a2a548cb96580e/packages/node/src/parse-glob.ts
+    let glob = pattern;
+    const base = (0, glob_parent_1.default)(pattern);
+    if (base !== '.') {
+        glob = pattern.substring(base.length);
+        if (glob.charAt(0) === '/') {
+            glob = glob.substring(1);
+        }
+    }
+    if (glob.substring(0, 2) === './') {
+        glob = glob.substring(2);
+    }
+    if (glob.charAt(0) === '/') {
+        glob = glob.substring(1);
+    }
+    return { base, glob };
+}
+// Parses a file path or glob pattern into a PostCSS dependency message.
+function parseDependency(fileOrGlob) {
+    // License: MIT
+    // Based on:
+    // https://github.com/chakra-ui/panda/blob/6ab003795c0b076efe6879a2e6a2a548cb96580e/packages/node/src/parse-dependency.ts
+    if (fileOrGlob.startsWith('!')) {
+        return null;
+    }
+    let message = null;
+    if ((0, is_glob_1.default)(fileOrGlob)) {
+        const { base, glob } = parseGlob(fileOrGlob);
+        message = { type: 'dir-dependency', dir: (0, path_1.normalize)((0, path_1.resolve)(base)), glob };
+    }
+    else {
+        message = { type: 'dependency', file: (0, path_1.normalize)((0, path_1.resolve)(fileOrGlob)) };
+    }
+    return message;
+}
+// Creates a builder for transforming files and bundling StyleX CSS.
+function createBuilder() {
+    let config = null;
+    const bundler = (0, bundler_1.default)();
+    const fileModifiedMap = new Map();
+    // Configures the builder with the provided options.
+    function configure(options) {
+        config = options;
+    }
+    /// Retrieves the current configuration.
+    function getConfig() {
+        if (config == null) {
+            throw new Error('Builder not configured');
+        }
+        return config;
+    }
+    // Finds the `@stylex;` at-rule in the provided PostCSS root.
+    function findStyleXAtRule(root) {
+        let styleXAtRule = null;
+        root.walkAtRules(atRule => {
+            if (atRule.name === 'stylex' && !atRule.params) {
+                styleXAtRule = atRule;
+            }
+        });
+        return styleXAtRule;
+    }
+    // Retrieves all files that match the include and exclude patterns.
+    function getFiles() {
+        const { cwd, include, exclude } = getConfig();
+        let files = (0, fast_glob_1.globSync)(include || [], {
+            onlyFiles: true,
+            ignore: exclude,
+            cwd,
+        });
+        // Normalize file paths
+        files = files.map(file => (file.includes(cwd || '/') ? file : node_path_1.default.join(cwd || '/', file)));
+        return files;
+    }
+    // Transforms the included files, bundles the CSS, and returns the result.
+    function build({ shouldSkipTransformError }) {
+        const { cwd, rsOptions, useCSSLayers, isDev } = getConfig();
+        const files = getFiles();
+        const filesToTransform = [];
+        // Remove deleted files since the last build
+        for (const file of fileModifiedMap.keys()) {
+            if (!files.includes(file)) {
+                fileModifiedMap.delete(file);
+                bundler.remove(file);
+            }
+        }
+        for (const file of files) {
+            const filePath = node_path_1.default.resolve(cwd || '/', file);
+            const mtimeMs = node_fs_1.default.existsSync(filePath) ? node_fs_1.default.statSync(filePath).mtimeMs : -Infinity;
+            // Skip files that have not been modified since the last build
+            // On first run, all files will be transformed
+            const shouldSkip = fileModifiedMap.has(file) && mtimeMs === fileModifiedMap.get(file);
+            if (shouldSkip) {
+                continue;
+            }
+            fileModifiedMap.set(file, mtimeMs);
+            filesToTransform.push(file);
+        }
+        filesToTransform.forEach(file => {
+            const filePath = node_path_1.default.resolve(cwd || '/', file);
+            const contents = node_fs_1.default.readFileSync(filePath, 'utf-8');
+            if (!bundler.shouldTransform(contents)) {
+                console.log('contents: ', contents);
+                return;
+            }
+            const transformedResult = bundler.transform(file, contents, rsOptions || {}, {
+                isDev,
+                shouldSkipTransformError,
+            });
+            return transformedResult;
+        });
+        const css = bundler.bundle({ useCSSLayers });
+        return css;
+    }
+    // Retrieves the dependencies that PostCSS should watch.
+    function getDependencies() {
+        const { include } = getConfig();
+        const dependencies = [];
+        for (const fileOrGlob of include || []) {
+            const dependency = parseDependency(fileOrGlob);
+            if (dependency != null) {
+                dependencies.push(dependency);
+            }
+        }
+        return dependencies;
+    }
+    return {
+        findStyleXAtRule,
+        configure,
+        build,
+        getDependencies,
+    };
+}
+exports.default = createBuilder;

package/dist/bundler.d.ts

@@ -0,0 +1,9 @@
+import { StyleXOptions } from '@stylexswc/rs-compiler';
+import type { TransformOptions, StyleXPluginOption } from './types';
+export default function createBundler(): {
+    shouldTransform: (sourceCode: string) => boolean;
+    transform: (id: string, sourceCode: string, rsConfig: StyleXOptions, options: TransformOptions) => import("@stylexswc/rs-compiler").StyleXTransformResult;
+    remove: (id: string) => void;
+    bundle: ({ useCSSLayers }: Pick<StyleXPluginOption, "useCSSLayers">) => string;
+};
+//# sourceMappingURL=bundler.d.ts.map

package/dist/bundler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundler.d.ts","sourceRoot":"","sources":["../src/bundler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAgC,MAAM,wBAAwB,CAAC;AAErF,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGpE,MAAM,CAAC,OAAO,UAAU,aAAa;kCAIE,MAAM;oBAMrC,MAAM,cACE,MAAM,YACR,aAAa,WACd,gBAAgB;iBAmCP,MAAM;+BAKQ,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC;EAc3E"}

package/dist/bundler.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = createBundler;
+const babel_plugin_1 = __importDefault(require("@stylexjs/babel-plugin"));
+const rs_compiler_1 = require("@stylexswc/rs-compiler");
+// Creates a stateful bundler for processing StyleX rules using Babel.
+function createBundler() {
+    const styleXRulesMap = new Map();
+    // Determines if the source code should be transformed based on the presence of StyleX imports.
+    function shouldTransform(sourceCode) {
+        return sourceCode.includes('stylex');
+    }
+    // Transforms the source code using Babel, extracting StyleX rules and storing them.
+    function transform(id, sourceCode, rsConfig, options) {
+        const { shouldSkipTransformError } = options;
+        let transformReult = {
+            code: sourceCode,
+            map: undefined,
+            metadata: { stylex: [] },
+        };
+        try {
+            transformReult = (0, rs_compiler_1.transform)(id, sourceCode, rsConfig);
+        }
+        catch (error) {
+            if (shouldSkipTransformError) {
+                console.warn(`[@stylexswc/postcss-plugin] Failed to transform "${id}": ${error.message}`);
+                return transformReult;
+            }
+            throw error;
+        }
+        const { code, map, metadata } = transformReult;
+        const stylex = metadata.stylex;
+        if (stylex != null && stylex.length > 0) {
+            styleXRulesMap.set(id, stylex);
+        }
+        return { code, map, metadata };
+    }
+    // Removes the stored StyleX rules for the specified file.
+    function remove(id) {
+        styleXRulesMap.delete(id);
+    }
+    //  Bundles all collected StyleX rules into a single CSS string.
+    function bundle({ useCSSLayers }) {
+        const rules = Array.from(styleXRulesMap.values()).flat();
+        const css = babel_plugin_1.default.processStylexRules(rules, !!useCSSLayers);
+        return css;
+    }
+    return {
+        shouldTransform,
+        transform,
+        remove,
+        bundle,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import postcss from 'postcss';
+import type { StyleXPluginOption } from './types';
+declare const plugin: {
+    ({ cwd, rsOptions, include, exclude, useCSSLayers, }: StyleXPluginOption): {
+        postcssPlugin: string;
+        plugins: ((root: postcss.Root, result: postcss.Result) => void)[];
+    };
+    postcss: boolean;
+};
+export default 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":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAG9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQlD,QAAA,MAAM,MAAM;0DAQT,kBAAkB;;yBAiBC,OAAO,CAAC,IAAI,UAAU,OAAO,CAAC,MAAM;;;CAsDzD,CAAC;AAKF,eAAe,MAAM,CAAC"}

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const postcss_1 = __importDefault(require("postcss"));
+const builder_1 = __importDefault(require("./builder"));
+const PLUGIN_NAME = '@stylexswc/postcss-plugin';
+const builder = (0, builder_1.default)();
+const isDev = process.env.NODE_ENV === 'development';
+const plugin = ({ cwd = process.cwd(), 
+// By default reuses the Babel configuration from the project root.
+// Use `babelrc: false` to disable this behavior.
+rsOptions = {}, include, exclude, useCSSLayers = false, }) => {
+    exclude = [
+        // Exclude type declaration files by default because it never contains any CSS rules.
+        '**/*.d.ts',
+        '**/*.flow',
+        ...(exclude ?? []),
+    ];
+    // Whether to skip the error when transforming StyleX rules.
+    // Useful in watch mode where Fast Refresh can recover from errors.
+    // Initial transform will still throw errors in watch mode to surface issues early.
+    let shouldSkipTransformError = false;
+    return {
+        postcssPlugin: PLUGIN_NAME,
+        plugins: [
+            // Processes the PostCSS root node to find and transform StyleX at-rules.
+            function (root, result) {
+                const fileName = result.opts.from;
+                // Configure the builder with the provided options
+                builder.configure({
+                    include,
+                    exclude,
+                    cwd,
+                    rsOptions,
+                    useCSSLayers,
+                    isDev,
+                });
+                // Find the "@stylex" at-rule
+                const styleXAtRule = builder.findStyleXAtRule(root);
+                if (styleXAtRule == null) {
+                    return;
+                }
+                // Get dependencies to be watched for changes
+                const dependencies = builder.getDependencies();
+                // Add each dependency to the PostCSS result messages.
+                // This watches the entire "./src" directory for "./src/**/*.{ts,tsx}"
+                // to handle new files and deletions reliably in watch mode.
+                for (const dependency of dependencies) {
+                    result.messages.push({
+                        plugin: PLUGIN_NAME,
+                        parent: fileName,
+                        ...dependency,
+                    });
+                }
+                // Build and parse the CSS from collected StyleX rules
+                const css = builder.build({
+                    shouldSkipTransformError,
+                });
+                const parsed = postcss_1.default.parse(css, {
+                    from: fileName,
+                });
+                // Replace the "@stylex" rule with the generated CSS
+                styleXAtRule.replaceWith(parsed);
+                result.root = root;
+                if (!shouldSkipTransformError) {
+                    // Build was successful, subsequent builds are for watch mode
+                    shouldSkipTransformError = true;
+                }
+            },
+        ],
+    };
+};
+plugin.postcss = true;
+module.exports = plugin;
+exports.default = plugin;

package/dist/types.d.ts

@@ -0,0 +1,24 @@
+import type { StyleXOptions } from '@stylexswc/rs-compiler';
+export interface StyleXPluginOption {
+    /**
+     * stylex options passed to stylex babel plugin
+     *
+     * @see https://stylexjs.com/docs/api/configuration/babel-plugin/
+     */
+    rsOptions?: Partial<StyleXOptions>;
+    /**
+     * Whether to use CSS layers
+     *
+     * @default false
+     */
+    useCSSLayers?: boolean;
+    exclude?: string[];
+    include?: string[];
+    cwd?: string;
+    isDev?: boolean;
+}
+export interface TransformOptions {
+    shouldSkipTransformError?: boolean;
+    isDev?: boolean;
+}
+//# 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,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACnC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;CAEjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/dist/types.js

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@stylexswc/postcss-plugin",
+  "description": "StyleX PostCSS plugin with NAPI-RS compiler",
+  "version": "0.6.0-rc.1",
+  "config": {
+    "scripty": {
+      "path": "../../scripts/packages"
+    }
+  },
+  "dependencies": {
+    "@stylexjs/babel-plugin": "^0.9.3",
+    "fast-glob": "^3.3.2",
+    "glob-parent": "^6.0.2",
+    "is-glob": "^4.0.3",
+    "postcss": "^8.4.49"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.23.9",
+    "@stylexswc/eslint-config": "0.6.0-rc.1",
+    "@stylexswc/rs-compiler": "0.6.0-rc.1",
+    "@stylexswc/typescript-config": "0.6.0-rc.1",
+    "@types/babel__core": "^7.20.5",
+    "@types/glob-parent": "^5.1.3",
+    "@types/is-glob": "^4.0.4",
+    "@types/loader-utils": "^2.0.6",
+    "@types/node": "^22.5.1"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "postcss",
+    "postcss-plugin",
+    "stylex",
+    "swc"
+  ],
+  "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"
+  }
+}