Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

Styled Components Plugin

Source
About 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.

Rsbuild provides compile-time support for styled-components, improve the debugging experience and add server-side rendering support to styled-components.

For details, please refer to Rspack#styledComponents.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-styled-components -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

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;
  cssProps?: 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.

rsbuild.config.ts
export default {
  plugins: [
    pluginStyledComponents({
      pure: true,
    }),
  ],
};