跳到主要内容

提取器

PurgeCSS 可以根据你的需要进行调整。如果你发现大量未使用的 css 没有被移除，你可能需要自定义提取器。

PurgeCSS 依靠提取器来获取文件中使用的 CSS 选择器列表。有多种类型的文件可以包含 CSS 选择器，如 html 文件、模板文件（如 pug），甚至是 javascript 文件。

默认提取器​

PurgeCSS 提供了一个默认提取器，可以处理所有类型的文件，但可能会受到限制，无法完全适应你正在使用的文件类型或 css 框架。

默认提取器将文件中的每个单词都视为一个 CSS 选择器。其有一些限制：

  • 忽略特殊字符，如 @、:、/

使用自定义的提取器​

如果你发现 PurgeCSS 没有充分删除的未使用 css 或删除了已有用的 css，那么使用自定义的提取器会很有帮助。

为某个文件扩展名使用特定的提取器，可以获得最佳的精确度。如果你只想清除 html 文件，可以考虑使用 purgecss-from-html 提取器。

你可以通过在 PurgeCSS 配置文件中设置 extractors 配置项来使用自定义的提取器。

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

const options = {
  content: [], // files to extract the selectors from
  css: [], // css
  extractors: [
    {
      extractor: purgeCSSFromPug,
      extensions: ["pug"],
    },
    {
      extractor: purgeCSSFromHtml,
      extensions: ["html"],
    },
  ],
};
export default options;

创建提取器​

提取器是一个简单的函数，它以字符串形式接收文件内容，并返回一个 CSS 选择器数组。按照惯例，npm 软件包的命名规则是 purgecss-from-[typefile] （例如 purgecss-from-pug）。按照这一约定，用户可以通过搜索关键词 purgecss-from 来找到 npm 上的提取器列表。

提取器函数可以返回一个 CSS 选择器（HTML 标签、class、id）数组，也可以返回下面的对象，以提高精准度：

interface ExtractorResultDetailed {
  attributes: {
    names: string[];
    values: string[];
  };
  classes: string[];
  ids: string[];
  tags: string[];
  undetermined: string[];
}
const purgeFromJs = (content) => {
  // return array of css selectors
};

提取器列表（整理中）​

危险

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