Webpack | StyleX

examples/example-webpack demonstrates using @stylexjs/unplugin with Webpack and MiniCssExtractPlugin. StyleX is compiled at build time and the aggregated CSS is appended to the extracted stylesheet.

Install

npm install --save-dev @stylexjs/unplugin

pnpm add -D @stylexjs/unplugin

yarn add -D @stylexjs/unplugin

bun add -D @stylexjs/unplugin

Webpack configuration

// webpack.config.js
const fs = require('node:fs');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const stylex = require('@stylexjs/unplugin').default;
const templatePath = path.resolve(__dirname, 'index.html');

module.exports = {
  // ...
  devServer: {
    watchFiles: [templatePath, path.resolve(__dirname, 'src/**/*')],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }],
      },
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      templateContent: () => fs.readFileSync(templatePath, 'utf-8'),
    }),
    stylex.webpack({
      useCSSLayers: true,
      // ... other StyleX configuration
    }),
    new MiniCssExtractPlugin(),
  ],
};

CSS entrypoint

Ensure that there is one CSS file that is imported from your root layout component or JS entry point.