postcss简介

2018-04-01

postcss官网定义，postcss是一个将css转化成js的工具。
A tool for transforming CSS with JavaScript
postcss是一个css构建工具。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。我们常常在webpack中使用它，但是它可以在例如gulp的其他地方使用，感兴趣的同学可以自己研究。在github上有详细的介绍。这里我结合我们的mk系统架构简单介绍下常用的postcss api。

常用API介绍

autoprefixer

虽然在simple-momo项目中木有使用这个api，我还是忍不住要介绍它，因为太常用了。

autoprefixer的作用是识别css中的新属性，并为其自动生成添加浏览器兼容前缀的代码，从而保证尽量少的codding就可以实现兼容性。例如，代码中这么写：

1
2
3

::placeholder {
  color: gray;
}

使用autoprefixer构建后就变成这样：

::-webkit-input-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

postcss-smart-import

可以看到第一个引入的api插件就是它。postcss-smart-import在github上star数并不高，why？因为：

This project is not maintained anymore. Please use postcss-import instead

好吧，可以考虑更新包了～～

不过不影响我们了解它。

PostCSS plugin for loading/including other files (transform @import rules by inlining content) and quering/referring assets (referred in url() functions).

翻译过来就是：postcss是一个加载引入其他文件（将@import方法引入的css转成内联）和查询静态资源（css中url（）方法中指定的静态资源）的插件。

顾名思义，它主要解决的css的引入问题。独特的@import规则，css内静态资源的引入问题……

ps：该插件的作者推荐它作为postcss众多插件中首先引入的：

This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you can expect.

postcss-cssnext

postcss-cssnext插件帮助我们能使用css最新特性，和js的polifill一样一样的。同理，它也帮助我们解决这些新特性的浏览器兼容性问题了。上官网描述：

-PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.-

还可以看cssnext官网。下面再介绍下配置项。

browsers：允许开发者定义需要兼容的浏览器范围。默认值： browserslist default > 1%, last 2 versions, Firefox ESR, Opera 12.1
features：顾名思义，定义属性。官方推荐使用browsers代替这个属性。
warnForDuplicates：重复引入报警，默认true。官方认为除非确认要关闭该功能，否则不要更改。举个例子，引入autoprefixer + cssnext，引入autoprefixer里已经引入了cssnext，所以就可以起作用了。
warnForDeprecations：冲突时报警。官方声明这里不要改，除非你做好承担后果的准备（赤果果的威胁～）

precss

precss提供了一个插件包,提供类似sass的语法特性。功能包括变量、条件语句和迭代器等等，感兴趣等同学继续挖吧～

postcss-px-to-viewport

postcss-px-to-viewport字面意思就是将px转成viewport等单位（vw, vh, vmin, vmax）。手机端开发经常需要用到这个。

同样可以在代码中看到这个是有配置项的。我们再一起了解下这些配置项的作用。首先看默认属性值：

{
  viewportWidth: 320,
  viewportHeight: 568,
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
}

viewportWidth：(Number类型) viewport的宽度
viewportHeight：(Number类型) viewport的高度
unitPrecision：(Number类型) 我理解是允许的小数点最大位数.
viewportUnit：(String类型) 设置要转成的单位
selectorBlackList：(Array类型) 设置忽略转换单位的选择器。Array的值可以是字符串、正则等。

webpack引入方式

以webpack3语法为例，一般引入方式如下：
首先在moudle模块引入postcss加载器，放在style-loader和css-loader后面：

//这些选项确定如何处理项目中不同类型的模块。
  module: {
    rules: [
      // CSS 和 POSTCSS 加载器，使用嵌入 CSS.
      {
        //设置对应的资源后缀.
        test: /\.(css|scss)$/,
        //设置后缀对应的加载器.
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader?modules' },
          { loader: 'postcss-loader' },
        ]
      }
    ]
  }

然后，我们上面介绍的各种api配置放在哪里呢？答案是根目录下的postcss.config.js文件里，配置格式如下（非源码）：

module.exports = {
  plugins: [
    require('postcss-conditionals')(),
    require('postcss-simple-vars')(),  
    require('postcss-each')(),
    require('postcss-for')(),
    require('postcss-mixins')(),
    require('postcss-import')(),
    require('postcss-nested')(),
    require('postcss-atroot')(),
    require('cssnext')({
      features: {rem: false}
    }),
    require('postcss-extend')()
  ]
}

postcss-loader的配置文件就是postcss.config.js。它有个很有意思的规则，就是对于postcss-loader来说，他优先取同目录下的postcss.config.js的配置属性。也就是我们可以根据业务情况在多个含有css文件的目录内配置不同的postcss.config.js，解析css时优先读取离他最近的postcss.config.js。为复杂场景的css构建方案提供了更加灵活的方式。

后话

看到vue-cli已经引入了postcss-loader，查看package.json，果然没有引入。不过第三方开发的postcss插件还是需要引入的～