开发一个psotcss插件

git地址:开发一个psotcss插件

节点类型

postcss会将我们的css生成ast,然后会去遍历它,在遍历的过程中会传给我们一些不同类型的节点对象,我们主要需要了解的几个类型:

  • css ast主要有3种父类型

    • AtRule: @xxx的这种类型,如@screen
    • Comment: 注释
    • Rule: 普通的css规则
  • 还有几个个比较重要的子类型:

    • decl: 指的是每条具体的css规则
    • rule:作用于某个选择器上的css规则集合

这是test的地方的,不熟悉ast的可以先了解一下:css ast结构

postCss操作方法

postCss为我们提供了一些方便的操作方法
遍历

  • walk: 遍历所有节点信息,无论是atRule、rule、comment的父类型,还是rule、 decl的子类型
  • walkAtRules:遍历所有的atRule
  • walkComments:遍历所有的注释节点
  • walkDecls:遍历所以的属性
  • walkRules:遍历所有的css代码块

    root.walkDecls(decl => {
        decl.prop = decl.prop.split('').reverse().join('');
    });

postcss在遍历的过程中,会将当前遍历的对象的cell传给回调函数,该参数是对应的rule,decl或者comment等Constructor等构造函数的实例,根据遍历的节点不同,该实例可能会有如下属性:

  • nodes: css规则的节点信息集合

    • decl: 每条css规则的节点信息

      • prop: 样式名,如width
      • value: 样式值, 如10px
  • type: 类型
  • source: 包括start和end的位置信息,start和end里都有line和* column表示行和列
  • selector: type为rule时的选择器
  • name: type为atRule时@紧接rule名,譬如@import 'xxx.css'中的import
  • params: type为atRule时@紧接rule名后的值,譬如@import 'xxx.css'中的xxx.css
  • text: type为comment时的注释内容

同样还有继承的一些方法,给我操作css的, 比如操作每条具体css属性的declaration

after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn

postcss plugin

postcss插件如同babel插件一样,有固定的格式

export default postcss.plugin('postcss-plugin-name', function (opts) {
  opts = opts || {};
  return function (root, result) {
    // 处理逻辑
  };
});

注册个插件名,并获取插件配置参数opts

返回值是个函数,这个函数主体是你的处理逻辑,有2个参数,一个是root,css ast的根节点。另一个是result,返回结果对象,譬如result.css,获得处理结果的css字符串,result.message包含组件里创建的warnings和自定义信息,result.warn()创造一个warning实例并将其加入到result.message中,result.warnings()获得所有创建过的warning。

注意组件的异常信息处理,不要直接console,因为一些 postcss 处理器会过滤掉console的输出导致异常信息丢失,用node.warn或者node.error创造CssSyntaxError 实例,会自动带上源码中的位置信息帮助debug,加到异常信息队列里。

直接调用postcss下的方法

可以用postcss.parse来处理一段css文本,拿到css ast,然后进行处理,再通过调用toResult().css拿到处理后的css输出,在一些简单的处理中可以用这种方法。

写在最后:

参考:


前端持续学习之路
本专栏持续更新前端学习工作中相关技术文章

good good study, day day up

309 声望
15 粉丝
0 条评论
推荐阅读
babel归纳总结
在前端的发展过程中,javascript的兼容性,一直是前端头痛的问题,在以前的一些有些项目中,为解决浏览器兼容而花费的时间甚至还要多余实际的业务逻辑开发时间,babel就是其中处理兼容的转译工具(或者叫平台)。

张功涛8阅读 7.1k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.6k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.9k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.3k

封面图
CSS 如何根据背景色自动切换黑白文字?
在项目中,经常会碰到背景色不确定的场景,为了让内容文字足够清晰可见,文字和背景之间需要有足够的对比度。换句话说,当背景是深色时,文字为白色,当背景是浅色时,文字为黑色,就像这样:

XboxYan19阅读 1.7k

封面图

good good study, day day up

309 声望
15 粉丝
宣传栏