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.

Use Emotion

Rsbuild supports compiling Emotion. Add the following configuration to enable it:

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', {}]],
        },
      },
    },
  },
});

Make sure to choose the SWC plugin version that matches your current @swc/core version so SWC can run correctly. See tools.swc.

Refer to this example: styled-jsx.

Use vanilla-extract

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

Currently, Rspack has an HMR issue when splitChunks is used with @vanilla-extract/webpack-plugin. In development mode, you can use a dedicated splitChunks configuration to avoid the issue.

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$/],
      },
    }),
  ],
  performance: {
    chunkSplit: {
      override: {
        cacheGroups: {
          vanilla: {
            test: /@vanilla-extract\/webpack-plugin/,
            // make sure the chunk contains modules created by @vanilla-extract/webpack-plugin has stable id in development mode to avoid HMR issues
            name: process.env.NODE_ENV === 'development' && 'vanilla',
            chunks: 'all',
          },
        },
      },
    },
  },
  tools: {
    rspack: {
      plugins: [new VanillaExtractPlugin()],
    },
  },
});

Refer to this example: vanilla-extract.

Static assets

When importing static assets, use import syntax:

src/App.css.ts

import { style } from '@vanilla-extract/css';
import logoUrl from './logo.png';

export const containerStyle = style({
  backgroundImage: `url(${logoUrl})`,
});

Since logoUrl already resolves to the dist directory, css-loader doesn't need to process it again. Disable CSS URL processing via tools.cssLoader.url to avoid module resolution errors:

rsbuild.config.ts

export default defineConfig({
  // ... other config
  tools: {
    cssLoader: {
      url: false,
    },
  },
});

Reference: #6215.

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, so you can use it directly without 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.

#CSS-in-JS

#Use Emotion

#Use styled-jsx

#Use vanilla-extract

#Static assets

#Use StyleX

#Use styled-components

#CSS-in-JS

#Use Emotion

#Use styled-jsx

#Use vanilla-extract

#Static assets

#Use StyleX

#Use styled-components

CSS-in-JS

Use Emotion

Use styled-jsx

Use vanilla-extract

Static assets

Use StyleX

Use styled-components

CSS-in-JS

Use Emotion

Use styled-jsx

Use vanilla-extract

Static assets

Use StyleX

Use styled-components