Към съдържанието

Директивата @source

@source се намира във входния CSS. Формите inline() добавят или премахват кандидати за класове и работят навсякъде. Формите за пътища указват файловете с шаблони, в които да се търсят имена на класове; само CLI сканира файлове, а посочените пътища все още не се прилагат (вижте Как се използват пътищата).

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

Директивите @source се прочитат при компилиране и се премахват от резултата — никога не се появяват в генерирания CSS. Пътищата трябва да са в кавички; приемат се както единични, така и двойни кавички.

Пътища, glob шаблони и отрицание

Формата за път приема директория, glob шаблон или отречен път, а директивите се натрупват:

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

Как се използват пътищата

Компилаторът записва всяка директива за път в списъка sources на масива, който TailwindPHP\compile() връща, като ['base' => …, 'pattern' => …, 'negated' => …] с base, взет от опцията за компилация base. Той никога не чете файлове сам.

  • tw::generate(), tw::compile() и TailwindCompiler компилират само подаденото от вас съдържание. Директивите за път нямат ефект при тях.
  • CLI чете sources, но в текущата версия сканира рекурсивно директорията на входния файл за всеки път, който не е отречен, независимо от зададения път или glob шаблон, и напълно пропуска пътищата not, така че те не изключват нищо (#8). В Какво сканира CLI са описани подробностите и дадена е структура, която работи в момента.

Вградени кандидати

@source inline(...) добавя класове в резултата, дори когато те не се срещат в сканираните файлове — полезно за имена на класове, съставяни динамично по време на изпълнение:

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

Вградените кандидати поддържат и варианти:

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

Разгъване на фигурни скоби

Вградените шаблони разгъват групи във фигурни скоби, така че можете компактно да изброите много кандидати:

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

Игнорирани вградени кандидати

@source not inline(...) прави обратното на inline() — премахва съвпадащите кандидати от резултата, дори ако са открити в съдържанието ви. Тук също работи разгъването на фигурни скоби:

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

Правила за валидиране

@source е директива, а не блок. Компилаторът отхвърля:

  • Директива с тяло — @source cannot have a body.
  • Вложена директива (например вътре в @media) — @source cannot be nested.
  • Път без кавички — @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;

Вижте CLI за компилиране на базата на файлове и Imports за разрешаване на @import и виртуални модули.