postcss7和postcss8的差异

最新推荐文章于 2024-07-12 17:44:39 发布

webchang

最新推荐文章于 2024-07-12 17:44:39 发布

阅读量2.3k

点赞数 1

分类专栏： JS 文章标签： postcss css js 插件

本文链接：https://blog.csdn.net/weixin_43974265/article/details/119676374

版权

本文介绍了PostCSS是一个CSS转换框架，不是预处理器，它使用JavaScript插件来转换样式。对比了PostCSS7和PostCSS8在插件编写上的差异，包括新API的使用、更小的节点模块以及更快的CSS构建速度。PostCSS8引入的单次扫描API提高了处理速度20%。文章还讨论了版本差异带来的问题，如插件在不同版本间的兼容性，以及如何解决这些问题。

摘要由CSDN通过智能技术生成

1. postcss是什么

PostCSS 是解析器，它将 CSS 解析为对象树(AST)。然后插件改变了这棵树，最后PostCSS 从一个修改过的对象树生成一个新的 CSS 字符串。

PostCSS 不是一个预处理器，也不是一种添加语法糖的方式，它是一个用于创建 CSS 工具的框架，是一个用 JavaScript 插件来转换样式的工具。一个 PostCSS 插件是一个接收并且通常从 PostCSS 解析器转换 CSS AST 的函数。PostCSS 让任何有 JavaScript 经验的人都可以创建自己的插件。

2. postcss7

2.1 编写插件

编写适用于postcss7.x版本的插件语法：

// 需要导入postcss
const postcss = require('postcss');

module.exports = postcss.plugin('postcss-merge2', (opts = {
    }) => {
   
    return (root, result) => {
   
        root.walkRules(rule => {
   
            ...
        })
    }
})