https://github.com/rspack-contrib/rsbuild-plugin-styled-components

An Rsbuild plugin to provides compile-time support for styled-components.
https://github.com/rspack-contrib/rsbuild-plugin-styled-components

rsbuild rsbuild-plugin rspack

Last synced: 16 days ago
JSON representation

An Rsbuild plugin to provides compile-time support for styled-components.

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-styled-components
• Owner: rspack-contrib
• License: mit
• Created: 2024-08-10T12:09:46.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-12-01T01:41:13.000Z (26 days ago)
• Last Synced: 2024-12-01T02:28:26.310Z (26 days ago)
• Topics: rsbuild, rsbuild-plugin, rspack
• Language: TypeScript
• Homepage:
• Size: 83 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rsbuild/plugin-styled-components - time support for styled-components. (Plugins / Rsbuild Plugins)

README

        
# @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](https://styled-components.com/) is a popular CSS-in-JS implementation library, which uses the new JavaScript feature [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to write component CSS styles.



  

   

  

  



## Usage

Install:

```bash

npm add @rsbuild/plugin-styled-components -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](https://styled-components.com/) 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;

  cssProps?: 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](./LICENSE).