UnoCSS

外観

Vite プラグイン ​

Vite プラグインは unocss パッケージに同梱されています。

インストール ​

bash
pnpm add -D unocss
bash
yarn add -D unocss
bash
npm install -D unocss

プラグインをインストールします

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

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

uno.config.ts ファイルを作成します

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

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

メインエントリに virtual:uno.css を追加します

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

モード ​

Vite プラグインには、異なる動作を有効にするモードがいくつかあります。

global (デフォルト) ​

これはプラグインのデフォルトモードです。このモードでは、エントリポイントに uno.css のインポートを追加する必要があります。

このモードでは、build 用と HMR をサポートする dev 用の Vite プラグインのセットが有効になります。

生成された css は、index.html に挿入されるグローバルスタイルシートになります。

vue-scoped ​

このモードは、生成された CSS を分離するために Vue SFC の <style scoped> に挿入します。

`svelte-scoped` ​

svelte-scoped モードは独自のパッケージに移動されました。 @unocss/svelte-scoped/vite を参照してください。

shadow-dom ​

Web コンポーネント は Shadow DOM を使用するため、グローバルスタイルシートからコンテンツを直接スタイルする方法はありません (CSS カスタムプロパティ を使用しない限り、これらは Shadow DOM に浸透します)。プラグインによって生成された CSS を Shadow DOM スタイルにインライン化する必要があります。

生成された CSS をインライン化するには、プラグインモードを shadow-dom に設定し、各 Web コンポーネントスタイルの CSS ブロックに @unocss-placeholder マジックプレースホルダーを含めるだけです。Vue SFC で Web コンポーネントを定義し、UnoCSS とともにカスタムスタイルを定義する場合は、プレースホルダーを CSS コメントで囲むことで、IDE での構文エラーを回避できます。

per-module (実験的) ​

このモードは、モジュールごとに CSS シートを生成します。スコープを設定できます。

dist-chunk (実験的) ​

このモードは、ビルド時にコードチャンクごとに CSS シートを生成します。MPA に最適です。

DevTools でクラスを編集する ​

「オンデマンド」の制限により、DevTools はソースコードで使用していないクラスを認識しません。そのため、DevTools でクラスを直接変更して動作を試したい場合は、メインエントリに次の行を追加してください。

ts
import 'uno.css'
import 'virtual:unocss-devtools'

警告

注意して使用してください。内部的には、MutationObserver を使用してクラスの変更を検出しています。つまり、手動による変更だけでなく、スクリプトによる変更も検出され、スタイルシートに含まれます。これにより、スクリプトタグのロジックに基づいて動的クラスを追加する場合、開発ビルドと本番ビルドの間に不整合が生じる可能性があります。可能であれば、動的な部分を セーフリスト に追加するか、本番ビルドの UI リグレッションテストを設定することをお勧めします。

フレームワーク ​

UI/アプリフレームワークの中には、動作させるために修正が必要な注意点がいくつかあります。以下のフレームワークのいずれかを使用している場合は、提案を適用してください。

VanillaJS / TypeScript ​

VanillaJS または TypeScript を使用する場合、UnoCSS がコンテンツを読み取って解析できるように、js および ts ファイル拡張子を追加する必要があります。デフォルトでは、js および ts ファイルは除外されます。 ビルドツールパイプラインからの抽出 セクションを確認してください。

React ​

@vitejs/plugin-react を使用している場合

vite.config.ts
ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    React(),
    UnoCSS(),
  ],
}

@unocss/preset-attributify を使用している場合は、build スクリプトから tsc を削除する必要があります。

@vitejs/plugin-react と @unocss/preset-attributify を一緒に使用している場合は、@vitejs/plugin-react の前にプラグインを追加する必要があります。

vite.config.ts
ts
import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    React(),
  ],
}

examples/vite-react ディレクトリに、両方のプラグインを使用した React のサンプルプロジェクトがあります。package.json のスクリプトと Vite 設定ファイルを確認してください。

Preact ​

@preact/preset-vite を使用している場合

vite.config.ts
ts
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}

または @prefresh/vite を使用している場合

vite.config.ts
ts
import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Prefresh(),
  ],
}

