Direktíva @source

Zobraziť ako Markdown Upraviť na GitHub Dokumentácia na 3843abd

@source sa nachádza vo vstupnom CSS. Jej formy inline() pridávajú alebo odstraňujú kandidátov na triedy a fungujú všade. Cestné formy určujú súbory šablón na prehľadávanie kvôli názvom tried; súbory prehľadáva iba CLI a zatiaľ nepoužíva zadané cesty (pozrite si Ako sa používajú cesty).

CSS

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

Direktívy @source sa čítajú počas kompilácie a z výstupu sa odstránia — vo vygenerovanom CSS sa nikdy neobjavia. Cesty musia byť v úvodzovkách; povolené sú jednoduché aj dvojité úvodzovky.

Cesty, globy a negácia

Cestná forma prijíma adresár, glob alebo negovanú cestu a direktívy sa postupne kumulujú:

CSS

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

Ako sa používajú cesty

Kompilátor zaznamenáva každú cestnú direktívu v zozname sources poľa, ktoré vracia TailwindPHP\compile(), ako ['base' => …, 'pattern' => …, 'negated' => …], pričom base preberá z možnosti kompilácie base. Nikdy sám nečíta súbory.

tw::generate(), tw::compile() a TailwindCompiler kompilujú iba obsah, ktorý im odovzdáte. Cestné direktívy na ne nemajú vplyv.
CLI číta sources, no v aktuálnom vydaní rekurzívne prehľadáva adresár vstupného súboru kvôli každej nenegovanej ceste, bez ohľadu na zadanú cestu či glob, a cesty not úplne preskakuje, takže nič nevylúčia (#8). Podrobnosti a aktuálne použiteľné usporiadanie nájdete v časti Čo sa prehľadáva pomocou CLI.

Vložené kandidáty

@source inline(...) vynúti zahrnutie tried do výstupu, aj keď sa v prehľadávaných súboroch nikdy nevyskytujú — užitočné pri názvoch tried zostavených dynamicky za behu:

CSS

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

Vložené kandidáty podporujú aj varianty:

CSS

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

Rozšírenie zložených zátvoriek

Vložené vzory rozbalia skupiny v zložených zátvorkách, takže môžete stručne vymenovať veľa kandidátov:

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

Ignorované vložené kandidáty

@source not inline(...) funguje opačne ako inline() — odstráni z výstupu zodpovedajúce kandidáty, aj keď sa našli vo vašom obsahu. Funguje tu aj rozšírenie zložených zátvoriek:

CSS

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

Pravidlá overovania

@source je príkaz, nie blok. Kompilátor odmietne:

direktívu s telom — @source cannot have a body.
vnorenú direktívu (napríklad vo vnútri @media) — @source cannot be nested.
cestu bez úvodzoviek — @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;

Pre zostavenia zo súborov si pozrite CLI a informácie o riešení @import a virtuálnych modulov nájdete v časti Importy.