全面拥抱原子 CSS 框架 UnoCSS

近期项目中接触并使用了 UnoCSS，使用一段时间后感觉还是很香的，在日常开发中其实存在了很多了 CSS 重复代码，比如会有很多页面或者组件使用到了margin-top: 10px的样式，有些人可能会想到定义一个 classmt-10来表示，那如果需要定义其他数值的样式呢，是不是就有点力不从心了，那还赶紧去尝试下 UnoCSS。

什么是 UnoCSS

UnoCSS 是一款轻量级的原子 CSS 框架，其核心理念是将样式表拆分成最小的可复用单元，即“原子”。这些原子样式由类名组成，通过类名的组合，可以组合出任意复杂的样式。比如有下面的一个组件。

<div class="m-1">Hello</div>

其中m-1将被检测到并生成以下 CSS：

.m-1 {
  margin: 1px;
}

当然m-1可以是其他合法的值，比如m-2 m-3 m-4等等，这一切得益于配置规则的动态化：

// uno.config.ts
export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }]
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

这些类似的规则都是 UnoCSS 预设的规则，后面会降到预设相关的内容。

为什么选择 UnoCSS

市面上已经有其他成熟的原子 CSS 框架了，如 Tailwind CSS 和 Windi CSS，为什么还要使用 UnoCSS，这个就仁者见仁智者见智，可以参考下 antfu 大佬写的重新构想原子化 CSS，当然也可以参考下文档的说法。

Vite 集成

UnoCSS 支持市面上各种框架/工具的集成，如 Vite、Webpack 等等，这里以常用的 Vite 为例。

安装 UnoCSS

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

Vite 安装插件

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UnoCSS()]
})

UnoCSS 配置文件

创建一个uno.config.ts文件

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

在入口文件中添加virtual:uno.css

// main.ts
import 'virtual:uno.css'

VS Code 配置

VS Code 中安装UnoCSS扩展插件。

扩展插件会自动读取项目根目录下的uno.config.ts配置文件，扩展生效的时候在 class 名下面会有虚线展示，如下图所示：

image

如果项目是monorepo形式的目录，需要 VS Code 配置文件settings.json中手动设置unocss.root。

{
  "unocss.root": "packages/client"
}

UnoCSS 配置

这里强烈建议使用专用uno.config.ts文件来配置您的 UnoCSS，以获得 IDE 和其他集成的最佳体验。

完整功能的配置文件如下所示：

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  rules: [
    // ...
  ],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      }
    })
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()]
})

具体说明参考见文档Configurations说明介绍。