了解PostCSS原理

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

简介

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

类似于babel/core提供核心API让babel-plugin-进行代码转换。

postCss 给出了很多操作 css 规则的方法。处理 css 的方式其实有2种：编写 postcss plugin，如果你的操作非常简单也可以直接利用 postcss.parse 方法拿到 css ast 后分析处理。

postcss plugin

1、postcss 插件如同 babel 插件一样，有固定的格式。

2、注册个插件名，并获取插件配置参数 opts。

3、返回值是个函数，这个函数主体是你的处理逻辑，有2个参数，一个是 root，AST的根节点。另一个是 result，返回结果对象，譬如 result.css，获得处理结果的 css 字符串。

export default postcss.plugin('postcss-plugin-name', function (opts) {opts = opts || {};return function (root, result) {// 处理逻辑};
});

可以用 postcss.parse 来处理一段 css 文本，拿到 css ast，然后进行处理，再通过调用 toResult().css 拿到处理后的 css 输出。

了解PostCSS原理相关推荐

PostCSS原理解析
写在前面的话前端工程化日益成熟今天,我们对于工具越来越深的封装.不管是从vue-cli的3.0版本起,还是umi.bigfish 等前端脚手架,对于webpack都封装在内,对于工程化无疑是高效的, ...
前端架构设计第六课工程化构建、编译、运行
12 如何理解 AST 实现和编译原理? 经常留意前端开发技术的同学一定对 AST 技术不陌生.AST 技术是现代化前端基建和工程化建设的基石:Babel.Webpack.ESLint.代码压缩工具等 ...
前端基础建设与架构11 Tree Shaking：移除 JavaScript 上下文中的未引用代码
时至今日,Tree Shaking 对于前端工程师来说,已经不是一个陌生的名词了.顾名思义:Tree Shaking 译为"摇树",它通常用于描述移除 JavaScript 上下文 ...
展望未来：使用 PostCSS 和 cssnext 书写 CSS
原文:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像 Twitter,Google,BBC 使用的一样,我打算对 ...
scoped原理、不足、弥补或替代
参考文档原理给元素添加唯一属性(同一组件中所有dom添加的属性值相同),然后通过属性选择器获取该元素通过 PostCSS 实现以下转换 <style scoped> .example ...
Taro多端开发实现原理与项目实战(一)
Taro 多端开发实现原理与项目实战前端多端统一开发背景与趋势介绍背景「大前端」不仅会成为移动开发与 Web 前端的发展趋势,也会是未来的显示设备终端的开发技术趋势? 越来越多的业内人士对此表示 ...
6个很棒的PostCSS插件，让您成为一个CSS向导
PostCSS是一个非常通用的工具,它可以通过javascript插件转换CSS样式.它的灵活性在于它的建造方式. PostCSS的核心部分是一个node.js模块,您可以使用NPM进行安装,它有一个 ...
Rem布局的原理解析
什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em em作为font-size的单位时,其代表 ...
css中调整高度充满_6个很棒的PostCSS插件，让您成为一个CSS向导
PostCSS是一个非常通用的工具,它可以通过javascript插件转换CSS样式.它的灵活性在于它的建造方式. PostCSS的核心部分是一个node.js模块,您可以使用NPM进行安装,它有一个 ...

了解PostCSS原理

简介

postcss plugin

了解PostCSS原理相关推荐

最新文章

热门文章