emotion 配置

前言

emotion 是一个 css in js 的库， 有了它，我们就可以在 js 中写 css 了， 这样就可以把组件的样式和组件的逻辑放在一起，方便维护。ChakraUI 和 MUI 都是依赖它开发的组件。

特色

• css props

ts 配置

Emotion – TypeScript, 为了 tsc 能够识别， 需要修改 tsconfig.json：

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

转码工具中设置 importSource

这一步是为了编码之后的 jsx 函数， 能被 emotion 替换掉。

babel

修改 .babelrc:

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

swc

比如 vite 中：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
    }),
  ],
});

如果是 rspack 工程的话， 修改 rsbuild.config.ts:

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      module: {
        rules: [
          {
            test: /\.tsx$/,
            loader: "builtin:swc-loader",
            options: {
              jsc: {
                transform: {
                  react: {
                    importSource: "@emotion/react",
                    runtime: "automatic",
                  },
                },
              },
              rspackExperiments: {
                emotion: true,
              },
            },
            type: "javascript/auto",
          },
        ],
      },
    },
  },
});

esbuild

vite 生产环境构建，使用的就是 esbuild, 它自动处理读取了 tsconfig.json 中的 jsxImportSource 配置的。

技术总结

emotion 作为一个 css-in-js 的工具， 还是听方便的，特别是支持 css props 的写法， 让为 class 命名的烦恼远离了我们。

但随着 headlessUI + tailwindCSS 的方案发展，我后续也会倾向后者， 因为在和其他组件结合的时候， tailwindCSS 能快速的维护好样式。