@stylexswc/nextjs-swc-plugin

SWC Stylex plugin for Next.js

[!CAUTION] DEPRECATED: This package is deprecated as of version 0.5.0. Please migrate to @stylexswc/nextjs-plugin which is the official replacement.

Migration Guide

To migrate from this package to the new one:

• Uninstall this package:

npm uninstall @stylexswc/nextjs-swc-plugin

• Install the new package:

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

• Update next.config.js according to the Advanced Options section.

Breaking Changes in v0.5.0

[!IMPORTANT] The plugin API has been updated since version 0.5.0. If you're upgrading from an earlier version, please note that the configuration options have changed. See the Plugin Options section for the updated API.

Next.js plugin for an unofficial StyleX SWC plugin.

Why SWC instead of Babel

Since version 12, Next.js uses SWC Compiler by default. According to Vercel, compilation using the SWC Compiler is 17x faster than Babel.

However, if you have a Babel config, the application will out put of SWC Compiler and continue to use Babel.

This plugin allows us to use StyleX and take advantage of SWC Compiler.

The usage of StyleX does not change, all changes are internal. All you need to do, is install SWC StyleX plugin and update Next.js config.

Installation

Install the package and SWC plugin by using:

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

Plugin Options

Basic Options

stylexImports

• Type: Array<string | { as: string, from: string }>
• Default: ['stylex', '@stylexjs/stylex']
• Description: Specifies where StyleX will be imported from. Supports both string paths and import aliases.

useCSSLayers

• Type: boolean
• Default: false
• Description: Enables CSS cascade layers support for better style isolation.

Advanced Options

transformCss

• Type: (css: string) => string | Buffer | Promise<string | Buffer>
• Optional
• Description: Custom CSS transformation function. Since the plugin injects CSS after all loaders, use this to apply PostCSS or other CSS transformations.

SWC Plugin Options

• Type: Partial<StyleXOptions>
• Optional
• Description: StyleX compiler options that will be passed to the NAPI-RS compiler. See StyleX configuration docs for details.

Example Configuration

const path = require('path');
const stylexPlugin = require('@stylexswc/nextjs-swc-plugin');
const rootDir = __dirname;

module.exports = stylexPlugin({})({
  transpilePackages: ['@stylexjs/open-props'],
  // Optionally, add any other Next.js config below
  experimental: {
    swcPlugins: [[
      "@stylexswc/swc-plugin",
      {
        dev: process.env.NODE_ENV === 'development',
        genConditionalClasses: true,
        treeshakeCompensation: true,
        aliases: {
          '@/*': [path.join(rootDir, '*')],
        },
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: rootDir,
        },
      },
    ]],
  },
});

Examples

• Example repo
• CodeSandbox with example repo

Documentation

• StyleX Documentation
• SWC plugin for StyleX