SWC Stylex plugin for Next.js

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

Please install @stylexswc/swc-plugin if you haven't done so already:

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

Usage

Modify Next.js config. For example:

/** @type {import('next').NextConfig} */
const stylexPlugin = require('@stylexswc/nextjs-plugin');

const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  transpilePackages: ['@stylexjs/open-props'],
  // Optionally, add any other Next.js config below
  swcMinify: true,
  experimental: {
    swcPlugins: [
      '@stylexswc/swc-plugin',
      {
        dev: false,
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  },
};

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

Examples

• Example repo
• CodeSandbox with example repo

Documentation

• StyleX Documentation
• SWC plugin for StyleX