# @rsbuild/plugin-styled-components

Latest version **1.7.0** (published 2026-08-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsbuild/plugin-styled-components
pnpm add @rsbuild/plugin-styled-components
yarn add @rsbuild/plugin-styled-components
bun add @rsbuild/plugin-styled-components
```

## Health

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

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.7.0 |
| Published | 2026-08-25 |
| First published | 2023-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 12.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3 |
| Maintainers | chenjiahan, hardfist3 |

## Links

- npm: https://www.npmjs.com/package/@rsbuild/plugin-styled-components
- Repository: https://github.com/rstackjs/rsbuild-plugin-styled-components
- Homepage: https://github.com/rstackjs/rsbuild-plugin-styled-components#readme
- Issues: https://github.com/rstackjs/rsbuild-plugin-styled-components/issues
- npm.io page: https://npm.io/package/@rsbuild/plugin-styled-components

## Dependencies (2)

- [reduce-configs](https://npm.io/package/reduce-configs.md) ^1.1.2
- [@swc/plugin-styled-components](https://npm.io/package/@swc/plugin-styled-components.md) ^13.0.0

## Recent versions

- 1.7.0 (latest) — 2026-08-25
- 1.2.2-beta.0 (beta) — 2025-02-21
- 0.0.0-next-20240729023126 (next) — 2024-07-29
- 1.0.0-alpha.3 (alpha) — 2024-07-04
- 0.0.0-nightly-20240114070311 (nightly) — 2024-01-14
- 1.6.3 — 2026-06-05
- 1.6.2 — 2026-05-28
- 1.6.1 — 2026-01-15
- 1.6.0 — 2025-12-18
- 1.5.1 — 2025-11-13
- 1.5.0 — 2025-10-30
- 1.4.1 — 2025-08-04
- 1.4.0 — 2025-06-19
- 1.3.0 — 2025-04-01
- 1.2.1 — 2025-02-21
- … 193 more at https://npm.io/package/@rsbuild/plugin-styled-components/versions

## README

# @rsbuild/plugin-styled-components

An Rsbuild plugin to provide compile-time support for styled-components. It improves debugging and adds server-side rendering support for styled-components.

[styled-components](https://styled-components.com/) is a popular CSS-in-JS implementation library, which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles.

<p>
  <a href="https://npmjs.com/package/@rsbuild/plugin-styled-components">
   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-styled-components?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
  </a>
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
</p>

## Notice

This Rsbuild plugin is simply a wrapper for [@swc/plugin-styled-components](https://www.npmjs.com/package/@swc/plugin-styled-components).

If you have any requirements, it is recommended to file an issue to [SWC plugins repo](https://github.com/swc-project/plugins) or the styled-components repo.

## Usage

Install:

```bash
# `@rsbuild/core` >= 2.2.0
npm add @rsbuild/plugin-styled-components -D

# `@rsbuild/core` 1.7.x ~ 2.1.x
npm add @rsbuild/plugin-styled-components@1.6.3 -D

# `@rsbuild/core` 1.6.x
npm add @rsbuild/plugin-styled-components@1.5.1 -D

# `@rsbuild/core` 1.4.x ~ 1.5.x
npm add @rsbuild/plugin-styled-components@1.4.1 -D

# `@rsbuild/core` 1.2.x ~ 1.3.x
npm add @rsbuild/plugin-styled-components@1.3.0 -D

# `@rsbuild/core` < 1.2.0
npm add @rsbuild/plugin-styled-components@1.1.0 -D
```

Add plugin to your `rsbuild.config.ts`:

```ts
// rsbuild.config.ts
import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';

export default {
  plugins: [pluginStyledComponents()],
};
```

## Example

After registering the plugin, you can use styled-components to write styles:

```ts
import styled from 'styled-components';

const div = styled.div`
  color: red;
`;

console.log('div', div);
```

## Options

If you need to customize the compilation behavior of `styled-components`, you can use the following configs.

You can check the [styled-components documentation](https://styled-components.com/) to learn how to use it.

- **Type:**

```ts
type StyledComponentsOptions = {
  displayName?: boolean;
  ssr?: boolean;
  fileName?: boolean;
  meaninglessFileNames?: string[];
  namespace?: string;
  topLevelImportPaths?: string[];
  transpileTemplateLiterals?: boolean;
  minify?: boolean;
  pure?: boolean;
  cssProp?: boolean;
};
```

- **Default:**

```ts
{
  displayName: true,
  // `isSSR` is true in SSR build
  ssr: isSSR,
  // `pure` is enabled in production to reduce bundle size
  pure: isProd,
  transpileTemplateLiterals: true,
}
```

- **Example:**

When the value is an Object, use the `Object.assign` function to merge with the default config.

```ts title="rsbuild.config.ts"
pluginStyledComponents({
  pure: true,
});
```

## License

[MIT](./LICENSE).

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