@stylexjs/postcss-plugin 0.12.0 → 0.13.1

package/README.md

@@ -135,3 +135,14 @@ useCSSLayers: boolean; // Default: false
 
 Enabling this option switches Stylex from using `:not(#\#)` to using `@layers`
 for handling CSS specificity.
+
+---
+
+### importSources
+
+```js
+importSources: Array<string | { from: string, as: string }>; // Default: ['@stylexjs/stylex', 'stylex']
+```
+
+Possible strings where you can import stylex from. Files that do not match the
+import sources may be skipped from being processed to speed up compilation.

package/__tests__/__fixtures__/.babelrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    ['@stylexjs/babel-plugin', { dev: false, runtimeInjection: false }],
+  ],
+};

package/__tests__/__fixtures__/import-sources-object.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'react-strict-dom';
+
+export const styles = css.create({
+  object: {
+    backgroundColor: 'yellow',
+  },
+});

package/__tests__/__fixtures__/import-sources-string.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as custom from 'custom';
+
+export const styles = custom.create({
+  string: {
+    backgroundColor: 'blue',
+  },
+});

package/__tests__/__fixtures__/styles-second.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const styles = stylex.create({
+  second: {
+    backgroundColor: 'green',
+  },
+});

package/__tests__/__fixtures__/styles.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const styles = stylex.create({
+  container: {
+    backgroundColor: 'red',
+  },
+});

package/__tests__/index-test.js

@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const path = require('path');
+const postcss = require('postcss');
+const createPlugin = require('../src/plugin');
+
+describe('@stylexjs/postcss-plugin', () => {
+  const fixturesDir = path.resolve(__dirname, '__fixtures__');
+
+  async function runStylexPostcss(options = {}, inputCSS = '@stylex;') {
+    // Create a new instance for each test as the plugin is stateful
+    const stylexPostcssPlugin = createPlugin();
+
+    const plugin = stylexPostcssPlugin({
+      cwd: fixturesDir,
+      include: ['**/*.js'],
+      babelConfig: {
+        configFile: path.join(fixturesDir, '.babelrc.js'),
+      },
+      ...options,
+    });
+
+    const processor = postcss([plugin]);
+    const result = await processor.process(inputCSS, {
+      from: path.join(fixturesDir, 'input.css'),
+    });
+
+    return result;
+  }
+
+  test('extracts CSS from StyleX files', async () => {
+    const result = await runStylexPostcss();
+
+    expect(result.css).toMatchInlineSnapshot(`
+      ".x1u857p9{background-color:green}
+      .xrkmrrc{background-color:red}"
+    `);
+
+    // Check that messages contain dependency information
+    expect(result.messages.length).toBeGreaterThan(0);
+    expect(result.messages.some((m) => m.type === 'dir-dependency')).toBe(true);
+  });
+
+  test('handles empty CSS input without @stylex rule', async () => {
+    const result = await runStylexPostcss({}, '/* No stylex rule here */');
+
+    expect(result.css).toMatchInlineSnapshot('"/* No stylex rule here */"');
+    expect(result.messages.length).toBe(0);
+  });
+
+  test('supports CSS layers', async () => {
+    const result = await runStylexPostcss({ useCSSLayers: true });
+
+    expect(result.css).toContain('@layer');
+    expect(result.css).toMatchInlineSnapshot(`
+      "
+      @layer priority1;
+      @layer priority1{
+      .x1u857p9{background-color:green}
+      .xrkmrrc{background-color:red}
+      }"
+    `);
+  });
+
+  test('handles exclude patterns', async () => {
+    const result = await runStylexPostcss({
+      exclude: ['**/styles-second.js'],
+    });
+
+    // Should not contain styles-second.js styles
+    expect(result.css).not.toContain('green');
+
+    expect(result.css).toMatchInlineSnapshot(
+      '".xrkmrrc{background-color:red}"',
+    );
+  });
+
+  test('respects string syntax for importSources', async () => {
+    // Default importSources should not process any files
+    const defaultResult = await runStylexPostcss({
+      include: ['**/import-sources-*.js'],
+    });
+
+    expect(defaultResult.css).toBe('');
+
+    // Custom importSources should process only import-sources-string.js
+    const customResult = await runStylexPostcss({
+      include: ['**/import-sources-*.js'],
+      importSources: ['custom'],
+      babelConfig: {
+        babelrc: false,
+        plugins: [
+          [
+            '@stylexjs/babel-plugin',
+            {
+              dev: false,
+              runtimeInjection: false,
+              importSources: ['custom'],
+            },
+          ],
+        ],
+      },
+    });
+
+    expect(customResult.css).toMatchInlineSnapshot(
+      '".x1t391ir{background-color:blue}"',
+    );
+  });
+
+  test('supports object syntax for importSources', async () => {
+    const result = await runStylexPostcss({
+      include: ['**/import-sources-object.js'],
+      importSources: [{ as: 'css', from: 'react-strict-dom' }],
+      babelConfig: {
+        babelrc: false,
+        plugins: [
+          [
+            '@stylexjs/babel-plugin',
+            {
+              dev: false,
+              runtimeInjection: false,
+              importSources: [{ as: 'css', from: 'react-strict-dom' }],
+            },
+          ],
+        ],
+      },
+    });
+
+    expect(result.css).toMatchInlineSnapshot(
+      '".x1cu41gw{background-color:yellow}"',
+    );
+  });
+
+  test('skips files that do not match include/exclude patterns', async () => {
+    const result = await runStylexPostcss({
+      include: ['**/styles-second.js'],
+    });
+
+    // Should contain styles-second.js styles but not styles.js
+    expect(result.css).not.toContain('red');
+
+    expect(result.css).toMatchInlineSnapshot(
+      '".x1u857p9{background-color:green}"',
+    );
+  });
+});

