Ugrás a tartalomhoz

A @source direktíva

A @source a bemeneti CSS-ban szerepel. A inline() formái osztályjelölteket adnak hozzá vagy távolítanak el, és mindenhol működnek. Az útvonalas formák megadják, mely sablonfájlokat kell átvizsgálni az osztálynevekért; fájlokat csak a CLI vizsgál át, de jelenleg még nem alkalmazza a megadott útvonalakat (lásd: Az útvonalak használata).

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

A @source direktívák fordítás közben beolvasásra kerülnek, majd eltávolítódnak a kimenetből; a létrehozott CSS-ban soha nem jelennek meg. Az útvonalakat idézőjelek közé kell tenni; egyszeres és dupla idézőjel is használható.

Útvonalak, globminták és kizárás

Az útvonalas forma könyvtárat, globmintát vagy kizáró útvonalat fogad el; a direktívák halmozódnak:

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

Az útvonalak használata

A fordító minden útvonalas direktívát rögzít a TailwindPHP\compile() által visszaadott tömb sources listájába, ['base' => …, 'pattern' => …, 'negated' => …] formájában, ahol a base értéke a base fordítási beállításból származik. Maga soha nem olvassa be a fájlokat.

  • A tw::generate(), a tw::compile() és a TailwindCompiler csak az átadott tartalmat fordítja le. Az útvonalas direktívák itt hatástalanok.
  • A CLI beolvassa a sources fájlt, de a jelenlegi kiadásban a bemeneti fájl könyvtárát rekurzívan vizsgálja át minden kizárás nélküli útvonal esetén, függetlenül attól, mit ír elő az útvonal vagy a globminta; a not útvonalakat pedig teljesen kihagyja, így azok semmit sem zárnak ki (#8). A Mit vizsgál át a CLI rész ismerteti a részleteket és a jelenleg működő fájlszerkezetet.

Beágyazott jelöltek

A @source inline(...) akkor is belekényszeríti az osztályokat a kimenetbe, ha azok egyetlen átvizsgált fájlban sem szerepelnek — ez hasznos a futásidőben dinamikusan összeállított osztályneveknél:

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

A beágyazott jelöltek változatokat is támogatnak:

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

Kapcsos zárójeles kibontás

A beágyazott minták kibontják a kapcsos zárójelek közé írt csoportokat, így tömören felsorolhat sok jelöltet:

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

Kizárt beágyazott jelöltek

A @source not inline(...) a inline() ellentettjét teszi: eltávolítja a találatokat a kimenetből akkor is, ha a tartalomban szerepelnek. Itt is használható a kapcsos zárójeles kibontás:

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

Érvényesítési szabályok

A @source utasítás, nem blokk. A fordító elutasítja a következőket:

  • Törzzsel rendelkező direktíva — @source cannot have a body.
  • Beágyazott direktíva (például egy @media belsejében) — @source cannot be nested.
  • Idézőjelek közé nem tett útvonal — @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;

A fájlalapú fordításokhoz tekintse meg a CLI részt, az @import és a virtuális modulok feloldásáról pedig az Imports részt.