非常教程

PostCSS 参考手册

PostCSS插件指南

处理

2.1 必须测试插件

还建议使用像Travis这样的CI服务来测试不同环境中的代码。您应该(至少)测试Node.js 活动LTS和当前稳定版本。

2.2 尽可能使用异步方法

例如,使用fs.writeFile而不是fs.writeFileSync

postcss.plugin('plugin-sprite', function (opts) {
    return function (root, result) {

        return new Promise(function (resolve, reject) {
            var sprite = makeSprite();
            fs.writeFile(opts.file, function (err) {
                if ( err ) return reject(err);
                resolve();
            })
        });

    };
});

2.3 设置node.source新节点

每个节点都必须具有相关性,source因此PostCSS可以生成准确的源映射。

因此,如果您根据某些现有声明添加新声明,则应克隆现有声明以保存该原始声明source

if ( needPrefix(decl.prop) ) {
    decl.cloneBefore({ prop: '-webkit-' + decl.prop });
}

您也可以source直接设置,从一些现有节点复制:

if ( decl.prop === 'animation' ) {
    var keyframe = createAnimationByName(decl.value);
    keyframes.source = decl.source;
    decl.root().append(keyframes);
}

2.4 仅使用公共P​​ostCSS API

PostCSS插件不得依赖于未记录的属性或方法,这些属性或方法可能会在任何次要版本中发生变化。API文档中描述了公共API 。

PostCSS插件指南相关

PostCSS

PostCSS 是一个利用 JS 插件来对 CSS 进行转换的工具

PostCSS 目录

1.快速上手
2.PostCSS插件指南
3.PostCSS runner指南
4.编写自定义语法
5.PostCSS插件
6.PostCSS和源地图