purgecss 无法识别条件类答案

【问题标题】：purgecss can't recognize conditional classespurgecss 无法识别条件类
【发布时间】：2020-08-02 09:11:34
【问题描述】：

所以我将 TailwindCSS 用于我正在开发的 WP 主题。

我在创建生产级主题文件时遇到了问题，因为根据我对问题的理解，purgecss 无法识别模板部件上使用的条件类。例如，假设我创建了一个名为“business-card.php”的模板部分，我将变量 type 传递给它（使用 set_query_var / get_query_var）：

page-about.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');

businesss-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，两者都是使用配置文件创建的（而不是包含在基本的顺风主题中）。这在开发中很好——因为 tailwind 实际上确实从配置文件创建了实用程序颜色类。但由于某种原因，当它在生产中（即清除和缩小）时，它没有那些实用程序类——它们仅在模板部分用作条件类（而不是在任何其他文件中）。

【问题讨论】：

标签： wordpress-theming tailwind-css css-purge

【解决方案1】：

如果您在上面要使用它们的变量中定义类名，它的工作方式类似于 safe listing them in Tailwind 或 whitelisting them in PurgeCSS，可能更容易维护，并且如果您有少量可能的动态类名。

var classes =`grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4`
    return (
               <div className={`grid grid-cols-${items['grid-cols']}`}>
                
               </div>
           )

【讨论】：

【解决方案2】：

PurgeCSS 在寻找 HTML 中的类时故意非常幼稚。它不会尝试解析您的 HTML 并查找类属性或动态执行您的 JavaScript — 它只是在整个文件中查找与此正则表达式匹配的任何字符串：

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

这意味着避免在模板中使用字符串连接动态创建类字符串很重要，否则 PurgeCSS 将不知道保留这些类。

所以不要使用字符串连接来创建类名：

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

相反，动态选择一个完整的类名：

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

只要类名完整地出现在您的模板中，PurgeCSS 就不会删除它。

有关详细信息，请参阅文档：

Writing purgeable HTML

【讨论】：

您应该提及从 TailwindCSS / Writing purgeable HTML 复制文本的 Tailwind 链接源。
@ChristosLytras 我曾经有那个...不知道为什么我删除它。补充回来，谢谢！
有趣。您甚至可以将顺风类放在注释中以防止清除。

【解决方案3】：

如果您使用Tailwind 2.0+，您可以直接在tailwind.config.js 文件中配置将被purge CSS 忽略的白名单类。

下面是我自己的代码示例，我将text-ingido-400 类列入白名单

  // tailwind.config.js
  module.exports = {
    purge: {
      content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

      options: {
        safelist: ['text-indigo-400']
      }
    } ,
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   }

有关更多信息，您可以查看位于以下位置的相关文档： https://tailwindcss.com/docs/optimizing-for-production

【讨论】：

safelist 与配置中的content 直接处于同一级别。

【解决方案4】：

您可以使用 PurgeCSS 白名单选项来添加这些类。

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

或者whitelistPatterns（正则匹配）

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

您可以找到更多信息here

【讨论】：