Postcss 运用以及原理解析

这篇文章是我在公司内部的一个分享，大部分时间都在调试 postcss 源码，即 postcss 将 css 字符串解析为 CSS AST 的过程，很可惜这部分是不可见的，我打算录制视频放到B站上面，后续再更新。

本文目标：

掌握 postcss 的使用
自定义 postcss 插件
掌握 stylelint 的使用
自定义 stylelint rule
扩展 css parser 解释器

1. postcss 是什么

在聊 postcss 之前，我们需要知道什么是 CSS 后处理工具。我们比较熟悉的 Less/Sass/Stylus，这类工具都属于CSS 预处理工具。预处理指的是通过特殊的规则，将非 css 文本格式最终生成 css 文件，而 postcss 则是对 CSS 进行处理，最终生成CSS。
可能大部分前端开发者都使用过 Autoprefixer 这款插件，它以 Can I Use (浏览器兼容性支持) 为基础，自动处理兼容性问题，下面是一个简单的例子：

// Autoprefixer 处理前的CSS样式
.container {
    display: flex;
}
.item {
    flex: 1;
}

// Autoprefixer 处理后的CSS样式
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

在这个例子中过，通过使用 Autoprefixer 插件，帮助我们自动处理浏览器前缀，极大的提高了编码效率。其实，Autoprefixer 正是 postcss 众多插件中的一款，postcss 提供的简洁明了API，并且文档十分详细，这为其生态建设提供了有力的支撑。点击这里查看更多可用插件。

2. postcss 如何使用

两个主要的功能：

转换 css，这是我们最常使用的
获取 css ast，当我们编写插件时需要掌握

2.1 转换 css

这里只介绍 postcss API，如果您使用 webpack，只需要将 postcss 包装为 postcss-loader 即可。

// 01-simple-demo
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const precss = require('precss')
const fs = require('fs')
const path = require('path')

const src = path.resolve('./src/app.css');
const dest = path.resolve('./dest/app.css');

fs.readFile(src, (err, css) => {
  postcss([precss, autoprefixer]) // [precss, autoprefixer] 为使用的插件列表，返回 Processor 对象
    .process(css) // process 接收 css 资源
    .then(result => { // result 为 Result 实例
      fs.writeFile(dest, result.css, function(err) {
        if (err) throw err;
      });
    })
})

2.2 获取 CSS AST

// 02-use-parser
const postcss = require('postcss')
const fs = require('fs')
const path = require('path')

const src = path.resolve('./src/app.css');
const css = fs.readFileSync(src);
const root = postcss.parse(css);

console.log(root); // CSS 抽象语法树

3. postcss 的运行过程

主要步骤：

解释：接收输入的css，将css内容处理成css抽象语法树。
转换：根据配置插件的顺序对树型结构的 AST 进行操作。
输出：最终将处理后获得的 AST S 对象输出为 css 文件。

主要内容：

标记器：将 css 拆解为 token 序列，为语法树提供基础（postcss/lib/tokenize.js ...）
解释器：通过语法分享，将 token 序列转换为语法树（postcss/lib/parser.js ...）
处理器：根据插件配置，对语法树做一些转换操作（postcss/lib/lazy-result.js ...）

最不容易理解的也是最难的点：CSS AST 的生成以及操作。

4. postcss CSS AST

你暂且将 AST 理解一个节点树，这些节点不完全相同，它们继承自同一个节点(源码中为Container)。
在学习 postcss 初期，通过查看可视化的 postcss css 语法树，可以帮助你理解。使用使用 css ast 在线工具，下图为一个很标准的 css 文档，有注释、媒体查询，以及选择器样式:

/**
 * Paste or drop some CSS here and explore
 * the syntax tree created by chosen parser.
 * Enjoy!
 */

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

#main {
    border: 1px solid black;
}

ul li {
    padding: 5px;
}

上面的 css 最终会处理为下图结构，通过打印信息我们可以发现树型结构的 JS 对象是一个名为 Root 的构造函数，而起树型结构的 nodes 节点下还有 Common，AtRule, Rule 构造函数。

image.png

CSS AST 节点主要有以下构造类组成：

Root: 根结点，整个处理过程基本上都在围绕着 Root，Commont，AtRule，Rule 都是它的子节点。
Commont: css 中的注释信息，注释的内容在 comment.text 下。
AtRule: 带@标识的部分，name 为标识名称，params 为标识参数。nodes 为内部包含的其他子节点，可以是 Commont，AtRule，Rule，这让我们可以自定义更多的规则。
Declaration：每个 css 属性以及属性值就代表一个 declaration

4.1 Rule 选择器节点

一个选择器代表一个Rule，选择器对应的样式列表 nodes 为 Declaration构造函数

image.png

raws
- before 距离前一个兄弟节点之间的内容
- between 选择器与 { 之间的内容
- semicolon 最后一个属性是否带分号
- after 最后一个属性和 } 之间的内容

