Vai al contenuto

La direttiva @source

@source si trova nell'input CSS. Le sue forme inline() aggiungono o rimuovono candidati di classe e funzionano ovunque. Le forme con percorso indicano i file modello da analizzare per i nomi delle classi; solo CLI analizza i file e per ora non applica i percorsi indicati (vedi Come vengono usati i percorsi).

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

Le direttive @source vengono lette durante la compilazione e rimosse dall'output: non compaiono mai nel CSS generato. I percorsi devono essere racchiusi tra virgolette; sono accettate sia quelle singole sia quelle doppie.

Percorsi, glob e negazione

La forma con percorso accetta una directory, un glob o un percorso negato; le direttive si accumulano:

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

Come vengono usati i percorsi

Il compilatore registra ogni direttiva di percorso nell'elenco sources dell'array restituito da TailwindPHP\compile(), come ['base' => …, 'pattern' => …, 'negated' => …] con base ricavato dall'opzione di compilazione base. Non legge mai direttamente i file.

  • tw::generate(), tw::compile() e TailwindCompiler compilano solo il contenuto che passi. Le direttive di percorso non hanno effetto.
  • CLI legge sources, ma nella versione attuale analizza ricorsivamente la directory del file di input per ogni percorso non negato, indipendentemente dal percorso o dal glob, e ignora del tutto i percorsi not, che quindi non escludono nulla (#8). Cosa analizza CLI spiega i dettagli e mostra una struttura utilizzabile oggi.

Candidati inline

@source inline(...) forza l'inclusione nell'output di classi che non compaiono mai nei file analizzati, utile per i nomi di classe composti dinamicamente durante l'esecuzione:

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

Anche i candidati inline supportano le varianti:

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

Espansione delle parentesi graffe

I pattern inline espandono i gruppi tra parentesi graffe, così puoi elencare molti candidati in forma compatta:

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

Candidati inline ignorati

@source not inline(...) fa l'opposto di inline(): rimuove dall'output i candidati corrispondenti, anche se sono stati trovati nei contenuti. Anche qui funziona l'espansione delle parentesi graffe:

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

Regole di convalida

@source è un'istruzione, non un blocco. Il compilatore rifiuta:

  • Una direttiva con un body — @source cannot have a body.
  • Una direttiva annidata (per esempio dentro @media) — @source cannot be nested.
  • Un percorso senza virgolette — @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;

Consulta CLI per le compilazioni basate su file e Importazioni per risolvere @import e i moduli virtuali.