@unocss/preset-attributify を使用している場合は、build スクリプトから tsc を削除する必要があります。

examples/vite-preact ディレクトリに、両方のプラグインを使用した Preact のサンプルプロジェクトがあります。package.json のスクリプトと Vite 設定ファイルを確認してください。

Svelte ​

@sveltejs/vite-plugin-svelte の前にプラグインを追加する必要があります。

class:foo と class:foo={bar} をサポートするには、プラグインを追加し、extractors オプションで extractorSvelte を設定します。

class: を使用して単純なルールを使用できます。たとえば、class:bg-red-500={foo} や、shortcuts を使用して複数のルールを含めることができます。以下のリンクされたサンプルプロジェクトの src/App.svelte を参照してください。

vite.config.ts
ts
import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    svelte(),
  ],
}

Sveltekit ​

class:foo と class:foo={bar} をサポートするには、プラグインを追加し、extractors オプションで extractorSvelte を設定します。

class: を使用して単純なルールを使用できます。たとえば、class:bg-red-500={foo} や、shortcuts を使用して複数のルールを含めることができます。以下のリンクされたサンプルプロジェクトの src/routes/+layout.svelte を参照してください。

vite.config.ts
ts
import { sveltekit } from '@sveltejs/kit/vite'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    sveltekit(),
  ],
}

Web コンポーネント ​

Web コンポーネントを操作するには、プラグインで shadow-dom モードを有効にする必要があります。

shadow-dom モードでは uno.css が公開されないため、アプリケーションが機能しなくなるため、uno.css のインポートを削除することを忘れないでください。

vite.config.ts
ts
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* more options */
    }),
  ],
}

各 web コンポーネント のスタイル CSS ブロックに @unocss-placeholder を追加します

ts
const template = document.createElement('template')
template.innerHTML = `
<style>
:host {...}
@unocss-placeholder
</style>
<div class="m-1em">
...
</div>
`

Lit を使用している場合

ts
@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host {...}
    @unocss-placeholder
  `
  // ...
}

examples/vite-lit ディレクトリに Web コンポーネント のサンプルプロジェクトがあります。

::part 組み込みサポート ​

プラグインは shortcuts と preset-mini からの part-[<part-name>]:<rule|shortcut> ルールを使用して ::part をサポートしているため、使用できます。たとえば、part-[<part-name>]:bg-green-500 のような単純なルールで使用したり、shortcut を使用したりできます。以下のリンクされたサンプルプロジェクトの src/my-element.ts を確認してください。

part-[<part-name>]:<rule|shortcut> は、このプラグインで shadow-dom モードを使用する場合にのみ機能します。

プラグインは、同じ Web コンポーネント内の複数の部分と、異なる Web コンポーネントの同じ部分との衝突を回避するために nth-of-type を使用します。心配する必要はありません。プラグインが処理します。

vite.config.ts
ts
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      shortcuts: [
        { 'cool-blue': 'bg-blue-500 text-white' },
        { 'cool-green': 'bg-green-500 text-black' },
      ],
      /* more options */
    }),
  ],
}

Web コンポーネントでは

ts
// my-container-wc.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<my-wc-with-parts class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-green">...</my-wc-with-parts>
`
ts
// my-wc-with-parts.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<div>
  <div part="cool-part">...</div>
  <div part="another-cool-part">...</div>
</div>
`

Solid ​

UnoCSS のプラグインの後に vite-plugin-solid プラグインを追加する必要があります。

vite.config.ts
ts
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS({
      /* options */
    }),
    solidPlugin(),
  ],
}

Elm ​

UnoCSS のプラグインの前に vite-plugin-elm プラグインを追加する必要があります。

vite.config.ts
ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import Elm from 'vite-plugin-elm'

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

レガシー ​

@vitejs/plugin-legacy と renderModernChunks: false を使用する場合は、unocss オプションに追加する必要があります

ts
import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
import { presetUno } from 'unocss'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [presetUno()],
      legacy: {
        renderModernChunks: false,
      },
    }),
    legacy({
      targets: ['defaults', 'not IE 11'],
      renderModernChunks: false,
    }),
  ],
})

ライセンス ​

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

著作権 © 2021年～現在 Anthony Fu