UnoCSSとは？

UnoCSSは、柔軟性と拡張性を重視して設計された、インスタントアトミックCSSエンジンです。コアは非決定的で、すべてのCSSユーティリティはプリセットを通じて提供されます。

例えば、ローカルの設定ファイルでルールを定義することで、カスタムCSSユーティリティを作成できます。

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

これにより、プロジェクトに新しいCSSユーティリティm-1が追加されます。UnoCSSはオンデマンドなので、コードベースで使用するまで何も生成しません。例えば、このようなコンポーネントがあるとします：

html

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

m-1が検出され、以下のCSSが生成されます：

css

.m-1 { margin: 1px; }

より柔軟にするために、ルールの最初の引数（マッチャーと呼びます）をRegExpに変更し、本体を関数に変更することができます。例えば：

diff

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

これにより、m-1、m-100、m-52.43などの任意のマージンユーティリティを使用できるようになります。そして再び、UnoCSSはそれらを使用した時のみ生成します。

html

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

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

プリセット

いくつかのルールを作成したら、それらをプリセットとして抽出し、他の人と共有できます。例えば、会社のデザインシステム用のプリセットを作成し、チームと共有することができます。

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // あなた自身のプリセット
  ],
})