Плагин Vite

Плагин поставляется с пакетом unocss.

Установка

pnpmyarnnpmbun

bash

pnpm add -D unocss

bash

yarn add -D unocss

bash

npm install -D unocss

bash

bun add -D unocss

Установите плагин:

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

Создайте файл uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...Параметры UnoCSS
})

Добавьте virtual:uno.css в ваш основной файл входа:

import 'virtual:uno.css'

Режимы

Плагин Vite поставляется с набором режимов, которые включают различные поведения.

`global` (по умолчанию)

Это режим по умолчанию для плагина: в этом режиме вам нужно добавить импорт uno.css в точку входа.

Этот режим включает набор плагинов Vite для build и dev с поддержкой HMR.

Сгенерированный css будет глобальной таблицей стилей, внедренной в index.html.

`vue-scoped`

Этот режим внедрит сгенерированный CSS в Vue SFC <style scoped> для изоляции.

`svelte-scoped`

Режим svelte-scoped был перемещен в отдельный пакет, смотрите @unocss/svelte-scoped/vite.

`shadow-dom`

Поскольку Web Components использует Shadow DOM, нет способа напрямую стилизовать содержимое из глобальной таблицы стилей (если только вы не используете CSS custom properties, которые проникают в Shadow DOM), вам нужно встроить сгенерированный плагином CSS в стиль Shadow DOM.

Чтобы встроить сгенерированный CSS, вам нужно только настроить режим плагина на shadow-dom и включить магический заполнитель @unocss-placeholder в каждый блок стиля CSS веб-компонента. Если вы определяете свои веб-компоненты в Vue SFC и хотите определить пользовательские стили вместе с UnoCSS, вы можете обернуть заполнитель в комментарий CSS, чтобы избежать синтаксических ошибок в вашей IDE.

`per-module` (экспериментальный)

Этот режим будет генерировать таблицу стилей CSS для каждого модуля, может быть ограничен.

`dist-chunk` (экспериментальный)

Этот режим будет генерировать таблицу стилей CSS для каждого кода при сборке, отлично подходит для MPA.

Редактирование классов в DevTools

Из-за ограничений "по требованию", где DevTools не знают тех, которые вы еще не использовали в исходном коде. Поэтому, если вы хотите попробовать, как все работает, напрямую изменяя классы в DevTools, просто добавьте следующие строки в вашу точку входа.

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

WARNING

Используйте с осторожностью, под капотом мы используем MutationObserver для обнаружения изменений класса. Это означает, что будут обнаружены и включены в таблицу стилей не только ваши ручные изменения, но и изменения, сделанные вашими скриптами. Это может вызвать некоторое несоответствие между разработкой и производственной сборкой, когда вы добавляете динамические классы на основе некоторой логики в тегах скрипта. Мы рекомендуем добавлять ваши динамические части в список безопасных классов или настроить UI-тесты регрессии для вашей производственной сборки, если это возможно.

Фреймворки

Некоторые UI/App фреймворки имеют особенности, которые необходимо исправить, чтобы все заработало. Если вы используете один из следующих фреймворков, просто примените предложенные рекомендации.

VanillaJS / TypeScript

При использовании VanillaJS или TypeScript вам нужно добавить расширения файлов js и ts, чтобы разрешить UnoCSS читать и анализировать содержимое. По умолчанию файлы js и ts исключены, ознакомьтесь с разделом Извлечение из конвейера инструментов сборки.

React

Если вы используете @vitejs/plugin-react:

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

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

Если вы используете @unocss/preset-attributify, вы должны удалить tsc из скрипта build.

Если вы используете @vitejs/plugin-react с @unocss/preset-attributify, вы должны добавить плагин перед @vitejs/plugin-react.

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.js
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

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

Или если вы используете @prefresh/vite:

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

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

Если вы используете @unocss/preset-attributify, вам следует удалить tsc из скрипта build.

Вы можете найти пример проекта Preact с использованием обоих плагинов в каталоге examples/vite-preact, проверьте скрипты в package.json и файл конфигурации Vite.

Svelte

Плагин должен быть добавлен перед @sveltejs/vite-plugin-svelte.

Для поддержки class:foo и class:foo={bar} добавьте плагин и настройте extractorSvelte в опции extractors.

Вы можете использовать простые правила для class:, например class:bg-red-500={foo} или использовать shortcuts с несколькими правилами, см. src/App.svelte в примере проекта по ссылке ниже.

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

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* больше опций */
    }),
    svelte(),
  ],
}

Sveltekit

Для поддержки class:foo и class:foo={bar} добавьте плагин и настройте extractorSvelte в опции extractors.

Вы можете использовать простые правила для class:, например class:bg-red-500={foo} или использовать shortcuts с несколькими правилами, см. src/routes/+layout.svelte в примере проекта по ссылке ниже.

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

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* больше опций */
    }),
    sveltekit(),
  ],
}

Web Components

Чтобы работать с веб-компонентами, вам нужно включить режим shadow-dom на плагине.

Не забудьте удалить импорт для uno.css, так как режим shadow-dom не будет его экспортировать, и приложение не будет работать.

import UnoCSS from 'unocss/vite'

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

На каждом веб-компоненте просто добавьте @unocss-placeholder к его блоку стиля CSS:

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`

Вы можете использовать ::part так как плагин поддерживает его через shortcuts и используя правило part-[<part-name>]:<rule|shortcut> из preset-mini, например используя его с простыми правилами, как part-[<part-name>]:bg-green-500 или используя некоторые shortcut: проверьте src/my-element.ts в связанном примере проекта ниже.

Правило part-[<part-name>]:<rule|shortcut> будет работать только с этим плагином, используя режим shadow-dom.

Плагин использует nth-of-type для избежания коллизий с несколькими частями в одном веб-компоненте и для одинаковых частей на разных веб-компонентах, вам не нужно беспокоиться об этом, плагин позаботится за вас.

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.

import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

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

Elm

Вам нужно добавить плагин vite-plugin-elm перед плагином UnoCSS.

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

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

Legacy

Если @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,
    }),
  ],
})

Плагин Vite ​

Установка ​

Режимы ​

global (по умолчанию) ​

vue-scoped ​

svelte-scoped ​

shadow-dom ​

per-module (экспериментальный) ​

dist-chunk (экспериментальный) ​

Редактирование классов в DevTools ​

Фреймворки ​

VanillaJS / TypeScript ​

React ​

Preact ​

Svelte ​

Sveltekit ​

Web Components ​

Встроенная поддержка ::part ​

Solid ​

Elm ​

Legacy ​

Лицензия ​

Плагин Vite

Установка

Режимы

`global` (по умолчанию)

`vue-scoped`

`svelte-scoped`

`shadow-dom`

`per-module` (экспериментальный)

`dist-chunk` (экспериментальный)

Редактирование классов в DevTools

Фреймворки

VanillaJS / TypeScript

React

Preact

Svelte

Sveltekit

Web Components

Встроенная поддержка `::part`

Solid

Elm

Legacy

Лицензия