ルール

ルールは、ユーティリティクラスと結果の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 }],
]

動的ルール

よりスマートにするには、matcherをRegExpに変更し、bodyを関数に変更します。

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

body関数の最初の引数は、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: [
  [/^w-(\d+)dvh$/, ([_, d]) => {
    return [
      ['width', `${d}vh`],
      ['width', `${d}dvh`],
    ]
  }],
]

これにより、w-100dvhは次のように生成されます。

.w-100dvh { width: 100vh; width: 100dvh; }

順序

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

動的ルールを使用する場合、複数のトークンに一致することがあります。デフォルトでは、単一の動的ルールで一致したそれらの出力は、グループ内でアルファベット順にソートされます。

ルールのマージ

デフォルトでは、UnoCSSは同じbodyを持つ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：ショートカットで現在のルールのマージを無効にするブール値

マルチセレクタールール

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

例えば

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);
}

完全に制御されたルール

ヒント

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

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

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

uno.config.ts

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

export default defineConfig({
  rules: [
    [/^custom-(.+)$/, ([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
      // discard mismatched rules
      if (name.includes('something'))
        return

      // if you want, you can disable the variants for this rule
      if (variantHandlers.length)
        return
      const selector = e(rawSelector)
      // return a string instead of an object
      return `
${selector} {
  font-size: ${theme.fontSize.sm};
}
/* you can have multiple rules */
${selector}::after {
  content: 'after';
}
.foo > ${selector} {
  color: red;
}
/* or media queries */
@media (min-width: ${theme.breakpoints.sm}) {
  ${selector} {
    font-size: ${theme.fontSize.sm};
  }
}
`
    }],
  ],
})