@tkow/stylex-next-compiler-plugin

This is extended of @stylex/nextjs-plugin to work arround with nextjs compiler.

Documentation Website

https://stylexjs.com

Installation

Install the package by using:

1npm install --save-dev @tkow/stylex-next-compiler-plugin @stylexjs/babel-plugin

Custom Babel Compiler Configuration

Add the following to your .babelrc.js

1module.exports = {
2  presets: ['next/babel'],
3  plugins: [
4    [
5      '@stylexjs/babel-plugin',
6      {
7        dev: process.env.NODE_ENV === 'development',
8        runtimeInjection: false,
9        genConditionalClasses: true,
10        unstable_moduleResolution: {
11          type: 'commonJS',
12          rootDir: __dirname,
13        },
14      },
15    ],
16  ],
17};

Next Compiler Configuration (SWC)

Without .babelrc.js and other babel configuration files.

Add the following to your next.config.js

1const stylexPlugin = require('@tkow/stylex-next-compiler-plugin');
2
3module.exports = stylexPlugin({
4  rootDir: process.env.cwd(),
5  babelrc: false,
6  babelOptions: {
7    dev: process.env.NODE_ENV === 'development',
8    runtimeInjection: false,
9    genConditionalClasses: true,
10    unstable_moduleResolution: {
11      type: 'commonJS',
12      rootDir: __dirname,
13    },
14  }
15})({});

When you want to use Next-Compiler(SWC), you should specify babelrc option false. The babelOptions is optional and the schema is defined by @stylexjs/babel-plugin.