0

postcss docsによるとResult、CSS の文字列に対して ( を使用して) プラグインを実行するのと同じ方法で、postcss オブジェクトに対してプラグインを実行できるはず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

Result2: ドキュメントで定義されているメソッドを使用して、プラグインをオブジェクトに直接適用します

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

resultテスト 2 に問題があります — 2 番目の呼び出しで 2 番目の引数を取得するのを忘れてい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 に答える