Перейти до вмісту

Директива @source

Переглянути як Markdown Редагувати на GitHub Документація для 3843abd

@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.

Кандидати inline

@source inline(...) примусово додає класи до результату, навіть якщо їх немає в просканованих файлах. Це корисно для назв класів, які збираються динамічно під час виконання:

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

Кандидати inline також підтримують варіанти:

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

Розгортання фігурних дужок

Шаблони inline розгортають групи у фігурних дужках, тож можна компактно перелічити багато кандидатів:

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

Ігноровані кандидати inline

@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 і віртуальні модулі.