@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 is a popular CSS-in-JS implementation library, which uses the new JavaScript feature Tagged template to write component CSS styles.

Notice

This Rsbuild plugin is simply a wrapper for @swc/plugin-styled-components.

If you have any requirements, it is recommended to file an issue to SWC plugins repo or the styled-components repo.

Usage

Install:

# `@rsbuild/core` >= 1.7.0
npm add @rsbuild/plugin-styled-components -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:

// 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:

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 to learn how to use it.

• Type:

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

• Default:

{
  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.

pluginStyledComponents({
  pure: true,
});

License

MIT.