与autoprefixer共同使用引起报错

[刘祺]

报错信息

TypeError: value.indexOf is not a function
    at OldValue.check (E:\work\CommonJS\node_modules\autoprefixer\lib\old-value.js:17:17)
    at E:\work\CommonJS\node_modules\autoprefixer\lib\processor.js:198:25
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:86:28
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:73:26
    at Rule.each (E:\work\CommonJS\node_modules\postcss\lib\container.js:60:22)
    at Rule.walk (E:\work\CommonJS\node_modules\postcss\lib\container.js:72:21)
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:75:32
    at Root.each (E:\work\CommonJS\node_modules\postcss\lib\container.js:60:22)
    at Root.walk (E:\work\CommonJS\node_modules\postcss\lib\container.js:72:21)
    at Root.walkDecls (E:\work\CommonJS\node_modules\postcss\lib\container.js:84:25)

gulp配置

function cssPipe(stream) {
    var processors = [
        require("cssgrace"),
        require("autoprefixer")({
            browsers: ["last 3 version", "ie > 8", "Android >= 3", "Safari >= 5.1", "iOS >= 5"]
        }),
    ];
    stream = stream.pipe(require("gulp-postcss")(processors));
    return stream;
}

引发问题的css代码

audio,
canvas,
progress,
video {
  display: inline-block;
}

[刘祺]

找到原因了

insertDecl(decl, i, {
  before: reBefore,
  prop: '*zoom',
  value: 1
});

这里的value: 1改为value: '1'即可恢复正常

autoprefixer那边会将value按字符串操作，所以会报错

已在 #44 中修复

[su]

先执行 autorefixer ，再执行 cssgrace，换下插件引用顺序就不会有这个问题

[刘祺]

@suhaotian 这并不是解决问题的根本办法，只能作为临时方案。不解决问题本身，那么必须保证cssgrace放在postcss流程的最后一项，才不会报错，因为我们无法保证其他其他插件不对decl.value做toString()操作。

[一丝]

@gucong3000 PostCSS 6.0 将解决插件顺序的问题，也就是说可以随意调整顺序啦。

[su]

@gucong3000 All right！

[刘祺]

不不，我并不是在讨论如何绕过这个坑，而是填平这个坑，通过把整数1换成字符串1，这样极为微小的代价，就能解决这种让开发者摸不着头脑的报错信息，我觉得非常划算。

[一丝]

@gucong3000 这个仓库被人误删除掉了，重新找回后我现在没有权限了，等我找回权限我来统一处理积压的一堆问题，再次感谢给予的帮助和支持。

[刘祺]

哦，时间过得太久，我都记错了，#44依然有其他问题的修复，还有有合并的必要的。