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.
Rsbuild supports @vanilla-extract/webpack-plugin. You can add the following config to use vanilla-extract:
Currently, Rspack has an HMR issue when using splitChunks together with @vanilla-extract/webpack-plugin. In development mode, you can use a special splitChunks configuration to work around this 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 is already a resolved path pointing 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, 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.
