postcss - archering/basic GitHub Wiki

https://www.sitepoint.com/an-introduction-to-postcss/

PostCSS is not a preprocessor

PostCSS parses CSS into an abstract syntax tree (AST), passes it through a series of plugins, and then concatenates back into a string. postcss 接收css作为数据源，postcss内部有一个css parser 这个parser会把css 转成一个 AST,这个AST再经过一系列的plugin 转成 css 字符串输出。

输入的是css 输出的也是 css 举例

CSS3.X的最新语法

@custom-media --med (width <= 50rem);

@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

经过 postcss的插件 PostCSS Preset Env， 转成

@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
} 

全局的css 变为局部的css

.name {
  color: gray;
}

CSS Modules 插件

.Logo__name__SVK0g {
  color: gray;
}

postcss 一般都是搭配在其他工具如 grunt， gulp ， webpack 等工具下使用，具体可以参看

https://postcss.org/