UnoCSS Ekstrakcija

UnoCSS deluje z iskanjem uporab pripomočkov iz vaše kode in generiranjem ustreznega CSS na zahtevo. Ta proces imenujemo ekstrakcija.

Viri vsebine

UnoCSS podpira ekstrakcijo uporab pripomočkov iz več virov:

• Pipeline - Ekstrakcija neposredno iz cevovoda vaših gradbenih orodij
• Datotečni sistem - Ekstrakcija iz vašega datotečnega sistema z branjem in nadzorovanjem datotek
• Inline - Ekstrakcija iz inline navadnega besedila

Uporabe pripomočkov, ki prihajajo iz različnih virov, bodo združene skupaj in generirale končni CSS.

Ekstrakcija iz cevovoda gradbenih orodij

To je podprto v integracijah Vite in Webpack.

UnoCSS bo prebral vsebino, ki gre skozi cevovod vaših gradbenih orodij in izvlekel uporabe pripomočkov iz njih. To je najučinkovitejši in najbolj natančen način ekstrakcije, saj ekstrahiramo le uporabe, ki so dejansko uporabljene v vaši aplikaciji, pametno brez dodatnih datotečnih I/O operacij med ekstrakcijo.

Privzeto bo UnoCSS izvlekel uporabe pripomočkov iz datotek v vašem cevovodu z razširitvami .jsx, .tsx, .vue, .md, .html, .svelte, .astro in nato generiral ustrezen CSS na zahtevo. Datoteke .js in .ts niso vključene privzeto.

Za njihovo konfiguracijo lahko posodobite vaš uno.config.ts:

export default defineConfig({
  content: {
    pipeline: {
      include: [
        // privzeto
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // vključi js/ts datoteke
        'src/**/*.{js,ts}',
      ],
      // izključi datoteke
      // exclude: []
    },
  },
})

Prav tako lahko dodate čarobni komentar @unocss-include, na ravni datoteke, kjerkoli v datoteki, ki jo želite, da UnoCSS skenira. Če potrebujete skeniranje *.js ali *.ts datotek, jih dodajte v konfiguracijo za vključitev vseh js/ts datotek kot ciljev skeniranja.

// ./some-utils.js

// ker `.js` datoteke niso vključene privzeto,
// naslednji komentar pove UnocCSS, da prisilno skenira to datoteko.
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
  inactive: 'bg-gray-200 text-gray-500',
}

Podobno lahko dodate tudi @unocss-ignore za obhod skeniranja in transformacije za celo datoteko.

Če želite, da UnoCSS preskoči blok kode brez ekstrakcije v katerikoli datoteki za ekstrakcijo, lahko uporabite @unocss-skip-start @unocss-skip-end v parih. Upoštevajte, da mora biti uporabljen v parih, da je učinkovit.

<p class="text-green text-xl">Green Large</p>

<!-- @unocss-skip-start -->
<!-- `text-red` ne bo izvlečen -->
<p class="text-red">Red</p>
<!-- @unocss-skip-end -->

Ekstrakcija iz datotečnega sistema

V primerih, ko uporabljate integracije, ki nimajo dostopa do cevovoda gradbenih orodij (na primer, PostCSS vtičnik), ali ko integrirate z backend okviri, kjer koda ne gre skozi cevovod, lahko ročno določite datoteke za ekstrakcijo.

export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

Ujemajoče se datoteke bodo prebrane neposredno iz datotečnega sistema in nadzorovane za spremembe v načinu razvijanja.

Ekstrakcija iz inline besedila

Poleg tega lahko tudi ekstrahirate uporabe pripomočkov iz inline besedila, ki ga lahko pridobite od drugod.

Prav tako lahko posredujte asinhrono funkcijo za vrnitev vsebine. Vendar upoštevajte, da bo funkcija klicana le enkrat ob času gradnje.

export default defineConfig({
  content: {
    inline: [
      // navadno besedilo
      '<div class="p-4 text-red">Some text</div>',
      // asinhroni getter
      async () => {
        const response = await fetch('https://example.com')
        return response.text()
      },
    ],
  },
})

Omejitve

Ker UnoCSS deluje ob času gradnje, to pomeni, da bodo le statično predstavljeni pripomočki generirani in dostavljeni vaši aplikaciji. Pripomočki, ki so uporabljeni dinamično ali pridobljeni iz zunanjih virov ob času izvajanja, morda ne bodo zaznani ali uporabljeni.

Safelist

Včasih boste morda želeli uporabiti dinamične konkatenacije, kot so:

<div class="p-${size}"></div>
<!-- to ne bo delovalo! -->

Zaradi dejstva, da UnoCSS deluje ob času gradnje z uporabo statične ekstrakcije, ob času kompilacije ne more vedeti vseh kombinacij pripomočkov. Za to lahko konfigurirate možnost safelist.

safelist: 'p-1 p-2 p-3 p-4'.split(' ')

Ustrezen CSS bo vedno generiran:

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

Ali bolj prilagodljivo:

safelist: [
  ...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
]

Če iščete pravo dinamično generiranje ob času izvajanja, si morda želite ogledati paket @unocss/runtime.

Statične kombinacije seznamov

Drug način za obhod omejitve dinamično konstruiranih pripomočkov je, da uporabite predmet, ki našteje vse kombinacije statično. Na primer, če želite imeti to:

<div class="text-${color} border-${color}"></div>
<!-- to ne bo delovalo! -->

Lahko ustvarite predmet, ki našteje vse kombinacije (ob predpostavki, da poznate vse možne vrednosti color, ki jih želite uporabiti)

// Ker so statične, jih bo UnoCSS lahko izvlekel ob času gradnje
const classes = {
  red: 'text-red border-red',
  green: 'text-green border-green',
  blue: 'text-blue border-blue',
}

In nato uporabite v vaši predlogi:

<div class="${classes[color]}"></div>

Blocklist

Podobno kot safelist, lahko tudi konfigurirate blocklist za izključitev nekaterih pripomočkov iz generiranja. To je uporabno za izključitev nekaterih lažno pozitivnih ekstrakcij. Različno od safelist, blocklist sprejema tako niz za natančno ujemanje kot regularni izraz za ujemanje vzorcev.

blocklist: [
  'p-1',
  /^p-[2-4]$/,
]

To bo izključilo p-1 in p-2, p-3, p-4 iz generiranja.