We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
postcss会将我们的css生成ast,然后会去遍历它,在遍历的过程中会传给我们一些不同类型的节点对象,我们主要需要了解的几个类型:
这是test的地方的,不熟悉ast的可以先了解一下:css ast结构
postCss为我们提供了一些方便的操作方法 遍历
root.walkDecls(decl => { decl.prop = decl.prop.split('').reverse().join(''); });
postcss在遍历的过程中,会将当前遍历的对象的cell传给回调函数,该参数是对应的rule,decl或者comment等Constructor等构造函数的实例,根据遍历的节点不同,该实例可能会有如下属性:
同样还有继承的一些方法,给我操作css的, 比如操作每条具体css属性的declaration:
after before cleanRaws clone cloneAfter cloneBefore error next prev raw remove replaceWith root toString warn
postcss插件如同babel插件一样,有固定的格式
export default postcss.plugin('postcss-plugin-name', function (opts) { opts = opts || {}; return function (root, result) { // 处理逻辑 }; });
注册个插件名,并获取插件配置参数opts
返回值是个函数,这个函数主体是你的处理逻辑,有2个参数,一个是root,css ast的根节点。另一个是result,返回结果对象,譬如result.css,获得处理结果的css字符串,result.message包含组件里创建的warnings和自定义信息,result.warn()创造一个warning实例并将其加入到result.message中,result.warnings()获得所有创建过的warning。
注意组件的异常信息处理,不要直接console,因为一些 postcss 处理器会过滤掉console的输出导致异常信息丢失,用node.warn或者node.error创造CssSyntaxError 实例,会自动带上源码中的位置信息帮助debug,加到异常信息队列里。
可以用postcss.parse来处理一段css文本,拿到css ast,然后进行处理,再通过调用toResult().css拿到处理后的css输出,在一些简单的处理中可以用这种方法。
写在最后:
参考:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
类型
postcss会将我们的css生成ast,然后会去遍历它,在遍历的过程中会传给我们一些不同类型的节点对象,我们主要需要了解的几个类型:
这是test的地方的,不熟悉ast的可以先了解一下:css ast结构
postCss操作方法
postCss为我们提供了一些方便的操作方法
遍历
postcss在遍历的过程中,会将当前遍历的对象的cell传给回调函数,该参数是对应的rule,decl或者comment等Constructor等构造函数的实例,根据遍历的节点不同,该实例可能会有如下属性:
同样还有继承的一些方法,给我操作css的, 比如操作每条具体css属性的declaration:
postcss plugin
postcss插件如同babel插件一样,有固定的格式
注册个插件名,并获取插件配置参数opts
返回值是个函数,这个函数主体是你的处理逻辑,有2个参数,一个是root,css ast的根节点。另一个是result,返回结果对象,譬如result.css,获得处理结果的css字符串,result.message包含组件里创建的warnings和自定义信息,result.warn()创造一个warning实例并将其加入到result.message中,result.warnings()获得所有创建过的warning。
注意组件的异常信息处理,不要直接console,因为一些 postcss 处理器会过滤掉console的输出导致异常信息丢失,用node.warn或者node.error创造CssSyntaxError 实例,会自动带上源码中的位置信息帮助debug,加到异常信息队列里。
直接调用postcss下的方法
可以用postcss.parse来处理一段css文本,拿到css ast,然后进行处理,再通过调用toResult().css拿到处理后的css输出,在一些简单的处理中可以用这种方法。
写在最后:
参考:
The text was updated successfully, but these errors were encountered: