Gå til indhold

Direktivet @source

@source findes i dit input-CSS. Dets inline()-former tilføjer eller fjerner klassekandidater og virker overalt. Dets sti-former angiver de skabelonfiler, der skal scannes for klassenavne; kun CLI scanner filer, og den bruger endnu ikke de angivne stier (se Sådan bruges stier).

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

Direktiverne @source læses under kompileringen og fjernes fra outputtet — de vises aldrig i den genererede CSS. Stier skal stå i anførselstegn; både enkelt- og dobbeltanførselstegn accepteres.

Stier, globmønstre og negation

Stiformen accepterer en mappe, et globmønster eller en negeret sti, og direktiverne ophobes:

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

Sådan bruges stier

Compileren registrerer hvert stidirektiv i sources-listen i det array, som TailwindPHP\compile() returnerer, som ['base' => …, 'pattern' => …, 'negated' => …] med base hentet fra base-kompileringsindstillingen. Den læser aldrig selv filer.

  • tw::generate(), tw::compile() og TailwindCompiler kompilerer kun det indhold, du angiver. Stidirektiver har ingen effekt dér.
  • CLI læser sources, men i den aktuelle udgave scanner den inputfilens mappe rekursivt for hver sti, der ikke er negeret, uanset hvad stien eller globmønstret angiver, og springer helt over not-stier, så de ikke udelukker noget (#8). Hvad CLI scanner indeholder detaljer og en struktur, der fungerer i dag.

Indlejrede kandidater

@source inline(...) tvinger klasser med i outputtet, selv når de ikke findes i de scannede filer — nyttigt til klassenavne, der sammensættes dynamisk under kørsel:

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

Indlejrede kandidater understøtter også varianter:

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

Udvidelse med klammer

Indlejrede mønstre udvider grupper i klammer, så du kan opregne mange kandidater kompakt:

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

Ignorerede indlejrede kandidater

@source not inline(...) gør det modsatte af inline() — den fjerner matchende kandidater fra outputtet, selv hvis de blev fundet i dit indhold. Udvidelse med klammer virker også her:

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

Valideringsregler

@source er en instruktion, ikke en blok. Compileren afviser:

  • Et direktiv med en blok — @source cannot have a body.
  • Et indlejret direktiv (for eksempel inde i @media) — @source cannot be nested.
  • En sti uden anførselstegn — @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;

Se CLI for filbaserede builds og Imports for at løse @import og virtuelle moduler.