Question

根据the postcss docs，我应该可以对postcss Result对象执行插件，就像我对CSS字符串执行它们一样（使用Processor.process）。

不幸的是，这似乎不起作用。我已经演示了这个“bug”here（为方便起见，我还复制了下面的代码）。只需单击该链接，打开浏览器控制台，然后单击“运行代码”即可执行测试。

我的问题是：由于这不起作用，如何直接针对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()

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

演示问题的测试代码

1 个答案: