De directive @source

Bekijken als Markdown Bewerken op GitHub Documentatie op 3843abd

@source staat in je invoer-CSS. De vormen met inline() voegen klaskandidaten toe of verwijderen ze, en werken overal. De padvormen geven aan welke sjabloonbestanden op klassennamen moeten worden gescand; alleen de CLI scant bestanden, maar past de opgegeven paden nog niet toe (zie Hoe paden worden gebruikt).

CSS

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

@source-directives worden tijdens de compilatie gelezen en uit de uitvoer verwijderd — ze verschijnen nooit in de gegenereerde CSS. Paden moeten tussen aanhalingstekens staan; zowel enkele als dubbele aanhalingstekens zijn toegestaan.

Paden, globs en uitsluitingen

De padvorm accepteert een map, een glob of een uitgesloten pad; de directives worden opgeteld:

CSS

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

Hoe paden worden gebruikt

De compiler slaat elke paddirective op in de lijst sources van de array die TailwindPHP\compile() retourneert, als ['base' => …, 'pattern' => …, 'negated' => …] met base uit de compileeroptie base. De compiler leest zelf nooit bestanden.

tw::generate(), tw::compile() en TailwindCompiler compileren alleen de content die je meegeeft. Paddirectives hebben daar geen effect.
De CLI leest sources, maar scant in de huidige versie de map van het invoerbestand recursief voor elk pad dat niet is uitgesloten, ongeacht het opgegeven pad of de glob, en slaat not-paden volledig over. Daardoor sluiten ze niets uit (#8). Wat de CLI scant bevat details en een indeling die nu werkt.

Inline kandidaten

@source inline(...) dwingt klassen in de uitvoer af, zelfs als ze niet voorkomen in gescande bestanden — handig voor klassennamen die tijdens runtime dynamisch worden samengesteld:

CSS

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

Inline kandidaten ondersteunen ook varianten:

CSS

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

Accolade-uitbreiding

Inline patronen breiden groepen tussen accolades uit, zodat je veel kandidaten compact kunt opsommen:

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

Genegeerde inline kandidaten

@source not inline(...) doet het tegenovergestelde van inline() — het verwijdert overeenkomende kandidaten uit de uitvoer, zelfs als ze in je content zijn gevonden. Accolade-uitbreiding werkt hier ook:

CSS

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

Validatieregels

@source is een instructie, geen blok. De compiler wijst het volgende af:

Een directive met een body — @source cannot have a body.
Een geneste directive (bijvoorbeeld binnen @media) — @source cannot be nested.
Een pad zonder aanhalingstekens — @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;

Zie CLI voor builds op basis van bestanden en Imports voor het verwerken van @import en virtuele modules.