PostCSS原理解析

2019-01-14 admin

写在前面的话

前端工程化日益成熟今天,我们对于工具越来越深的封装。不管是从vue-cli3.0版本起,还是umibigfish 等前端脚手架,对于webpack都封装在内,对于工程化无疑是高效的,但也在一定程度上让新手们者失去了从零配置一个项目的机会,所以很多时候还是希望能透过大神们的框架,研究一下底层结构。

简介

PostCSS是一个通过JS插件转换样式表的工具,它本身并不是一门新的CSS语言,而是一个平台或者是生态心态,提供插件扩展服务即JS API,开发者可以根据这些接口,定制开发插件,目前比较流行的插件工具如:AutoprefixerStylelintCSSnano

工作流

图片描述

大致步骤:

  • 将CSS解析成抽象语法树(AST树)
  • 将AST树”传递”给任意数量的插件处理
  • 将处理完毕的AST树重新转换成字符串

在PostCSS中有几个关键的处理机制:

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

将源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
]

Parser

经过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 // 子元素
}

Processor

经过AST之后,PostCSS提供了大量JS API给插件用

Stringifier

插件处理后,比如加浏览器前缀,会被重新Stringifier.stringify为一般CSS。

结语

PostCSS更多的是提供平台能力,赋能js的处理。

原文链接:https://segmentfault.com/a/1190000017886402

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50986.html

文章标题:PostCSS原理解析

相关文章
node.js依赖express解析post请求四种数据格式
node.js依赖express解析post请求四种数据格式 分别是这四种: www-form-urlencoded form-data application/json text/xml 1、www-form-urlencoded 这...
2017-02-27
JavaScript Base64 作为文件上传的实例代码解析
例如我们用某些 裁剪插件 得到的图片是 &lt;img src=&quot;data:image&#x2F;png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHR...
2017-03-17
基于JavaScript实现轮播图原理及示例
网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式: div+css代码 &lt;!DOCTYPE html&gt; &lt;html&gt; ...
2017-03-17
JavaScript 递归和定时器的实例解析
递归:是一个函数通过调用自身的情况下构成的; 首先上个例子: Function factorial(num){ if(num&lt;=1){ return 1; }else{ return num*factorial(num-1);...
2017-03-20
解析javascript中鼠标滚轮事件
所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间。浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作。有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行。除了Firefox之...
2017-03-23
Bootstrap模态窗口源码解析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其中有很多jquery的高级用法,建议,从...
2017-03-20
JavaScript在浏览器中解析Base64编码图像
上一篇介绍中,我们将二进制文件(BLOB)保存为Base64编码的文本,这些文本可以内嵌在XML的标签中,因此二进制信息它可以随着XML文件被拷贝、下载而不用担心信息会缺失。这项技术也在email邮件中被广泛使用。 浏览器对Base64的支...
2017-03-20
JavaScript解析JSON格式数据的方法示例
本文实例讲述了JavaScript解析JSON格式数据的方法。分享给大家供大家参考,具体如下: 1、使用JavaScript提供的eval()函数 function JsonText1() { var strJSON = &quot;{...
2017-02-17
web-push实现原理及细节介绍
一、web push 使用动机与原理简述 相较于移动端本地应用,web站点常常缺少一项常用的功能:推送通知。此处的推送通知一般指由浏览器实现的消息推送,换个说法,就是用户在打开浏览器时,不需要进入特定的网站,就能收到该网站推送而来的消息,例...
2018-01-31
js中跨域方法原理详解
下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一、通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上...
2017-03-27
回到顶部