brand logo

UnoCSS

UnoCSS Vite プラグイン

UnoCSS の Vite プラグイン (@unocss/vite)。

Vite プラグイン

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

インストール

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

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

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

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

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

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

export default defineConfig({
  // ...UnoCSS オプション
})

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

main.ts
import 'virtual:uno.css'

モード

Vite プラグインには、異なる動作を可能にする一連のモードが用意されています。

global (デフォルト)

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

このモードは、build 用と dev 用の HMR サポート付きの一連の Vite プラグインを有効にします。

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

vue-scoped

このモードは、Vue SFC の <style> に生成された CSS を注入して隔離します。

svelte-scoped

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

shadow-dom

Web Components は Shadow DOM を使用するため、グローバルスタイルシートから直接コンテンツをスタイルする方法はありません（CSS カスタムプロパティ を使用する場合を除き、これらは Shadow DOM を貫通します）。プラグインによって生成された CSS を Shadow DOM スタイルにインライン化する必要があります。

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

per-module (実験的)

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

dist-chunk (実験的)

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

DevTools でクラスを編集

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

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

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

フレームワーク

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

VanillaJS / TypeScript

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

React

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

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

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

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

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

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

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

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

Preact

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

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

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

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

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

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

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

Preact の例プロジェクトが examples/vite-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
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
import { sveltekit } from '@sveltejs/kit/vite'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

Web Components

ウェブコンポーネントを使用するには、プラグインで shadow-dom モードを有効にする必要があります。

uno.css のインポートを削除することを忘れないでください。shadow-dom モードでは公開されず、アプリケーションは動作しません。

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

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

各 web component には、そのスタイル CSS ブロックに @unocss-placeholder を追加するだけです:

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

Lit を使用している場合:

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

Web Components の例プロジェクトが examples/vite-lit ディレクトリにあります。

::part ビルトインサポート

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

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

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

vite.config.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 */
    }),
  ],
}

その後、ウェブコンポーネント内で:

// 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>
`

// 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

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

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

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

Elm

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

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

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

Marko

@marko/vite または @marko/run/vite を UnoCSS のプラグインの前に追加する必要があります。

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

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

レガシー

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

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

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

ライセンス

© 2021–PRESENT Anthony Fu https://github.com/antfu

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
#