package/jest.config.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  testPathIgnorePatterns: ['/__fixtures__/'],
+  testEnvironment: 'node',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/postcss-plugin",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "PostCSS plugin for StyleX",
   "main": "src/index.js",
   "repository": {
@@ -8,9 +8,12 @@
     "url": "git+https://github.com/facebook/stylex.git"
   },
   "license": "MIT",
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
     "@babel/core": "^7.26.8",
-    "@stylexjs/babel-plugin": "0.12.0",
+    "@stylexjs/babel-plugin": "0.13.1",
     "postcss": "^8.4.49",
     "fast-glob": "^3.3.2",
     "glob-parent": "^6.0.2",

package/src/builder.js

@@ -104,7 +104,8 @@ function createBuilder() {
 
   // Transforms the included files, bundles the CSS, and returns the result.
   async function build({ shouldSkipTransformError }) {
-    const { cwd, babelConfig, useCSSLayers, isDev } = getConfig();
+    const { cwd, babelConfig, useCSSLayers, importSources, isDev } =
+      getConfig();
 
     const files = getFiles();
     const filesToTransform = [];
@@ -140,7 +141,7 @@ function createBuilder() {
       filesToTransform.map((file) => {
         const filePath = path.resolve(cwd, file);
         const contents = fs.readFileSync(filePath, 'utf-8');
-        if (!bundler.shouldTransform(contents)) {
+        if (!bundler.shouldTransform(contents, { importSources })) {
           return;
         }
         return bundler.transform(filePath, contents, babelConfig, {

package/src/bundler.js

@@ -13,8 +13,15 @@ module.exports = 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');
+  function shouldTransform(sourceCode, options) {
+    const { importSources } = options;
+
+    return importSources.some((importSource) => {
+      if (typeof importSource === 'string') {
+        return sourceCode.includes(importSource);
+      }
+      return sourceCode.includes(importSource.from);
+    });
   }
 
   // Transforms the source code using Babel, extracting StyleX rules and storing them.
@@ -25,6 +32,7 @@ module.exports = function createBundler() {
         filename: id,
         caller: {
           name: '@stylexjs/postcss-plugin',
+          platform: 'web',
           isDev,
         },
         ...babelConfig,

package/src/index.js

@@ -5,95 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const postcss = require('postcss');
-const createBuilder = require('./builder');
+const createPlugin = require('./plugin');
 
-const PLUGIN_NAME = '@stylexjs/postcss-plugin';
-
-const builder = createBuilder();
-
-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.
-  babelConfig = {},
-  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.
-      async function (root, result) {
-        const fileName = result.opts.from;
-
-        // Configure the builder with the provided options
-        await builder.configure({
-          include,
-          exclude,
-          cwd,
-          babelConfig,
-          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 = await builder.build({
-          shouldSkipTransformError,
-        });
-        const parsed = await postcss.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;
+module.exports = createPlugin();

package/src/plugin.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const postcss = require('postcss');
+const createBuilder = require('./builder');
+
+module.exports = function createPlugin() {
+  const PLUGIN_NAME = '@stylexjs/postcss-plugin';
+
+  const builder = createBuilder();
+
+  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.
+    babelConfig = {},
+    include,
+    exclude,
+    useCSSLayers = false,
+    importSources = ['@stylexjs/stylex', 'stylex'],
+  }) => {
+    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.
+        async function (root, result) {
+          const fileName = result.opts.from;
+
+          // Configure the builder with the provided options
+          await builder.configure({
+            include,
+            exclude,
+            cwd,
+            babelConfig,
+            useCSSLayers,
+            importSources,
+            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 = await builder.build({
+            shouldSkipTransformError,
+          });
+          const parsed = await postcss.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;
+
+  return plugin;
+};