Plugin Vite

O plugin Vite é fornecido com o pacote unocss.

Instalação

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Instale o plugin:

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

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

Crie um arquivo uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...opções do UnoCSS
})

Adicione virtual:uno.css ao seu ponto de entrada:

import 'virtual:uno.css'

Modos

O plugin Vite vem com um conjunto de modos que habilitam diferentes comportamentos.

global (padrão)

Este é o modo padrão do plugin: neste modo, você precisa adicionar a importação de uno.css no seu ponto de entrada.

Este modo habilita um conjunto de plugins Vite para build e para dev com suporte a HMR.

O css gerado será uma folha de estilo global injetada no index.html.

vue-scoped

Este modo irá injetar o CSS gerado nos <style scoped> dos Vue SFCs para isolamento.

svelte-scoped

O modo svelte-scoped foi movido para seu próprio pacote, consulte @unocss/svelte-scoped/vite.

shadow-dom

Como os Web Components usam Shadow DOM, não há como estilizar o conteúdo diretamente a partir de uma folha de estilo global (a menos que você use propriedades CSS personalizadas, que penetrarão o Shadow DOM), você precisa inserir o CSS gerado pelo plugin no estilo do Shadow DOM.

Para inserir o CSS gerado, você só precisa configurar o modo do plugin para shadow-dom e incluir o espaço reservado mágico @unocss-placeholder em cada bloco de estilo CSS do componente web. Se você estiver definindo seus Web Components em Vue SFCs e quiser definir estilos personalizados junto com o UnoCSS, pode envolver o espaço reservado em um comentário CSS para evitar erros de sintaxe em seu IDE.

per-module (experimental)

Este modo irá gerar uma folha de estilo CSS para cada módulo, podendo ser com escopo.

dist-chunk (experimental)

Este modo irá gerar uma folha de estilo CSS para cada fragmento de código na compilação, ótimo para MPA.

Editar classes no DevTools

Devido à limitação do "sob demanda", onde o DevTools não conhece aquelas que você ainda não usou em seu código-fonte. Então, se você quiser experimentar como as coisas funcionam alterando diretamente as classes no DevTools, basta adicionar as seguintes linhas ao seu ponto de entrada.

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

WARNING

Use com cautela, nos bastidores usamos MutationObserver para detectar as mudanças de classe. Isso significa que não apenas suas alterações manuais, mas também as alterações feitas por seus scripts serão detectadas e incluídas na folha de estilo. Isso pode causar algum desalinhamento entre o desenvolvimento e a compilação de produção quando você adiciona classes dinâmicas com base em alguma lógica em tags de script. Recomendamos adicionar suas partes dinâmicas à lista de segurança ou configurar testes de regressão de UI para sua compilação de produção, se possível.

Frameworks

Some UI/App frameworks have some caveats that must be fixed to make it work, if you're using one of the following frameworks, just apply the suggestions.

VanillaJS / TypeScript

When using VanillaJS or TypeScript, you need to add js and ts files extensions to allow UnoCSS read and parse the content, by default js and ts files are excluded, check out the Extracting from Build Tools Pipeline section.

React

If you're using @vitejs/plugin-react:

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

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

If you're using @unocss/preset-attributify you should remove tsc from the build script.

If you are using @vitejs/plugin-react with @unocss/preset-attributify, you must add the plugin before @vitejs/plugin-react.

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

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

You have a React example project on examples/vite-react directory using both plugins, check the scripts on package.json and its Vite configuration file.

Preact

If you're using @preact/preset-vite:

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

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

or if you're using @prefresh/vite:

import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

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

If you're using @unocss/preset-attributify you should remove tsc from the build script.

You have a Preact example project on examples/vite-preact directory using both plugins, check the scripts on package.json and its Vite configuration file.

Svelte

You must add the plugin before @sveltejs/vite-plugin-svelte.

To support class:foo and class:foo={bar} add the plugin and configure extractorSvelte on extractors option.

You can use simple rules with class:, for example class:bg-red-500={foo} or using shortcuts to include multiples rules, see src/App.svelte on linked example project below.

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

To support class:foo and class:foo={bar} add the plugin and configure extractorSvelte on extractors option.

You can use simple rules with class:, for example class:bg-red-500={foo} or using shortcuts to include multiples rules, see src/routes/+layout.svelte on linked example project below.

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

Para trabalhar com web components, você precisa habilitar o modo shadow-dom no plugin.

Não se esqueça de remover a importação de uno.css já que o modo shadow-dom não o expõe e o aplicativo não funcionará.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* mais opções */
    }),
  ],
}

Em cada web component, basta adicionar @unocss-placeholder ao seu bloco de estilo CSS:

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

Se você estiver usando Lit:

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

Você tem um projeto de exemplo de Web Components no diretório examples/vite-lit.

Suporte integrado para ::part

Você pode usar ::part já que o plugin o suporta via shortcuts e usando a regra part-[<part-name>]:<rule|shortcut> do preset-mini, por exemplo, usando-o com regras simples como part-[<part-name>]:bg-green-500 ou usando algum shortcut: verifique src/my-element.ts no projeto de exemplo vinculado abaixo.

O part-[<part-name>]:<rule|shortcut> funcionará apenas com este plugin usando o modo shadow-dom.

O plugin usa nth-of-type para evitar colisões com várias partes no mesmo web component e para as mesmas partes em web components distintos, você não precisa se preocupar com isso, o plugin cuidará disso para você.

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' },
      ],
      /* mais opções */
    }),
  ],
}

então em seus web components:

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

Você precisa adicionar o plugin vite-plugin-solid após o plugin do UnoCSS.

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

export default {
  plugins: [
    UnoCSS({
      /* opções */
    }),
    solidPlugin(),
  ],
}

Elm

Você precisa adicionar o plugin vite-plugin-elm antes do plugin do UnoCSS.

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

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

Legado

Se @vitejs/plugin-legacy com renderModernChunks: false, você precisa adicioná-lo às opções do 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,
    }),
  ],
})

Licença

• Licença MIT © 2021-PRESENTE Anthony Fu