# @stylexjs/webpack-plugin

> Webpack plugin for StyleX

Latest version **0.11.1** (published 2025-03-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @stylexjs/webpack-plugin
pnpm add @stylexjs/webpack-plugin
yarn add @stylexjs/webpack-plugin
bun add @stylexjs/webpack-plugin
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.11.1 |
| Published | 2025-03-03 |
| First published | 2022-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 37 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10351 |
| Maintainers | naman34, necolas, mellyeliu |

## Links

- npm: https://www.npmjs.com/package/@stylexjs/webpack-plugin
- Repository: https://github.com/facebook/stylex
- Homepage: https://github.com/facebook/stylex#readme
- Issues: https://github.com/facebook/stylex/issues
- npm.io page: https://npm.io/package/@stylexjs/webpack-plugin

## Dependencies (5)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.26.8
- [@stylexjs/babel-plugin](https://npm.io/package/@stylexjs/babel-plugin.md) 0.11.1
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.25.9
- [@babel/plugin-syntax-flow](https://npm.io/package/@babel/plugin-syntax-flow.md) ^7.26.0
- [@babel/plugin-syntax-typescript](https://npm.io/package/@babel/plugin-syntax-typescript.md) ^7.25.9

## Recent versions

- 0.11.1 (latest) — 2025-03-03
- 0.10.0-beta.2 (beta) — 2024-11-28
- 0.5.0-alpha.4 (alpha) — 2024-01-17
- 0.11.0 — 2025-02-28
- 0.10.1 — 2025-01-18
- 0.10.0 — 2025-01-02
- 0.10.0-beta.1 — 2024-11-24
- 0.9.3 — 2024-11-01
- 0.9.2 — 2024-11-01
- 0.9.1 — 2024-11-01
- 0.9.0 — 2024-11-01
- 0.9.0-beta.1 — 2024-10-21
- 0.8.0 — 2024-10-07
- 0.7.5 — 2024-06-30
- 0.7.4 — 2024-06-29
- … 39 more at https://npm.io/package/@stylexjs/webpack-plugin/versions

## README

# @stylexjs/webpack-plugin


## Documentation Website
[https://stylexjs.com](https://stylexjs.com)

## Installation

Install the package by using:
```bash
npm install --save-dev @stylexjs/webpack-plugin
```

or with yarn:

```bash
yarn add --dev @stylexjs/webpack-plugin
```

Add the following to your `webpack.config.js`
```javascript
const StylexPlugin = require('@stylexjs/webpack-plugin');
const path = require('path');

const config = (env, argv) => ({
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, '.build'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // Ensure that the stylex plugin is used before Babel
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // get webpack mode and set value for dev
      dev: argv.mode === 'development',
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      classNamePrefix: 'x',
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
  ],
  cache: true,
});

module.exports = config;
```
## Plugin Options
It inherits all options from `@stylexjs/babel-plugin` and can be found [here 🔗](https://stylexjs.com/docs/api/configuration/babel-plugin/). Along with other options like <br/>

### fileName
```js
fileName: string // Default: 'stylex.css'
```
The name of the output css file.

---
### useCSSLayers
```js
useCSSLayers: boolean // Default: false
```
Enabling this option switches Stylex from using `:not(#\#)` to using `@layers` for handling CSS specificity.

---
### babelConfig
```js
babelConfig: {
  babelrc: boolean,
  plugins: PluginItem[],
  presets: PluginItem[]
} // Default: { babelrc: false, plugins: [], presets: [] }
```
List of custom babel plugins and presets which can be used during code transformation and whether to use the `.babelrc` file.

---
_Source: https://npm.io/package/@stylexjs/webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._