Part of the StyleX SWC Plugin workspace

PostCSS plugin for an unofficial napi-rs compiler that includes the StyleX SWC code transformation under the hood.

To install the package, run the following command:

npm install --save-dev @stylexswc/postcss-plugin

Modify postcss.config.js. For example:

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:

/// 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
});

/// 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:

/*[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:

import '[fileName].css';

The plugin accepts the following configuration options:

• Type: (string | RegExp)[]
• Default: auto-discovered
• Description: RS-compiler Only An array of glob patterns or regular expressions to include specific files for StyleX transformation. When specified, only files matching at least one of these patterns will be discovered and transformed. Patterns are matched against paths relative to the current working directory. Supports regex lookahead/lookbehind for advanced filtering.

When omitted, the plugin auto-discovers source files in the project cwd and direct dependencies that use StyleX.

• Type: (string | RegExp)[]
• Optional
• Description: RS-compiler Only An array of glob patterns or regular expressions to exclude specific files from StyleX transformation. Files matching any of these patterns will not be transformed, even if they match an include pattern. Patterns are matched against paths relative to the current working directory. Supports regex lookahead/lookbehind for advanced filtering.

When include is omitted, the plugin automatically excludes common build and dependency folders (for example node_modules, .next, dist, build) to keep discovery focused on source files.

• Type: StyleXOptions
• Optional
• Default: {}
• Description: StyleX compiler options passed to the StyleX compiler. For standard StyleX options, see the official StyleX documentation.

• Type: boolean
• Optional
• Default: false
• Description: Whether to use CSS layers for better style isolation

• Type: string
• Optional
• Default: process.cwd()
• Description: Current working directory for resolving files. Dependency paths and config resolution use this value.

• Type: boolean
• Optional
• Description: Whether the plugin is running in development mode

• Type: Array<string | { from: string, as: string }>
• Optional
• Description: Override import sources at the PostCSS plugin level.

When provided, takes precedence over rsOptions.importSources. When omitted, falls back to rsOptions.importSources, then the built-in defaults (@stylexjs/stylex, stylex).

Include only specific directories:

{
  '@stylexswc/postcss-plugin': {
    include: ['src/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
  },
}

Exclude test and story files:

{
  '@stylexswc/postcss-plugin': {
    include: ['src/**/*.{ts,tsx}'],
    exclude: ['**/*.test.*', '**/*.stories.*', '**/__tests__/**'],
  },
}

Using regular expressions:

{
  '@stylexswc/postcss-plugin': {
    include: ['src/**/*.{ts,tsx}', /components\/.*\.tsx$/],
    exclude: [/\.test\./, /\.stories\./],
  },
}

Exclude node_modules except specific packages (using lookahead):

{
  '@stylexswc/postcss-plugin': {
    include: ['src/**/*.{ts,tsx}', 'node_modules/**/*.js'],
    // Exclude all node_modules except @stylexjs/open-props
    exclude: [/node_modules(?!\/@stylexjs\/open-props)/],
  },
}

Transform only specific packages from node_modules:

{
  '@stylexswc/postcss-plugin': {
    include: [
      'src/**/*.{ts,tsx}',
      'node_modules/@stylexjs/open-props/**/*.js',
      'node_modules/@my-org/design-system/**/*.js',
    ],
    exclude: ['**/*.test.*'],
  },
}

Set STYLEX_POSTCSS_DEBUG=1 to print resolved plugin inputs, including:

• resolved importSources and where they came from
• final include and exclude globs
• discovered dependency directories

MIT — see LICENSE