Direktiva @source

Prikaži kot Markdown Uredi na GitHub Dokumentacija za 3843abd

@source je del vašega vhodnega CSS. Njene oblike inline() dodajajo ali odstranjujejo kandidate za razrede in delujejo povsod. Oblike poti določajo datoteke s predlogami, ki jih je treba pregledati za imena razredov; datoteke pregleduje samo CLI, vendar trenutno ne uveljavlja podanih poti (glejte Kako se uporabljajo poti).

CSS

@import "tailwindcss";
@source "./templates";

Direktive @source se preberejo med prevajanjem in odstranijo iz izhoda — v ustvarjenem CSS se nikoli ne pojavijo. Poti morajo biti v narekovajih; sprejeti so enojni in dvojni narekovaji.

Poti, vzorci glob in negacija

Oblika poti sprejema imenik, vzorec glob ali negirano pot, direktive pa se združujejo:

CSS

@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

Kako se uporabljajo poti

Prevajalnik zabeleži vsako direktivo poti na seznamu sources v polju, ki ga vrne TailwindPHP\compile(), kot ['base' => …, 'pattern' => …, 'negated' => …] z vrednostjo base, prevzeto iz možnosti prevajanja base. Datotek nikoli ne bere sam.

tw::generate(), tw::compile() in TailwindCompiler prevedejo samo vsebino, ki jo podate. Direktive poti tam nimajo učinka.
CLI bere sources, vendar v trenutni izdaji rekurzivno pregleda imenik vhodne datoteke za vsako nenegirano pot, ne glede na pot ali vzorec glob, negirane poti not pa v celoti preskoči, zato ničesar ne izključijo (#8). Podrobnosti in trenutno delujočo razporeditev najdete v razdelku Kaj pregleduje CLI.

Kandidati v vrstici

@source inline(...) prisili vključitev razredov v izhod, tudi če se nikoli ne pojavijo v pregledanih datotekah — uporabno za imena razredov, sestavljena dinamično med izvajanjem:

CSS

@source inline("flex p-4 m-2");

Kandidati v vrstici podpirajo tudi različice:

CSS

@source inline("hover:bg-blue-500 focus:ring-2");

Razširjanje z zavitimi oklepaji

Vzorci v vrstici razširjajo skupine v zavitih oklepajih, zato lahko na kratko naštejete številne kandidate:

CSS

@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

Prezrti kandidati v vrstici

@source not inline(...) deluje nasprotno od inline() — ustrezne kandidate odstrani iz izhoda, tudi če so bili najdeni v vaši vsebini. Tudi tukaj deluje razširjanje z zavitimi oklepaji:

CSS

@source not inline("legacy");
@source not inline("p-{1,2}");

Pravila preverjanja

@source je stavek, ne blok. Prevajalnik zavrne:

Direktivo z vsebino — @source cannot have a body.
Ugnezdeno direktivo (na primer znotraj @media) — @source cannot be nested.
Pot brez narekovajev — @source paths must be quoted.

CSS

/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

Za gradnje na podlagi datotek glejte CLI, za razreševanje @import in navideznih modulov pa Uvozi.