如何通过JS API向PostCSS 8插件传递options配置对象？

正确的PostCSS 8插件参数传递实现方式 #

你使用process()方法第三个参数传递插件配置的方式是错误的，该参数为PostCSS内部保留参数，不会传递给加载的插件。PostCSS 8中所有自定义插件的配置项，都需要在注册插件时直接传入。

修正后的调用代码 #

const postcss = require('postcss')
const resizer = require('../index.js')
const fs = require('fs')

let fileSrc = 'css/src2.css';
let fileDst = 'css/dest.css';

fs.readFile(fileSrc, (err, css) => {
  // 注册插件时直接传入配置对象
  postcss([resizer({ factor: 0.75 })])
    // process方法仅需传前两个参数：待处理css内容、编译配置
    .process(css, { from: fileSrc, to: fileDst })
    .then(result => {
      fs.writeFile(fileDst, result.css, () => true)
      if (result.map) {
        fs.writeFile(fileDst + '.map', result.map.toString(), () => true)
      }
    })
})

插件侧适配接收参数的示例 #

如果你的插件还没有做参数接收逻辑，可参考如下标准PostCSS 8插件结构调整：

// 插件文件 ../index.js 示例
module.exports = (opts = {}) => {
  // 读取传入的配置，可设置默认值
  const factor = opts.factor ?? 1
  return {
    postcssPlugin: 'postcss-resizer',
    // 此处写你的插件处理逻辑
    Declaration(decl) {
      // 业务逻辑中可直接使用上面获取到的factor参数
    }
  }
}
// PostCSS 8插件必需的标识
module.exports.postcss = true

内容的提问来源于stack exchange，提问作者Steve