# babel-plugin-styled-components

> Improve the debugging experience and add server-side rendering support to styled-components

Latest version **2.3.0** (published 2026-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-styled-components
pnpm add babel-plugin-styled-components
yarn add babel-plugin-styled-components
bun add babel-plugin-styled-components
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2026-05-21 |
| First published | 2016-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 47.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | mxstbr, probablyup, philpl |
| Keywords | styled-components, css-in-js, babel-plugin, server-side rendering, ssr, displayName |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-styled-components
- Repository: styled-components/babel-plugin-styled-components
- Homepage: https://styled-components.com/docs/tooling#babel-plugin
- npm.io page: https://npm.io/package/babel-plugin-styled-components

## Dependencies (4)

- [picomatch](https://npm.io/package/picomatch.md) ^4.0.2
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.25.9
- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) ^7.25.9
- [@babel/helper-annotate-as-pure](https://npm.io/package/@babel/helper-annotate-as-pure.md) ^7.25.9

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.3.0 (latest) — 2026-05-21
- 2.0.1-test (test) — 2021-11-21
- 1.10.2-ej8 (ej-test) — 2019-06-27
- 1.10.1-ej2 (evan-test) — 2019-06-19
- 1.10.1-0 (experimental) — 2019-01-07
- 1.7.2 (next) — 2018-11-09
- 1.8.0-1 (dev) — 2018-09-28
- 2.2.0 — 2026-05-20
- 2.1.4 — 2023-06-23
- 2.1.3 — 2023-05-19
- 2.1.2 — 2023-05-19
- 2.1.1 — 2023-04-06
- 2.1.0 — 2023-04-06
- 2.0.7 — 2022-04-07
- 2.0.6 — 2022-02-25
- … 82 more at https://npm.io/package/babel-plugin-styled-components/versions

## README

# `babel-plugin-styled-components`

This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:

- consistently hashed component classNames between environments (a must for server-side rendering)
- better debugging through automatic annotation of your styled components based on their context in the file system, etc.
- various types of minification for styles and the tagged template literals styled-components uses

## Requirements

This plugin is tested against:

- `@babel/core` `^7`
- `styled-components` `>= 6` (earlier majors may still work but aren't exercised in CI)

## Quick start

Install the plugin first:

```
npm install --save-dev babel-plugin-styled-components
```

Then add it to your babel configuration:

```JSON
{
  "plugins": ["babel-plugin-styled-components"]
}
```

## Options

Full option reference lives on the [styled-components documentation site](https://www.styled-components.com/docs/tooling#babel-plugin). A couple worth flagging here:

- `topLevelImportPaths` (`string[]`): additional module specifiers whose `styled` export should be recognized alongside `styled-components`. Useful for libraries that re-export the styled-components API.
- `cssPropImportPath` (`string`, default `'styled-components'`): which package the css-prop transform should auto-import `styled` from when the file doesn't already have a styled import. Set to `'styled-components/native'` for React Native targets.

## Changelog

See [Github Releases](https://github.com/styled-components/babel-plugin-styled-components/releases)

## Documentation

**The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**

- [Usage](https://www.styled-components.com/docs/tooling#usage)
- [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
- [Minification](https://www.styled-components.com/docs/tooling#minification)

## License

Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.

See [LICENSE.md](./LICENSE.md) for more information.

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