【前端知识体系

时间: 2019-12-08 07:30编辑:admin

 // 1. 能够增加特点前缀,习惯一切的浏览器
 const autoprefixer = require

3.import完成模块的兼并
4.css语法查看,兼容性查看
5.压缩文件



[!note]
postcss是一个通过js菠菜信誉导航插件转化样式表的东西,它本身并不是一门新的css言语,而是一个渠道或者是生态心态,供给插件扩展服务即js api,开发者能够依据这些接口,定制开发插件,
现在比较盛行的插件东西如:autoprefixer 、stylelint 、cssnano。



source string → tokenizer → parser → ast → processor → stringifier

[!note]
将源css字符串进行分词


举个比方:
.classname { color: #fff; }
通过tokenizer后成果如下:



[
 [ word , .classname , 1, 1, 1, 10]
 [ space , ]
 [ { , { , 1, 12]
 [ space , ]
 [ word , color , 1, 14, 1, 18]
 [ : , : , 1, 19]
 [ space , ]
 [ word , #fff , 1, 21, 1, 23]
 [ , , 1, 24]
 [ space , ]
 [ } , } , 1, 26]
]

以word类型为例,参数如下:

const token = [
 // token 的类型,如word、space、comment
 word ,
 // 匹配到的词称号
 .classname ,
 // 代表该词开端方位的row以及column,但像 type为`space`的特点没有该值
 1, 1,
 // 代表该词完毕方位的row以及column,
 1, 10
]

[!note]
通过tokenizer之后,需求parser将成果初始化为ast


this.root = {
 type: root ,
 source: { input: {css: .classname { color: #fff; } , hasbom: false, id: input css 1 },
 start: { line: 1, column: 1 } ,
 end: { line: 1, column: 27 }
 raws:{after: , semicolon: false}
 nodes // 子元素
}

通过ast之后,postcss供给了很多js api给插件用

插件处理后,比方加浏览器前缀,会被从头stringifier.stringify为一般css。

参阅博客:

菠菜首存-菠菜网-菠菜信誉导航