close
Guide
Config
Plugin
API
Community
Version
Guide
Config
Plugin
API
Community

CSS-in-JS

This document outlines how to use common CSS-in-JS libraries in Rsbuild.

Although the examples are based on React, some CSS-in-JS libraries (such as vanilla-extract) also support other frameworks.

Using Emotion

Rsbuild supports compiling Emotion, you can add the following configuration to use:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        importSource: '@emotion/react',
      },
    }),
  ],
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-emotion', {}]],
        },
      },
    },
  },
});

Refer to this example: emotion.

Use styled-jsx

You can use styled-jsx through @swc/plugin-styled-jsx:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    swc: {
      jsc: {
        experimental: {
          plugins: [['@swc/plugin-styled-jsx', {}]],
        },
      },
    },
  },
});

Please note, you must select the SWC plugin that matches the current version of @swc/core for SWC to work, see tools.swc.

Refer to this example: styled-jsx.

Use vanilla-extract

Rsbuild supports @vanilla-extract/webpack-plugin. You can add the following config to use vanilla-extract:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';

export default defineConfig({
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        exclude: [/\.css\.ts$/],
      },
    }),
  ],
  tools: {
    rspack: {
      plugins: [new VanillaExtractPlugin()],
    },
  },
});

Refer to this example: vanilla-extract.

Use StyleX

You can use StyleX via unplugin-stylex:

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import stylexPlugin from 'unplugin-stylex/rspack';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [stylexPlugin()],
    },
  },
});

Refer to this example: stylex.

Use styled-components

styled-components is a runtime library, you can use it directly without any additional configuration.

Rsbuild supports compiling styled-components, improving the debugging experience and adding SSR support to styled-components.

To use styled-components, we recommend using the @rsbuild/plugin-styled-components.

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';

export default defineConfig({
  plugins: [pluginStyledComponents()],
});

Refer to this example: styled-components.

TIP

styled-components is no longer recommended for new projects as it is in maintenance mode.