Rsbuild 项目中的 CSS-in-JS 方案详解-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00705/article/details/148862230

Rsbuild 项目中的 CSS-in-JS 方案详解

前言

在现代前端开发中，CSS-in-JS 已经成为管理组件样式的流行方式。Rsbuild 作为一个现代化的构建工具，提供了对多种 CSS-in-JS 库的完善支持。本文将详细介绍如何在 Rsbuild 项目中集成和使用各种主流的 CSS-in-JS 解决方案。

什么是 CSS-in-JS

CSS-in-JS 是一种将 CSS 样式直接写入 JavaScript 或 TypeScript 代码中的技术方案。与传统 CSS 相比，它具有以下优势：

组件化样式：样式与组件紧密耦合，避免全局污染
动态样式：可以根据 props 或 state 动态生成样式
更好的开发体验：支持自动前缀、嵌套规则等现代 CSS 特性
类型安全：在 TypeScript 项目中可以获得样式定义的完整类型检查

Emotion 集成

Emotion 是一个功能强大且灵活的 CSS-in-JS 库，Rsbuild 通过 SWC 插件提供了对 Emotion 的编译支持。

配置步骤

首先安装必要的依赖：

npm install @emotion/react @swc/plugin-emotion

修改 Rsbuild 配置文件：

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

使用示例

import { css } from '@emotion/react';

function MyComponent() {
  return (
    <div
      css={css`
        color: hotpink;
        &:hover {
          color: darkred;
        }
      `}
    >
      Hello with Emotion!
    </div>
  );
}

styled-jsx 集成

styled-jsx 是由 Vercel 团队开发的 CSS-in-JS 解决方案，特别适合 Next.js 项目。

配置方法

安装依赖：

npm install styled-jsx @swc/plugin-styled-jsx

修改 Rsbuild 配置：

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

使用示例

function MyComponent() {
  return (
    <div>
      <style jsx>{`
        .container {
          color: blue;
        }
      `}</style>
      <div className="container">Styled with styled-jsx</div>
    </div>
  );
}

vanilla-extract 集成

vanilla-extract 是一个零运行时的 CSS-in-TypeScript 库，可以在构建时生成静态 CSS。

配置步骤

安装依赖：

npm install @vanilla-extract/css @vanilla-extract/webpack-plugin

修改 Rsbuild 配置：

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

使用示例

// styles.css.ts
import { style } from '@vanilla-extract/css';

export const container = style({
  color: 'green',
});

// Component.tsx
import { container } from './styles.css';

function MyComponent() {
  return <div className={container}>Styled with vanilla-extract</div>;
}

StyleX 集成

StyleX 是 Facebook 开源的 CSS-in-JS 解决方案，专注于高性能和可预测性。

配置方法

安装依赖：
```
npm install stylex unplugin-stylex
```

修改 Rsbuild 配置：

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

使用示例

import * as stylex from 'stylex';

const styles = stylex.create({
  base: {
    color: 'purple',
  },
});

function MyComponent() {
  return <div {...stylex.props(styles.base)}>Styled with StyleX</div>;
}

styled-components 集成

styled-components 是最早流行的 CSS-in-JS 库之一，虽然已进入维护模式，但仍有大量项目在使用。

配置建议

Rsbuild 提供了专用插件来优化 styled-components 的构建：

安装依赖：

npm install styled-components @rsbuild/plugin-styled-components

修改 Rsbuild 配置：

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

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

使用示例

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
`;

function MyComponent() {
  return <Button>Styled with styled-components</Button>;
}

性能与选择建议

在选择 CSS-in-JS 方案时，需要考虑以下因素：

运行时 vs 零运行时：
- Emotion、styled-components 等是运行时方案
- vanilla-extract 是零运行时方案，性能更好
类型支持：
- TypeScript 项目推荐使用 vanilla-extract 或 StyleX
项目规模：
- 大型项目推荐使用零运行时方案
- 中小型项目可以选择更灵活的运行时方案
团队熟悉度：
- 选择团队已经熟悉的方案可以降低学习成本