Vite Plugin

Vite plugin je dodávaný s balíkom unocss.

Inštalácia

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Nainštalujte plugin:

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

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

Vytvorte súbor uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS možnosti
})

Pridajte virtual:uno.css do vášho hlavného vstupu:

import 'virtual:uno.css'

Režimy

Vite plugin prichádza so sadou režimov, ktoré umožňujú rôzne správania.

global (predvolené)

Toto je predvolený režim pre plugin: v tomto režime musíte pridať import uno.css do vášho vstupného bodu.

Tento režim umožňuje sadu Vite pluginov pre build a pre dev s podporou HMR.

Vygenerované css bude globálny stylesheet vstreknutý do index.html.

vue-scoped

Tento režim vstrekne vygenerované CSS do Vue SFCs <style scoped> pre izoláciu.

svelte-scoped

Režim svelte-scoped bol presunutý do vlastného balíka, pozrite @unocss/svelte-scoped/vite.

shadow-dom

Keďže Web Components používa Shadow DOM, neexistuje spôsob, ako štýlovať obsah priamo z globálneho stylesheetu (pokiaľ nepoužívate CSS custom properties, tie preniknú Shadow DOM), musíte vložiť vygenerované CSS pluginom do štýlu Shadow DOM.

Na vloženie vygenerovaného CSS stačí nakonfigurovať režim pluginu na shadow-dom a zahrnúť kúzelné miesto @unocss-placeholder do každého bloku CSS štýlu webového komponentu. Ak definujete svoje webové komponenty vo Vue SFC a chcete definovať vlastné štýly spolu s UnoCSS, môžete zabaliť miesto do CSS komentára, aby ste sa vyhli chybám syntaxe vo vašom IDE.

per-module (experimentálne)

Tento režim vygeneruje CSS sheet pre každý modul, môže byť scoped.

dist-chunk (experimentálne)

Tento režim vygeneruje CSS sheet pre každý kódový chunk pri zostavení, skvelé pre MPA.

Editácia tried v DevTools

Kvôli obmedzeniu "on-demand", kde DevTools nepoznajú tie, ktoré ste ešte nepoužili vo vašom zdrojovom kóde. Ak chcete vyskúšať, ako veci fungujú priamou zmenou tried v DevTools, jednoducho pridajte nasledujúce riadky do vášho hlavného vstupu.

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

WARNING

Prosím, používajte to opatrne, pod kapotou používame MutationObserver na detekciu zmien tried. Čo znamená, že nielen vaše manuálne zmeny, ale aj zmeny vykonané vašimi skriptami budú detekované a zahrnuté do stylesheetu. To môže spôsobiť niektoré nezhody medzi vývojom a produkčným zostavením, keď pridáte dynamické triedy založené na nejakej logike v skriptoch. Odporúčame pridať vaše dynamické časti do safelist alebo nastaviť UI regresné testy pre vaše produkčné zostavenie, ak je to možné.

Frameworky

Niektoré UI/App frameworky majú určité problémy, ktoré je potrebné opraviť, aby fungovali. Ak používate jeden z nasledujúcich frameworkov, jednoducho aplikujte návrhy.

VanillaJS / TypeScript

Pri používaní VanillaJS alebo TypeScript musíte pridať prípony súborov js a ts, aby UnoCSS mohol čítať a analyzovať obsah. Predvolene sú súbory js a ts vylúčené, pozrite si sekciu Extrahovanie z Build Tools Pipeline.

React

Ak používate @vitejs/plugin-react:

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

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

Ak používate @unocss/preset-attributify, mali by ste odstrániť tsc zo skriptu build.

Ak používate @vitejs/plugin-react s @unocss/preset-attributify, musíte pridať plugin pred @vitejs/plugin-react.

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

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

Príklad projektu React používajúceho oba pluginy nájdete v adresári examples/vite-react, skontrolujte skripty v package.json a konfiguračnom súbore Vite.

Preact

Ak používate @preact/preset-vite:

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

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

Alebo ak používate @prefresh/vite:

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

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

Ak používate @unocss/preset-attributify, mali by ste odstrániť tsc zo skriptu build.

Príklad projektu Preact používajúceho oba pluginy nájdete v adresári examples/vite-preact, skontrolujte skripty v package.json a konfiguračnom súbore Vite.

Svelte

Plugin musí byť pridaný pred @sveltejs/vite-plugin-svelte.

Na podporu class:foo a class:foo={bar}, pridajte plugin a nakonfigurujte extractorSvelte v možnosti extractors.

Môžete použiť jednoduché pravidlá pre class: ako class:bg-red-500={foo} alebo použiť shortcuts obsahujúce viacero pravidiel, pozrite src/App.svelte v príklade projektu nižšie.

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

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* viac možností */
    }),
    svelte(),
  ],
}

Sveltekit

Na podporu class:foo a class:foo={bar}, pridajte plugin a nakonfigurujte extractorSvelte v možnosti extractors.

Môžete použiť jednoduché pravidlá pre class: ako class:bg-red-500={foo} alebo použiť shortcuts obsahujúce viacero pravidiel, pozrite src/routes/+layout.svelte v príklade projektu nižšie.

// vite.config.js
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(),
      ],
      /* viac možností */
    }),
    sveltekit(),
  ],
}

Web Components

Na prácu s webovými komponentmi musíte povoliť režim shadow-dom na plugine.

Nezabudnite odstrániť import pre uno.css, pretože režim shadow-dom ho nebude exponovať a aplikácia nebude fungovať.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* viac možností */
    }),
  ],
}

Na každom web component jednoducho pridajte @unocss-placeholder do jeho bloku CSS štýlu:

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

Ak používate Lit:

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

Máte príklad projektu Web Components v adresári examples/vite-lit.

::part vstavaná podpora

Môžete použiť ::part, keďže plugin ho podporuje cez shortcuts a používanie pravidla part-[<part-name>]:<rule|shortcut> z preset-mini, napríklad použitie s jednoduchými pravidlami ako part-[<part-name>]:bg-green-500 alebo použitie niektorého shortcut: skontrolujte src/my-element.ts v príklade projektu nižšie.

part-[<part-name>]:<rule|shortcut> bude fungovať iba s týmto pluginom používajúcim režim shadow-dom.

Plugin používa nth-of-type na vyhnutie sa kolíziám s viacerými časťami v tom istom webovom komponente a pre rovnaké časti na rôznych webových komponentoch, nemusíte sa o to starať, plugin sa o to postará.

// vite.config.js
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' },
      ],
      /* viac možností */
    }),
  ],
}

potom vo vašich webových komponentoch:

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

Musíte pridať plugin vite-plugin-solid po plugine UnoCSS.

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

export default {
  plugins: [
    UnoCSS({
      /* možnosti */
    }),
    solidPlugin(),
  ],
}

Príklad projektu Solid nájdete v adresári examples/vite-solid.

Elm

Musíte pridať plugin vite-plugin-elm pred plugin UnoCSS.

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

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

Príklad projektu Elm nájdete v adresári examples/vite-elm.

Príklady

Základný príklad

Základný príklad projektu Vite nájdete v adresári examples/vite-basic.

Príklady frameworkov

Poskytujeme príklady projektov pre rôzne frameworky:

• Vite React Example
• Vite Preact Example
• Vite Svelte Example
• Vite Vue Example

Performance