一个简单的 postcss 插件,主要为了说明 postcss 插件是什么,怎么做的。整个项目的代码基本是从 postcss-clearfix 复制过来的,因为感觉这个是最简单易懂且贴近需求的一个插件了。(作者大大不要打我)
如果希望进一步学习 postcss 的插件开发,建议参考官方文档。另外, rucksack 这个项目整合了许多优秀的 postcss 插件,可以从看别人插件源码,有问题查文档的方法来进一步了解 postcss 插件。
提前讲几个概念我自己的理解,欢迎各种拍砖纠正。不怕错误,就怕抱持着错误的理解一直无知下去。
首先这是一段 css:
/* index.css */
body, div {
width: 100px;
clear: fix;
}
label {
clear: fix;
}
在 postcss 的概念里,一个选择器与对应 css 规则的组合,叫 AtRule (rule);每一条 css 规则,叫 Declaration (decl)。在上面的示例中,有两个 rule ,三个 decl 。
好了,就这两个概念。
我们插件的作用,就是输出如下结果:
/* /dist/app.css */
body:after,
div:after {
content: '';
display: block;
clear: both;
}
body, div {
width: 100px;
}
label:after {
content: '';
display: block;
clear: both;
}
为 clear 添加新的属性值 fix 。通过 postcss 来实现这个并不存在的特性。实现参考了经典的清除浮动方法,相信做过前端都会清除浮动。
详见 webpack.config.js 。
输入:/index.css
输出:/dist/app.css
npm install # 安装 node 依赖
npm start # 开始构建 /dist/app.css