@rsbuild/plugin-styled-components NPM

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

@swc/plugin-styled-components reduce-configs

@everything-registry/sub-chunk-792 @rsbuild/uni-builder @modern-js/uni-builder @alola-react/uni-builder

8 months ago

7 months ago

10 months ago

8 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-next-20240729023126

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-next-20240708070719

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-next-20240723074951

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-next-20240528072128

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-next-20240514150515

1 year ago

0.7.0-beta.0

1 year ago

0.6.15

1 year ago

0.0.0-next-20240513013836

1 year ago

0.6.14

1 year ago

0.0.0-next-20240510033042

1 year ago

0.6.12

1 year ago

0.6.13

1 year ago

0.0.0-next-20240507105013

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20240411025907

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.0.0-next-20240409053424

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20240329044111

2 years ago

0.0.0-next-20240328105907

2 years ago

0.0.0-next-20240328110637

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20240318111129

2 years ago

0.4.15

2 years ago

0.0.0-next-20240313074838

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20240227024230

2 years ago

0.4.7

2 years ago

0.0.0-next-20240227022717

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20240131063127

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-nightly-20240114070311

2 years ago

0.3.3

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.0.0-next-20240112061202

2 years ago

0.3.0

2 years ago

0.0.0-next-20240109105933

2 years ago

0.0.0-next-20240109045121

2 years ago

0.2.18

2 years ago

0.2.17

2 years ago

0.2.16

2 years ago

0.0.0-next-20240104101129

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20231220091832

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20231207110454

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-next-20231115072032

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.0-nightly-20231112160816

2 years ago

0.0.0-nightly-20231111160817

2 years ago

0.0.20

2 years ago

0.0.0-nightly-20231110160815

2 years ago

0.0.19

2 years ago

0.0.0-nightly-20231109160811

2 years ago

0.0.18

2 years ago

0.0.0-nightly-20231108160845

2 years ago

0.0.17

2 years ago

0.0.0-next-20231108034054

2 years ago

0.0.0-nightly-20231107160817

2 years ago

0.0.16

2 years ago

0.0.0-nightly-20231106161004

2 years ago

0.0.15

2 years ago

0.0.0-nightly-20231105160803

2 years ago

0.0.14

2 years ago

0.0.0-nightly-20231104160802

2 years ago

0.0.0-nightly-20231103160938

2 years ago

0.0.13

2 years ago

0.0.0-next-20231103091827

2 years ago

0.0.0-nightly-20231102160941

2 years ago

0.0.0-nightly-20231101160938

2 years ago

0.0.0-nightly-20231031161039

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.0-nightly-20231030160930

2 years ago

0.0.10

2 years ago

0.0.0-nightly-20231029161018

2 years ago

0.0.0-nightly-20231028161015

2 years ago

0.0.0-nightly-20231027160925

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago