UnoCSS

外観

抽出 ​

UnoCSSは、コードベースからユーティリティの使用箇所を検索し、対応するCSSをオンデマンドで生成することで動作します。このプロセスを**抽出**と呼びます。

コンテンツソース ​

UnoCSSは、複数のソースからのユーティリティの使用箇所の抽出をサポートしています。

  • パイプライン - ビルドツールパイプラインから直接抽出します。
  • ファイルシステム - ファイルを読み取り、監視することでファイルシステムから抽出します。
  • インライン - インラインプレーンテキストから抽出します。

異なるソースからのユーティリティの使用箇所はマージされ、最終的なCSSが生成されます。

ビルドツールパイプラインからの抽出 ​

これは、ViteとWebpackの統合でサポートされています。

UnoCSSは、ビルドツールパイプラインを通過するコンテンツを読み取り、そこからユーティリティの使用箇所を抽出します。これは、抽出中に追加のファイルI/Oが行われないため、アプリケーションで実際に使用されている使用箇所のみをスマートに抽出する、最も効率的で正確な抽出方法です。

デフォルトでは、UnoCSSはビルドパイプライン内の拡張子が.jsx、.tsx、.vue、.md、.html、.svelte、.astroのファイルからユーティリティの使用箇所を抽出し、オンデマンドで適切なCSSを生成します。 .jsおよび.tsファイルは**デフォルトでは含まれていません**。

設定するには、uno.config.tsを更新します。

uno.config.ts
ts
export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
      // exclude files
      // exclude: []
    },
  },
})

また、UnoCSSにスキャンさせたいファイルの任意の場所に、ファイルごとに@unocss-includeマジックコメントを追加することもできます。 *.jsまたは*.tsファイルをスキャンする必要がある場合は、設定にそれらを追加して、すべてのjs/tsファイルをスキャン対象として含めます。

ts
// ./some-utils.js

// since `.js` files are not included by default,
// the following comment tells UnoCSS to force scan this file.
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
  inactive: 'bg-gray-200 text-gray-500',
}

同様に、ファイル全体のスキャンと変換をバイパスするために、@unocss-ignoreを追加することもできます。

抽出ファイルで抽出されずに、UnoCSSにコードブロックをスキップさせたい場合は、@unocss-skip-start @unocss-skip-endをペアで使用できます。 効果を発揮するには、**必ずペアで**使用する必要があります。

html
<p class="text-green text-xl">
  Green Large
</p>

<!-- @unocss-skip-start -->
<!-- `text-red` will not be extracted -->
<p class="text-red">
  Red
</p>
<!-- @unocss-skip-end -->

ファイルシステムからの抽出 ​

ビルドツールパイプラインにアクセスできない統合（PostCSSプラグインなど）を使用している場合、またはコードがパイプラインを通過しないバックエンドフレームワークと統合している場合は、抽出するファイルをmanually指定できます。

uno.config.ts
ts
export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

一致したファイルは、ファイルシステムから直接読み取られ、開発モードでは変更が監視されます。

インラインテキストからの抽出 ​

さらに、他の場所から取得したインラインテキストからユーティリティの使用箇所を抽出することもできます。

コンテンツを返す非同期関数 übergebenすることもできます。ただし、関数はビルド時に一度だけ呼び出されることに注意してください。

uno.config.ts
ts
export default defineConfig({
  content: {
    inline: [
      // plain text
      '<div class="p-4 text-red">Some text</div>',
      // async getter
      async () => {
        const response = await fetch('https://example.com')
        return response.text()
      },
    ],
  },
})

制限事項 ​

UnoCSSは**ビルド時**に動作するため、静的に提示されたユーティリティのみが生成され、アプリケーションに出荷されます。実行時に動的に使用されるか、外部リソースから取得されるユーティリティは、検出または適用されない**可能性があります**。

セーフリスト ​

次のような動的な連結を使用する場合があります。

html
<div class="p-${size}"></div> <!-- this won't work! -->

UnoCSSはビルド時に静的抽出を使用して動作するため、コンパイル時にすべてのユーティリティの組み合わせを知ることはできません。そのため、`safelist`オプションを設定できます。

uno.config.ts
ts
safelist: 'p-1 p-2 p-3 p-4'.split(' ')

対応するCSSは常に生成されます。

css
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

または、より柔軟に

uno.config.ts
ts
safelist: [
  ...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
]

実行時に真の動的生成が必要な場合は、@unocss/runtimeパッケージを確認してください。

静的リストの組み合わせ ​

動的に構築されたユーティリティの制限を回避する別の方法は、すべての組み合わせを**静的に**リストするオブジェクトを使用することです。たとえば、次のような場合

html
<div class="text-${color} border-${color}"></div> <!-- this won't work! -->

すべての組み合わせをリストするオブジェクトを作成できます（使用する`color`の可能な値がすべてわかっていると仮定します）。

ts
// Since they are static, UnoCSS will able to extract them on build time
const classes = {
  red: 'text-red border-red',
  green: 'text-green border-green',
  blue: 'text-blue border-blue',
}

そして、テンプレートで使用します。

html
<div class="${classes[color]}"></div>

ブロックリスト ​

`safelist`と同様に、`blocklist`を設定して、一部のユーティリティが生成されないようにすることもできます。これは、抽出の誤検知を除外するのに役立ちます。 `safelist`とは異なり、`blocklist`は完全一致の文字列とパターン一致の正規表現の両方を受け入れます。

uno.config.ts
ts
blocklist: [
  'p-1',
  /^p-[2-4]$/,
]

これは、`p-1`と`p-2`、`p-3`、`p-4`が生成されないようにします。

MITライセンスでリリースされています。

Copyright © 2021-PRESENT Anthony Fu