0

根据postcss 文档，我应该能够对 postcssResult对象执行插件，就像我对 CSS 字符串执行插件一样（使用Processor.process）。

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

我的问题是：因为这不起作用，我如何直接针对 postcssResult对象运行 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; }'
   ...
4

1 回答 1

0

您在测试 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()
于 2016-04-15T09:56:34.490 回答