@rsbuild/plugin-styled-components

@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.2.0
npm add @rsbuild/plugin-styled-components -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;
  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.

pluginStyledComponents({
  pure: true,
});

License

MIT.