purge css не может распознать условные классы

Question

Так что я использую Tailwind CSS для темы WP, которую я разрабатываю.

Я столкнулся с проблемой при создании файлов темы производственного класса, потому что, насколько я понимаю, очистка css не может распознать условные классы, используемые в частях шаблона. Например, допустим, я создал шаблонную часть под названием «визитка. php», где я передаю ей переменную type (используя set_query_var / get_query_var):

page -о. php

set_query_var('type', 'A');
get_template_part('template-parts/content/business', 'card');

set_query_var('type', 'B');
get_template_part('template-parts/content/business', 'card');

бизнес-карта. php

$type = get_query_var('type')
<div class="<?php echo type == 'A' ? 'text-color-A' : 'text-color-B' ?>">
--- insert some content here ---
</div>

Таким образом, будет два div, один будет иметь класс text-color-A, другой будет иметь text-color-B, оба были созданы с использованием файла конфигурации (а не включены в базовую тему попутного ветра). Это хорошо в разработке - поскольку попутный ветер действительно создает классы утилит из файла конфигурации. Но по какой-то причине, когда он находится в производстве (то есть очищен и минифицирован), у него нет тех служебных классов, которые использовались только в части шаблона как условные классы (а не в каком-либо другом файле).

Answer 1

Взятые непосредственно из документов попутного ветра :

Очистка CSS преднамеренно очень наивна в том, как она ищет классы в вашем HTML. Он не пытается проанализировать ваш HTML и найти атрибуты класса или динамически выполнить ваш JavaScript - он просто ищет все строки во всем файле, которые соответствуют этому регулярному выражению:

/[^<>"'`\s]*[^<>"'`\s:]/g

Это означает, что важно избегать динамического создания строк классов в ваших шаблонах с конкатенацией строк, иначе Purge CSS не будет знать, как сохранить эти классы.

Не используйте конкатенацию строк для создания имен классов:

<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>

Динамически выбирать полное имя класса:

<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Пока имя класса появляется в вашем шаблоне полностью, Purge CSS не будет его удалять.

Answer 2

Вы можете использовать опцию Очистить CSS белый список, чтобы добавить эти классы.

const purgecss = new Purgecss({
    //... Your config
    whitelist: ['text-color-A', 'text-color-B', 'etc']
})

Или белый списокPatterns (соответствие регулярному выражению)

whitelistPatterns: [/^text-color/], // All classes starting with text-color

Вы можете найти дополнительную информацию здесь