# @stylexjs/babel-plugin

> StyleX babel plugin.

Latest version **0.19.1** (published 2026-09-15) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.19.1 |
| Published | 2026-09-15 |
| First published | 2022-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10354 |
| Maintainers | vincentriemer, anaybucket, naman34, necolas, mellyeliu |

## Links

- npm: https://www.npmjs.com/package/@stylexjs/babel-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/babel-plugin

## Dependencies (8)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.26.8
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.26.8
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.26.8
- [@stylexjs/shared](https://npm.io/package/@stylexjs/shared.md) 0.19.1
- [@stylexjs/stylex](https://npm.io/package/@stylexjs/stylex.md) 0.19.1
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.1.0
- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) ^7.25.9
- [@dual-bundle/import-meta-resolve](https://npm.io/package/@dual-bundle/import-meta-resolve.md) ^4.1.0

## Recent versions

- 0.19.1 (latest) — 2026-09-15
- 0.0.0-6e16619c (canary) — 2025-08-01
- 0.10.0-beta.2 (beta) — 2024-11-28
- 0.5.0-alpha.4 (alpha) — 2024-01-17
- 0.19.0 — 2026-06-16
- 0.18.3 — 2026-04-20
- 0.18.2 — 2026-03-27
- 0.18.1 — 2026-03-06
- 0.18.0 — 2026-03-04
- 0.17.5 — 2026-01-13
- 0.17.4 — 2025-12-18
- 0.17.3 — 2025-12-12
- 0.17.2 — 2025-12-02
- 0.17.1 — 2025-11-29
- 0.17.0 — 2025-11-18
- … 69 more at https://npm.io/package/@stylexjs/babel-plugin/versions

## README

# @stylexjs/babel-plugin

StyleX expects you to transform all `js`/`ts`/`tsx` files with `@stylexjs/babel-plugin`.
In addition to transforming JS code, this plugin also produces an Array of CSS rules. All the CSS rules
generated from all JS files within your project should be concatenated together and converted to a CSS
file using the `processStyles` function which is also exported from the same module.

`@stylexjs/babel-plugin` is fairly lightweight. It pre-computes `stylex` related functions like
`create` and `keyframes` by converting the argument AST to a JS object and transforming them
by passing them to the functions of the corresponding names within `@stylex/shared`


## Babel Metadata

The StyleX Babel plugin does more than transform JavaScript (or TypeScript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.

An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:

1. `code` which is the transformed JS code
2. `metadata` is an object of metadata that the plugin may want to return as a side-effect.

e.g.

```js
const result = transformSync(sourceCode, {
  filename: opts.filename,
  parserOpts: { flow: { all: true } },
  plugins: [stylexPlugin, opts],
});

const transformedCode = result.code;
const injectedStyles = result.metadata.stylex;
```

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