ルール

ルールはユーティリティクラスと生成されるCSSを定義します。UnoCSSには多くの組み込みルールがありますが、カスタムルールを簡単に追加することもできます。

静的ルール

この例では：

rules: [
  ['m-1', { margin: '0.25rem' }],
]

ユーザーのコードベースでm-1が検出されるたびに、以下のCSSが生成されます：

.m-1 { margin: 0.25rem; }

注意: ボディの構文はCSSプロパティの構文に従います。例えば、fontWeightではなくfont-weightを使用します。プロパティ名にハイフン-がある場合は、引用符で囲む必要があります。

rules: [
  ['font-bold', { 'font-weight': 700 }],
]

動的ルール

よりスマートにするには、マッチャーをRegExpに変更し、ボディを関数に変更します：

rules: [
  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

ボディ関数の最初の引数は、マッチしたグループを取得するために分割できるRegExpのマッチ結果です。

例えば、以下の使用法では：

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

対応するCSSが生成されます：

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

おめでとうございます！これで独自の強力なアトミックCSSユーティリティができました。楽しんでください！

CSSルールのフォールバック

新しいCSS機能を使用しながら古いブラウザのサポートも可能にするためにCSSルールのフォールバックを活用したい場合、同じキーを持つルールのCSS表現として2次元配列を返すことができます。例えば：

rules: [
  [/^h-(\d+)dvh$/, ([_, d]) => {
    return [
      ['height', `${d}vh`],
      ['height', `${d}dvh`],
    ]
  }],
]

これによりh-100dvhは以下を生成します：

.h-100dvh { height: 100vh; height: 100dvh; }

順序

UnoCSSは生成されるCSSで定義したルールの順序を尊重します。後のルールは優先度が高くなります。

動的ルールを使用する場合、複数のトークンにマッチする可能性があります。デフォルトでは、単一の動的ルールの下でマッチしたものの出力は、グループ内でアルファベット順にソートされます。

ルールのマージ

デフォルトでは、UnoCSSは同じボディを持つCSSルールをマージしてCSSサイズを最小化します。

例えば、<div class="m-2 hover:m2">は以下を生成します：

.hover\:m2:hover,
.m-2 {
  margin: 0.5rem;
}

2つの別々のルールではなく：

.hover\:m2:hover {
  margin: 0.5rem;
}
.m-2 {
  margin: 0.5rem;
}

特殊シンボル

v0.61以降、UnoCSSは生成されるCSSの追加メタ情報を定義するための特殊シンボルをサポートしています。動的ルールマッチャー関数の2番目の引数からシンボルにアクセスできます。

例えば：

rules: [
  [/^grid$/, ([, d], { symbols }) => {
    return {
      [symbols.parent]: '@supports (display: grid)',
      display: 'grid',
    }
  }],
]

以下を生成します：

@supports (display: grid) {
  .grid {
    display: grid;
  }
}

利用可能なシンボル

• symbols.parent: 生成されるCSSルールの親ラッパー（例：@supports、@mediaなど）
• symbols.selector: 生成されるCSSルールのセレクターを変更する関数（以下の例を参照）
• symbols.layer: 生成されるCSSルールのUnoCSSレイヤーを設定する文字列/関数/正規表現マッチ
• symbols.variants: 現在のCSSオブジェクトに適用されるバリアントハンドラーの配列
• symbols.shortcutsNoMerge: ショートカットでの現在のルールのマージを無効にするブール値
• symbols.noMerge: ショートカットでの現在のルールのマージを無効にするブール値
• symbols.sort: 現在のCSSオブジェクトのソート順を上書きする数値

マルチセレクタールール

v0.61以降、UnoCSSはJavaScript Generator関数を使用したマルチセレクターをサポートしています。

例えば：

rules: [
  [/^button-(.*)$/, function* ([, color], { symbols }) {
    yield {
      background: color
    }
    yield {
      [symbols.selector]: selector => `${selector}:hover`,
      // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
      background: `color-mix(in srgb, ${color} 90%, black)`
    }
  }],
]

複数のCSSルールを生成します：

.button-red {
  background: red;
}
.button-red:hover {
  background: color-mix(in srgb, red 90%, black);
}

完全に制御されたルール

TIP

これは高度な機能であり、ほとんどの状況では必要ありません。

動的ルールとバリアントの組み合わせでカバーされていない高度なルールが必要な場合、UnoCSSはCSSの生成を完全に制御する方法も提供します。

動的ルールのボディ関数から文字列を返すことができ、これは生成されるCSSに直接渡されます（これは、CSSのエスケープ、バリアントの適用、CSSの構築などを自分で処理する必要があることを意味します）。

import { defineConfig, toEscapedSelector as e } from 'unocss'

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // マッチしないルールを破棄
      if (name.includes('something'))
        return

      // 必要に応じて、このルールのバリアントを無効化できます
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // オブジェクトの代わりに文字列を返す
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* 複数のルールを持つことができます */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* またはメディアクエリ */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})