如何将 postcss.plugin 迁移到 postCSS 8 格式答案

【问题标题】：How to migrate postcss.plugin to postCSS 8 format如何将 postcss.plugin 迁移到 postCSS 8 格式
【发布时间】：2020-10-20 15:09:30
【问题描述】：

我正在尝试将旧的 postCSS 插件迁移到新版本以使单元测试成功。我的 index.js 看起来像这样：

const postcss = require('postcss')

const params = require('./lib/params')
const formatAtRules = require('./lib/formatAtRules')
const formatOrder = require('./lib/formatOrder')
const formatRules = require('./lib/formatRules')
const formatComments = require('./lib/formatComments')
const formatSassVariables = require('./lib/formatSassVariables')

const stylefmt = postcss.plugin('stylefmt', function (options) {
  var paramer = params(options)
  return function (root, result) {
    return paramer(root, result).then(function (params) {
      if(params) {
        formatComments(root, params)
        formatAtRules(root, params)
        formatRules(root, params)
        formatSassVariables(root, params)
        // order should be the last to prevent empty line collapse in order rules
        formatOrder(root, params)
      }
    }).catch(function (err) {
      console.error(err.stack)
    })
  }
})

module.exports = stylefmt

这在运行tape test/*.js |faucet 时会在控制台中抛出类似这样的错误：

Error: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration 
    ---
      operator: error
      at: <anonymous> (/Users/rolle/Projects/stylefmt/test/cli.js:11:9)
      stack: |-
        Error: postcss.plugin was deprecated. Migration guide:
        https://evilmartians.com/chronicles/postcss-8-plugin-migration
        
            at ChildProcess.<anonymous> (/Users/rolle/Projects/stylefmt/test/cli.js:151:16)
            at ChildProcess.emit (events.js:198:13)
            at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
    ...

我对 postCSS 插件和 JavaScript 方面的单元测试有点陌生。我尝试使用migration guide 无济于事。那么，如何将这部分转换为 postCSS 8 格式以便测试通过呢？这是我的仓库：https://github.com/ronilaukkarinen/stylefmt

【问题讨论】：

标签： javascript testing postcss

【解决方案1】：

回答我自己的问题。终于找到有人用不同的插件做了同样的事情，提示here。

最终代码：

const postcss = require('postcss')

const params = require('./lib/params')
const formatAtRules = require('./lib/formatAtRules')
const formatOrder = require('./lib/formatOrder')
const formatRules = require('./lib/formatRules')
const formatComments = require('./lib/formatComments')
const formatSassVariables = require('./lib/formatSassVariables')

module.exports = function (options) {
  var paramer = params(options)
  return {
    postcssPlugin: 'stylefmt',
    Once: function Once (root, _ref) {
      var result = _ref.result

      return paramer(root, result).then(function (params) {
        if(params) {
          formatComments(root, params)
          formatAtRules(root, params)
          formatRules(root, params)
          formatSassVariables(root, params)
          // order should be the last to prevent empty line collapse in order rules
          formatOrder(root, params)
        }
      }).catch(function (err) {
        console.error(err.stack)
      })
    }
  }
}

module.exports.postcss = true

这使测试通过。

【讨论】：