Liigu sisu juurde

Direktiiv @source

@source asub sinu sisendi CSS-is. Selle inline()-vormid lisavad või eemaldavad klassikandidaate ja toimivad kõikjal. Tee-vormid määravad mallifailid, kust klassinimesid otsida; faile skannib ainult CLI ning praegu ei rakenda see sinu antud radu (vt Radade kasutamine).

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

@source-direktiive loetakse kompileerimise ajal ja need eemaldatakse väljundist — neid ei kuvata kunagi loodud CSS-is. Rajad peavad olema jutumärkides; kasutada võib nii ühe- kui kahekordseid jutumärke.

Rajad, globaalsed mustrid ja eitamine

Teevorm aktsepteerib kataloogi, globaalset mustrit või eitatud rada ning direktiivid liituvad üksteisega:

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

Radade kasutamine

Kompilaator talletab kõik rajadirektiivid massiivi sources-loendis, mille TailwindPHP\compile() tagastab, kujul ['base' => …, 'pattern' => …, 'negated' => …], kasutades väärtust base valikust base compile. See ei loe ise faile.

  • tw::generate(), tw::compile() ja TailwindCompiler kompileerivad ainult antud sisu. Rajadirektiivid neis ei mõju.
  • CLI loeb sources, kuid praeguses versioonis skannib see rekursiivselt sisendfaili kataloogi kõigi eitatud radade puhul, olenemata raja või globaalse mustri väärtusest, ning jätab not-rajad täielikult vahele, mistõttu need midagi ei välista (#8). Üksikasjad ja praegu toimiv failipaigutus on lehel Mida CLI skannib.

Reasisesed kandidaadid

@source inline(...) lisab klassid väljundisse isegi siis, kui neid skannitud failides ei esine — kasulik käitusajal dünaamiliselt kokku pandud klassinimede korral:

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

Reasisesed kandidaadid toetavad ka variante:

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

Looksulgude laiendus

Reasisesed mustrid laiendavad looksulgudes olevaid rühmi, et saaksid loetleda palju kandidaate lühidalt:

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

Eiratud reasisesed kandidaadid

@source not inline(...) teeb vastupidist kui inline() — see eemaldab väljundist sobivad kandidaadid isegi siis, kui need leiti sinu sisust. Ka siin toimib looksulgude laiendus:

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

Valideerimisreeglid

@source on lause, mitte plokk. Kompilaator lükkab tagasi järgmised juhud:

  • Sisuga direktiiv — @source cannot have a body.
  • Pesastatud direktiiv (näiteks @media sees) — @source cannot be nested.
  • Jutumärkideta rada — @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;

Failipõhiste järkude kohta vaata CLI ning @import ja virtuaalmoodulite lahendamise kohta Imports.