@stylexswc/nextjs-swc-plugin NPM

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,
        },
      },
    ]],
  },
});