image.png

type 节点类型
nodes 子节点
source
- start 开始位置
- end 结束位置
selecter 选择器

大部分节点结构是类似的，如果你理解了 Rule 节点的结构，相信其他类型的节点对你也是很轻松的！

4.2 Declaration 属性节点

Declaration 是 css 样式属性，prop为样式属性，value为样式值。可给 Rule 手动添加样式属性，也可以修改prop，value。上文提到的 Autoprefixer 就是通过 clone 当前属性，修改 prop 并添加到选择器下，Declaration 节点非常简单：

image.png

4.3 Comment 注释节点

image.png

5. 各构造器方法和属性

大部分节点都继承了 Container，因此我们先看看公共属性：

nodes 子节点
parent 父节点
raws 相当于分隔符集合
source 位置范围
type 节点类型
last 该节点的子节点的最后一个
first 该节点的子节点的第一个
after() 在当前节点的后面插入一个节点，等价 node.parent.insertAfter(node, add)
cleanRaws 代码格式化（保持缩进...）
clone 节点克隆
cloneBefore
cloneAfter
each 遍历儿子节点
error 抛出一个错误
every 条件遍历
index 获取节点在父节点中的索引
insertAfter
insertBefore
next
positionInside Convert string index to line/column
prepend
push
raw()
remove()
removeAll() Removes all children from the container and cleans their parent properties.
removeChild
replaceValues 用于遍历所有子孙节点 decl value
root()
some() Returns true if callback returns true for (at least) one of the container’s children.some()
toJSON() 打印 JSON，使用 JSON.stringify() 有循环依赖
toString() 获取转换后的 css
walk() 遍历所有子孙节点，这个接口非常有用哦
walkAtRules 遍历艾特节点
walkComments 遍历注释节点
walkRules 遍历选择器节点
walkDecls 遍历属性节点

5.1 Rule

公共属性方法
selector 选择器
selectors 选择器数组

[图片上传失败...(image-ed56fe-1630568107685)]

5.2 Declaration

公共属性方法
prop
value

5.3 Comment

公共属性方法
text

6. 如何使用 postcss 插件

插件用于丰富 postcss 的功能。

插件编写文档

https://www.postcss.parts

https://github.com/himynameisdave/postcss-plugins#submitting-a-new-plugin

postcss([PluginA({}), PluginB({})])
  .process(css, {from: ``, to: ``})
  .then(result => {
    // do ...
    }).catch(error => {
    throw new Error(error)
    })

7. 如何编写一个 postcss 插件

上文中，我们对 css 处理后生成的 Root 以及其节点下的 Commont，AtRule，Rule， Declaration 有了基本的认识，那么我们是如何获得Root，又将拿这些构造函数做些什么呢。

7.1 案例：css选择器深度校验

const fs = require('fs')
const path = require('path')
const postcss = require('postcss')
const css = fs.readFileSync(path.resolve(__dirname, './main.css'), 'utf8')

const checkDepth = postcss.plugin('check-depth', (opt) => {
  opt = opt || { depth: 3 }
  return root => {
    root.walkRules(rule => {
      let selector = rule.selector.replace(/(^\s*)|(\s*$)/g, '')
      if (selector.split(/\s/).length > opt.depth) {
        throw rule.error(`css selector depth is too long`)
      }
    })
  }
})

postcss([checkDepth({
  depth: 3
})])
  .process(css, { from: ``, to: `` })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    throw new Error(error)
  })

7.2 案例：px 转 rem

const postcss = require('postcss') // postcss

module.exports = postcss.plugin('px2rem', function(opts) {
  opts = opts || {};
  return function (root, result) {
    root.replaceValues(/\d+px/, { fast: 'px' }, string => {
      return opts.ratio * parseInt(string) + 'rem'
    })
  }
});

通过上述插件代码的示例，可以看出整个流程还是很清晰的

重点对象：Root，Commont，AtRule，Rule， Declaration，Result;
遍历方法：walkCommonts，walkAtRules，walkRules，walkDels

8. postcss 的运用

stylelint 的使用
扩展 stylelint 规则
...见代码

9. 参考文档

http://api.postcss.org
postcss API文档
postcss 在线开发
postcss 插件列表

Postcss 运用以及原理解析

1. postcss 是什么

2. postcss 如何使用

2.1 转换 css

2.2 获取 CSS AST

3. postcss 的运行过程

4. postcss CSS AST

4.1 Rule 选择器节点

4.2 Declaration 属性节点

4.3 Comment 注释节点

5. 各构造器方法和属性

5.1 Rule

5.2 Declaration

5.3 Comment

6. 如何使用 postcss 插件

7. 如何编写一个 postcss 插件

7.1 案例：css选择器深度校验

7.2 案例：px 转 rem

8. postcss 的运用

9. 参考文档

你可能感兴趣的:(Postcss 运用以及原理解析)