postcss入门 #270
Open
postcss入门 #270
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Junting-Liu
reviewed
Oct 15, 2020
|
|
||
| 在PostCSS的官网上，我们可以看到对PostCSS的描述，A tool for transforming CSS with JavaScript。PostCSS只是一个用于提供使用JavaScript去转换CSS的工具，本身并没有实现对CSS的任何修改。PostCSS可以分析CSS文件，将所有的CSS规则转换成AST（抽象语法树），并提供了一系列的API对其可以进行遍历、修改，最终重新生成CSS文件。 | ||
|
|
||
| 首先根据官网的教程，我们可以发现一个简单的插件架子是这样的。 |
There was a problem hiding this comment.
整体读下来没有目录，也没有标题。一段开始是首先，下一段又是首先。读起来需要自己梳理思路，建议增加目录或小标题。
Junting-Liu
reviewed
Oct 15, 2020
| ], | ||
| source: { | ||
| input: Input { | ||
| css: '\nbody {\n margin: 0;\n}\n\n\n', |
There was a problem hiding this comment.
建议把原始文件 body{margin:0} 补在 ast 对象之前，不然需要从 ast 文件反向思考这个是什么的 ast
Junting-Liu
reviewed
Oct 15, 2020
|
|
||
| 在CSS中，有注释、CSS规则、规则中的声明以及媒体查询规则，分别对应PostCSS中的Comment、Rule、Declaration、AtRule对象。除此之外，还有Root对象可以用来表示整个CSS文件；Node对象是所有节点类型对象的祖先对象；Container对象是Root、Rule、AtRule的祖先对象；Result对象是PostCSS转换结果的对象，包含css、map等内容；Warning、CssSyntaxError等等。 | ||
|
|
||
| PostCSS作为CSS的后处理器，我觉得插件实现的功能只应该在原语法上实现一些能力的增强，而不应该增加新的语法，或者是破坏CSS原意。比如用的最多的AutoPrefixer，只是增强了CSS的兼容性，没有增加额外语法，也没有破坏CSS原来要表达的意义。再比如我们可以实现一个插件，当同一规则中碰到多个`display: `的时候，或者`display: block`和`width: 100%`同时出现的时候，删除不必要的声明，对代码进行简化。 |
There was a problem hiding this comment.
PostCSS 除了AutoPrefixer，还有啥其他的常用插件嘛~？有的话，也可以补充科普一下~~~
Junting-Liu
approved these changes
Oct 15, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.