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

``bash


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

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