开发一个psotcss插件

李昌杰发布于2019-08-30 15:56 / 3507人阅读

摘要：另一个是，返回结果对象，譬如，获得处理结果的字符串，包含组件里创建的和自定义信息，创造一个实例并将其加入到中，获得所有创建过的。写在最后想写一下的可以按照这里的指引，很详细这是我写的一个将转为的插件参考

git地址：开发一个psotcss插件

节点类型

postcss会将我们的css生成ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：

css ast主要有3种父类型

AtRule: @xxx的这种类型，如@screen

Comment: 注释

Rule: 普通的css规则

还有几个个比较重要的子类型：

decl：指的是每条具体的css规则

rule：作用于某个选择器上的css规则集合

这是test的地方的，不熟悉ast的可以先了解一下:css ast结构

postCss操作方法

postCss为我们提供了一些方便的操作方法
遍历

walk: 遍历所有节点信息，无论是atRule、rule、comment的父类型，还是rule、 decl的子类型

walkAtRules：遍历所有的atRule

walkComments：遍历所有的注释节点

walkDecls：遍历所以的属性

walkRules：遍历所有的css代码块

root.walkDecls(decl => {
    decl.prop = decl.prop.split("").reverse().join("");
});

postcss在遍历的过程中，会将当前遍历的对象的cell传给回调函数，该参数是对应的rule，decl或者comment等Constructor等构造函数的实例，根据遍历的节点不同，该实例可能会有如下属性：

nodes: css规则的节点信息集合

decl: 每条css规则的节点信息

prop: 样式名，如width

value: 样式值，如10px

type: 类型

source: 包括start和end的位置信息，start和end里都有line和* column表示行和列

selector: type为rule时的选择器

name: type为atRule时@紧接rule名，譬如@import "xxx.css"中的import

params: type为atRule时@紧接rule名后的值，譬如@import "xxx.css"中的xxx.css

text: type为comment时的注释内容

同样还有继承的一些方法，给我操作css的，比如操作每条具体css属性的declaration：

after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn

postcss plugin

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下的方法

可以用postcss.parse来处理一段css文本，拿到css ast，然后进行处理，再通过调用toResult().css拿到处理后的css输出，在一些简单的处理中可以用这种方法。

写在最后：

想写一下的可以按照这里的指引，很详细https://github.com/postcss/postcss-plugin-boilerplate

这是我写的一个将px转为vw的插件vw-by-px

参考：

http://api.postcss.org

postcss-pixel-to-viewport

云服务器 GPU云服务器 psotcss eclipse插件开发 grunt插件开发 firefox插件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117545.html

CSSModules

摘要：支持不同的构建工具，这里我使用的是下文都是以为例。全局作用域允许用的语法声明一个全局的作用域。使用普通的写法，就会引用全局的的样式我是结果的显示黑色。的组合在里，一个选择器可以继承另一个选择器。 showImg(https://segmentfault.com/img/bV7OHk?w=1050&h=360); 这篇文章来一起了解 css 模块化的用法和原理，dome 地址：css ...

Youngdze 2019-08-30 14:22 评论0 收藏0
TinyMCE插件开发

摘要：目前网上关于插件开发的文章少得可怜，下面分享最近的经历，如何快速上手开发一个插件。第六步调试插件在打开的网页中可以看到工具栏中实现了插件。 TinyMCE是一个非常优秀的轻量级的所见即所得HTML编辑器，历史悠久，开源，在github的start也非常高的，且长期保持更新。TinyMCE的官方插件不少，基本能满足日常需求，但是有时候我们还需要一些结合业务的功能。这时官方插件无法满足，就...

aboutU 2019-08-22 18:29 评论0 收藏0
如何开发一个 PyCharm 插件

摘要：今天我们说说怎么搭建环境自己写一个插件。插件工程目录结构一个典型的插件目录结构就像下图。如果成功那么在工程目录就会生成一个同名的文件。 PyCharm 是很多 Python 开发者优先选择的 IDE，功能强大，跨平台，提供免费社区版，非常良心。如果你想自己给PyCharm添加一些功能怎么办呢？有两个办法：通过提需求实现，到 JetBrains 的 github 去提issue或者自...

LdhAndroid 2019-07-25 11:47 评论0 收藏0
插件分享大会[不定期更新]

摘要：最近老是在重装系统，每次重装就要重新配置环境，安装软件，安装插件。因为基本只有这个插件，才可以设置一个文件夹下三个项目能分别传到不同的服务器中。在全球最大的同性交友网站中，只要鼠标悬停到一个项目上时，就会在一个弹窗显示该项目的信息。最近老是在重装系统，每次重装就要重新配置环境，安装软件，安装插件。每次重装的时候，都不知道自己以前到底用过什么软件插件。所以，还是写一篇文章记录下来，顺便...

CastlePeaK 2019-06-28 13:34 评论0 收藏0
插件分享大会[不定期更新]

摘要：最近老是在重装系统，每次重装就要重新配置环境，安装软件，安装插件。因为基本只有这个插件，才可以设置一个文件夹下三个项目能分别传到不同的服务器中。在全球最大的同性交友网站中，只要鼠标悬停到一个项目上时，就会在一个弹窗显示该项目的信息。最近老是在重装系统，每次重装就要重新配置环境，安装软件，安装插件。每次重装的时候，都不知道自己以前到底用过什么软件插件。所以，还是写一篇文章记录下来，顺便...

darkbug 2019-08-20 18:56 评论0 收藏0