你对postcss了解多少呢?

[官方解释]:

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

借助JavaScript,PostCSS自身只包括以下4中能力:

⁃ css分析器
⁃ css节点树API
⁃ source map生成器
⁃ css节点树拼接器

关键介绍:

其实,postcss目前已经超过200+的插件,她几乎可以完成你所有和 CSS 相关的工作(包括 Sass 和 Less 这些预处理器的工作),极大的提高你处理 CSS 的效率。

有些插件可以让你使用未来的语法,允许你使用诸如颜色函数,径向渐变,自定义属性,自定义选择器,为媒体查询自定义别名以及许多其他的功能。还有一些颜色管理的插件,用来把颜色从一种格式转换到另一种格式,修改颜色的 alpha 透明度,合成颜色等。

你目前开发的项目,不论你是用css,sass,less等格式来写,你都能使用postcss,而且不会相互影响。使用了postcss之后,你会发现,你只要维护一个(postcss)版本。

PostCSS 的插件是用 JavaScript 写的,只要你有想法,有一定的 JS 基础,你就可以把你的想法用插件的形式实现出来。你不需要安装Ruby环境。而且和构建工具无缝集成。

那么构建工具webpack如何配置postcss?

从官方文档中一句话中知道:
The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
那么我们现在以autoprefixer为例,把postcss的autoprefixer配置到webpack中。
直接把配置文件的源代码发此处

'use strict';
const path = require('path');
const srcPath = path.join(__dirname, '/../src');
const dfltPort = 8000;
function getDefaultModules() {
  return {
    preLoaders: [{
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader'
      }],
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
      },
      {
        test: /\.sass/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded&indentedSyntax'
      },
      {
        test: /\.scss/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader?outputStyle=expanded'
      },
      {
        test: /\.less/,
        loader: 'style-loader!css-loader!postcss-loader!less-loader'
      },
      {
        test: /\.styl/,
        loader: 'style-loader!css-loader!postcss-loader!stylus-loader'
      },
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg|svg)$/,
        loader: 'file-loader'
      }
    ]
  };
}
module.exports = {
  srcPath: srcPath,
  publicPath: '/assets/',
  port: dfltPort,
  getDefaultModules: getDefaultModules,
  postcss: function () {
    return [
      require('autoprefixer')({
        browsers: ['last 2 versions', 'ie >= 8']
      })
    ];
  }
};

如何开发postcss插件呢?

其实开发插件之前,你肯定会想到api吧。那么postcss Api,非常详细的插件开发流程。
这里提供一个链接“快点我”,你可以直接在此尝试postcss强大的插件功能。
当然,做任何事情都得有原则,有规范,postcss插件开发也不例外。

  • 不重复开发已有插件能力
  • 插件功能单一
  • 实现插件的逻辑时,尽可能使用异步流程,如:Promise, Generator, Async-await

结束语:

说了这么多,你对postcss了解了吗?
还不赶紧试试~
详情请点击官方链接
如果你觉得通过这篇文章,你知道了postcss是什么,怎么玩了,请帮忙点个赞。如果有哪里说的不对的地方,请留下贵大神指出哦。

推荐阅读更多精彩内容