前面几篇文章我们聊了如何解析HTML标签，这篇文章我们聊一下解析CSS的模块——css。
安装
npm install cssparse方法使用
css模块提供了一个解析css内容的方法parse，它返回css内容的抽象语法树（AST）。
图1
图1执行结果如下：
图2
parse方法还可以传入第二个参数，这个参数是个对象，它有两个属性，其中一个属性是source，代表css文件的路径，如果参数中存在source属性，在parse方法返回的抽象语法树结果中或者在解析报错时的信息中都会带上文件的路径。另外一个属性是silent，如果设置了这个属性，即使在解析中出错，parse方法也不会抛出错误。
图3
stringify方法使用
stringify方法的第一个参数是css内容的抽象语法树对象，返回的结果是css内容，此方法的作用和parse正好相反，如下图所示。
图4
stringify方法的第二个参数也是一个对象，对象属性有indent、compress、sourcemap、inputSourcemaps。
indent代表输出的css内容的缩进，默认是两个空格。利用这个属性就可以做一个css格式化工具。
图5
compress表示css的内容是否需要被压缩，压缩时会移除所有的空格和注释。
图6
sourcemap用于生成css的sourceMap。
图7
图7红色区域中sourceMap的json串的原理是什么？不了解的同学可以参考作者之前的一篇文章《深度解析前端代码打包过程中是如何生成sourceMap的？》，我相信一定难不倒聪明的你，这里就不再熬述了。
inputSourcemaps表示在生成sourcemap时可以读取已存在的sourcemap引用，默认是true。因为有些打包好的css文件中已经存在了sourcemap的引用，所以在解析时这个模块会自动读取map信息。
抽象语法树AST
在作者看来，AST是前端皇冠上的明珠，就像发动机之于飞机，石油之于工业。有了AST，前端的页面可以在浏览器上渲染出来，有了AST，就可以自由的开发自己的框架。它即很重要，却也很难掌握，所以这个知识点放在以后讲。
总结
本文主要分享了一个css的解析模块，那它到底有什么用呢？我们平常用的语法校验、格式校验、sourcemap等都和它相关，所以如果需要开发一个和css相关的node工具，就可以考虑使用这个模块。
喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/285260.html