我可以直接针对postcss结果对象运行postcss插件吗？

Question

根据博士后，我应该能够对postcss Result对象执行插件，就像我对CSS字符串执行插件一样(使用Processor.process)。

不幸的是，这似乎行不通。我演示了这个"bug“这里 (为了方便起见，我还复制了下面的代码)。只需单击该链接，打开浏览器的控制台，然后单击“运行代码”执行测试。

我的问题是:既然这不起作用，我如何才能直接针对postcss Result对象运行postcss插件？

演示问题的测试代码

首先，我需要postcss、插件和测试工具。

var postcss = require('postcss')
var cssnext = require('postcss-cssnext')
var test = require('tape')

接下来，我定义了一些输入css和运行插件的预期输出。

var input = 'body { color: rebeccapurple; }'
var expected = 'body { color: rgb(102, 51, 153); }'

现在，测试本身：

1:正常使用，证明插件正常工作。

test('cssnext', function (t) {
  t.plan(1)
  postcss([cssnext]).process(input).then(function (result) {
    t.equals(result.css, expected, 'produces the expected result')
  })
})

此测试通过：

ok 1 produces the expected result

2:使用文档中定义的方法直接在Result对象上应用插件

test('running plugins against a Result object (1)', function (t) {
  t.plan(1)
  // first run without plugins to get a Result object
  postcss([]).process(input).then(function (result) {
    postcss([cssnext]).process(result)
      .then(function () {
        t.equals(result.css, expected, 'produces the same result')
      })
  })
})

此测试失败：

not ok 2 produces the same result
   ---
     operator: equal
     expected: |-
       'body { color: rgb(102, 51, 153); }'
     actual: |-
       'body { color: rebeccapurple; }'
   ...

3:另一次尝试，手动执行插件功能。

test('running plugins against a Result object (2)', function (t) {
  t.plan(1)
  // first run without plugins to get a Result object
  postcss([]).process(input).then(function (result) {
    Promise.resolve(cssnext(result.root, result))
      .then(function () {
        t.equals(result.css, expected, 'produces the same result')
      })
  })
})

此测试也失败了：

not ok 3 produces the same result
   ---
     operator: equal
     expected: |-
       'body { color: rgb(102, 51, 153); }'
     actual: |-
       'body { color: rebeccapurple; }'
   ...

Answer 1

测试2中有问题--忘记在第二个result调用中获得第二个process参数。正确测试：

test('running plugins against a Result object (1)', function (t) {
  t.plan(1)
  // first run without plugins to get a Result object
  postcss([]).process(input).then(function (result) {
    postcss([cssnext]).process(result)
      .then(function (result2) {
        t.equals(result2.css, expected, 'produces the same result')
      })
  })
})

测试3中的问题是，result.css不是一件神奇的事情。如果要更改result.root，则不会更新result.css。以下是一个可能的解决方案：

result.css = result.root.toString()