提取器

PurgeCSS 可以根据你的需求进行调整。如果你注意到很多未使用的 CSS 没有被删除，你可能需要使用特定的提取器。

PurgeCSS 依赖提取器来获取文件中使用的选择器列表。有多种类型的文件可以包含选择器，如 HTML 文件、模板文件（如 Pug），甚至 JavaScript 文件。

默认提取器

PurgeCSS 提供了一个默认提取器，可以处理所有类型的文件，但可能受限且不完全适合你正在使用的文件类型或 CSS 框架。

默认提取器将文件的每个单词视为选择器。默认提取器有一些局限性：

  • 不考虑特殊字符，如 @、:、/

使用提取器

如果你注意到 PurgeCSS 没有删除足够的未使用 CSS 或删除了已使用的 CSS，使用提取器可能会很有用。

对于特定扩展名使用特定提取器应该能提供最佳准确性。如果你想专门清理 HTML 文件，你可能需要考虑 purgecss-from-html 提取器。

你可以在 PurgeCSS 配置文件中通过设置提取器选项来使用提取器。

import { purgeCSSFromPug } from "purgecss-from-pug";
import { purgeCSSFromHtml } from "purgecss-from-html";

const options = {
  content: [], // 提取选择器的文件
  css: [], // css
  extractors: [
    {
      extractor: purgeCSSFromPug,
      extensions: ["pug"],
    },
    {
      extractor: purgeCSSFromHtml,
      extensions: ["html"],
    },
  ],
};
export default options;

创建提取器

提取器是一个简单的函数，接受文件内容作为字符串，并返回选择器数组。按照惯例，npm 包的名称是 purgecss-from-[typefile]（例如 purgecss-from-pug）。使用这个约定将允许用户通过搜索 purgecss-from 在 npm 上查看提取器列表。

该函数可以返回选择器（标签、类、ID）数组，或者为了更高的准确性，返回以下对象：

interface ExtractorResultDetailed {
  attributes: {
    names: string[];
    values: string[];
  };
  classes: string[];
  ids: string[];
  tags: string[];
  undetermined: string[];
}

const purgeFromJs = (content) => {
  // 返回 CSS 选择器数组
};

可用提取器列表（正在进行中）

注意

这些提取器仍在开发中。 尚不建议在生产中使用。