非常教程

PostCSS 参考手册

PostCSS插件指南

API

PostCSS插件是一个接收并通常从PostCSS解析器转换CSS AST的函数。

所有PostCSS插件都必须遵守以下规则。

另请参阅ClojureWerkz对开源项目的建议。

1. API

1.1清除带postcss-前缀的名称

只需阅读其名称即可清楚插件的用途。如果您为CSS 4 Custom Media编写了一个转换器,那postcss-custom-media 将是一个好名字。如果你写了一个插件来支持mixins,那postcss-mixins将是一个好名字。

前缀postcss-表明该插件是PostCSS生态系统的一部分。

对于可以作为独立工具运行的插件,此规则不是必需的,用户不必知道它是由PostCSS提供的 - 例如,cssnext和Autoprefixer。

1.2 做一件事,做得好

不要创建多工具插件。捆绑到插件包中的几个小型单用插件通常是更好的解决方案。

例如,cssnext包含许多小插件,每个插件对应一个W3C规范。而cssnano包含每个及其优化的一个单独的插件。

1.3 不要使用mixins

像Compass这样的预处理器库提供了一个带有mixins的API。

PostCSS插件是不同的。插件不能只是postcss-mixin的一组mixins。

要实现您的目标,请考虑转换有效的CSS或使用自定义的规则和自定义属性。

1.4 创建插件postcss.plugin

通过将函数包装在此方法中,您将挂钩到一个常见的插件API:

module.exports = postcss.plugin('plugin-name', function (opts) {
    return function (root, result) {
        // Plugin code
    };
});

PostCSS插件指南相关

PostCSS

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

PostCSS 目录

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