升级PostCSS 8后无法以函数形式调用postcss-simple-vars的问题

问题详情 #

错误信息 #

TypeError: vars(...) is not a function

原调用代码 #

var vars = require('postcss-simple-vars');

...

vars({ only: value })(content);

依赖版本对比 #

升级前依赖配置

"dependencies": {
    "postcss": "^5.0.0",
    "postcss-simple-vars": "^2.0.0"
  },
  "devDependencies": {
    "chai": "3.2.0",
    "gulp": "3.9.0",
    "gulp-eslint": "0.11.1",
    "gulp-mocha": "2.1.3",
    "postcss-custom-properties": "^5.0.1"
  }

升级后依赖配置

"dependencies": {
    "postcss-simple-vars": "^6.0.3"
  },
  "peerDependencies": {
    "postcss": "^8.0.0"
  },
  "devDependencies": {
    "chai": "4.3.6",
    "gulp": "4.0.2",
    "gulp-eslint": "6.0.0",
    "gulp-mocha": "8.0.0",
    "postcss": "^8.0.0",
    "postcss-custom-properties": "^12.1.8"
  }

更新尝试 #

通过以下方式实现了部分编译，但担心违背PostCSS 8设计原则及存在性能问题：

const {root} = postcss([vars({ only: value })]).process(content)

问题原因与解决方案 #

1. 调用方式失效的核心原因 #

PostCSS 8及适配它的插件（如postcss-simple-vars v6+）采用了全新的插件API规范，彻底改变了插件的调用逻辑：

• PostCSS 5时代，部分插件会直接暴露可调用的函数，接收配置后返回能直接处理内容的函数；
• PostCSS 8要求插件必须作为配置项传入PostCSS核心实例，由PostCSS统一调度执行，插件本身不再直接处理内容。

2. 符合PostCSS 8规范的正确用法 #

• 若你是独立使用postcss-simple-vars处理内容，目前的写法是标准且合规的，不存在违背设计原则的问题。完整的规范写法如下：

const postcss = require('postcss');
const vars = require('postcss-simple-vars');

async function processContent(content, value) {
  const result = await postcss([vars({ only: value })])
    .process(content, { from: undefined }); // 设为undefined避免源文件路径警告
  return result.root;
}

• 若你是开发PostCSS插件，确实无需直接导入postcss包，而是通过插件的postcssPlugin声明、prepare/Once等钩子集成，但这种场景下调用其他插件时，仍需通过PostCSS核心API处理AST，这也是官方允许的规范操作。

3. 性能问题说明 #

你担心的性能损耗不存在：
PostCSS 8的核心API做了大量架构优化，这种调用方式是官方推荐的标准用法，插件执行逻辑的性能与旧版直接调用无本质区别，反而PostCSS 8的架构更利于插件并行处理和资源复用。

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