Question

开始使用tailwindcss时，我很快遇到了PurgeCSS的需求，以便从样式表中删除（很多）多余的CSS。通常，PurgeCSS不仅是一种出色的工具，而且可以成为想要和不需要的选择器的猫捉老鼠游戏，尤其是在部署了经过摇摇欲坠的纳米净化产品代码之后。

为了防止PurgeCSS变得整洁，它有whitelist selectors from being purged的一些可能性：在样式表中直接使用whitelist，whitelistPatterns，whitelistPatternsChildren或/* purgecss start and stop ignore */ 。

通常，我会通过注释保护选项中的某些选择器regexp和某些完整的导入样式表（请参见下面的示例）。但是尤其是动态创建的选择器（例如Markdown）已转换为HTML。所有<p>，<blockquote>，<h1>，<h2>，<a>，…都将被清除，因为它们不在.md中。文件。

这主要涉及element selectors，因此：是否有一种方法或正则表达式将所有非类的选择器列入白名单？

我为白名单模式尝试了一些正则表达式，例如^(?!\.).+，^(?!\.)\w+等，但是它们要么不起作用，要么将所有选择器（包括类）列入白名单。

感谢您的帮助。

// postcss.config.js
const whitelist = /^(\.|p|ul|ol|h\d+|pre|code|carousel|flickity|spinner)/
const purgecss = require("@fullhuman/postcss-purgecss")({
  // …
  whitelistPatterns: [whitelist],
  whitelistPatternsChildren: [whitelist] 
});

// styles.css
/*! purgecss start ignore */
@import "admin.css";
/*! purgecss end ignore */

Answer 1

默认情况下，Tailwind会进行相当宽容的清除，如here所述。保持默认设置对我有用，但是如果我将清除模式配置为“ all”，我将开始完全失去您所描述的样式-因为这些元素没有出现在我的Markdown文件中。

要解决此问题，您可以从Tailwind配置文件中将列入白名单的元素列表传递到PurgeCSS。

首先，请确保您正在使用可选的配置文件：

npx tailwindcss init

然后您可以按以下方式对其进行配置。在这里，我使用的是更积极的清除方法，但同时也将特定元素列入了白名单。这是解析11ty布局的示例：

module.exports = {
    // Purge is executed only when NODE_ENV=production
    purge: {
        mode: 'all',
        content: [
            'site/_includes/**/*.njk'
        ],       
        options: {
            whitelist: [
                'body',
                'html',
                'a',
                'h1',
                'h2',
                'h3',
                'h4',
                'p'                
            ]
        }

  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

PurgeCSS和Markdown输出，如何将元素选择器列入白名单？

1 个答案: