PostCSS PurgeCSS 插件

安装

npm install @fullhuman/postcss-purgecss

基本使用

PostCSS 配置

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html', './src/**/*.js'],
  safelist: ['body', 'html']
})

module.exports = {
  plugins: [
    purgecss
  ]
}

Webpack 配置

// webpack.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html', './src/**/*.js'],
  safelist: ['body', 'html']
})

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [purgecss]
            }
          }
        ]
      }
    ]
  }
}

配置选项

`content`

类型：string[] | { raw: string, extension: string }[]
描述：包含要分析的文件路径或内容的数组。

`safelist`

类型：string[] | { standard?: string[], deep?: string[], greedy?: string[] }
描述：要保留的选择器列表。

`blocklist`

类型：string[]
描述：要删除的选择器列表。

`extractors`

类型：Array<{ extractor: Function, extensions: string[] }>
描述：自定义提取器，用于从特定文件类型中提取选择器。

`keyframes`

类型：boolean
默认值：false
描述：是否删除未使用的关键帧。

`fontFace`

类型：boolean
默认值：false
描述：是否删除未使用的字体。

示例：高级配置

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.vue'
  ],
  safelist: {
    standard: ['body', 'html', /^nav-/],
    deep: [/^dropdown-/],
    greedy: [/^bg-/]
  },
  extractors: [
    {
      extractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      extensions: ['html', 'vue', 'js']
    }
  ],
  keyframes: true,
  fontFace: true
})