Перейти к содержимому

Директива @source

Просмотреть как Markdown Редактировать на GitHub Документация по 3843abd

@source находится во входном CSS. Её формы inline() добавляют или удаляют кандидаты классов и работают везде. Формы с путями указывают файлы шаблонов для поиска имён классов; файлы сканирует только CLI, но пока он не применяет заданные пути (см. раздел Как используются пути).

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

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

Пути, шаблоны и исключения

Форма с путём принимает каталог, шаблон или путь с отрицанием; директивы накапливаются:

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, но в текущем выпуске рекурсивно сканирует каталог входного файла по всем путям без отрицания, независимо от указанных путей или шаблонов, и полностью пропускает пути 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 для сборок на основе файлов и раздел Импорт, посвящённый разрешению @import и виртуальных модулей.