深入浅出PostCSS

1、介绍

---

• 什么是PostCSS

PostCSS是一个允许使用JS插件转换样式的工具。这些插件可以检查（lint）你的CSS，支持CSS变量和Mixins，编译尚未被浏览器广泛支持的先进的CSS语法，内联图片，以及其它很多优秀的功能。PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。

• PostCSS特点

• 通过其插件生态系统提供多种功能
• 它的模块化，“使用你所需要的”性质
• 它的快速编译时间
• 创建自己的插件的可访问性
• 使用常规CSS的选项
• 创建不依赖于一个预处理器的库的能力
• 其无缝部署与许多流行的构建工具

2、Gulp中集成PostCSS

---

本篇文章将在gulp中集成PostCSS，如果你不了解Gulp使用的基础知识，请先查看3分钟学会gulp自动化构建工具

• 基本Gulp PostCSS设置

初始化gulp工程，安装gulp-postcss和gulp

在终端/命令提示符下，运行命令：

mkdir PostCssDemo && cd PostCssDemo
npm init -y
npm install --save-dev gulp gulp-postcss
touch gulpfile.js && open gulpfile.js

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

添加PostCSS插件

在终端/命令提示符下，运行命令：

npm install autoprefixer cssnext precss --save-dev

gulpfile.js配置插件

gulpfile.js配置插件

创建 src/style.css

/* Testing autoprefixer */
 
.autoprefixer {
  display: flex;
}
 
/* Testing cssnext */
 
.cssnext {
  background: color(red alpha(-10%));
}
 
/* Testing precss */
 
.precss {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

工程目录结构

工程目录结构

运行gulp css

运行gulp css

运行结束生成dest/style.css

/* Testing autoprefixer */
.autoprefixer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* Testing cssnext */
.cssnext {
  background: rgba(255, 0, 0, 0.9);
}
/* Testing precss */
.precss {
    background: green
}

3、如何寻找需要的插件

---

• PostCss Github 仓库
• postcss.parts
• 在Twitter上关注@PostCSS
  
  

  Twitter

4、如何创建自己的插件

---

• 创建插件功能介绍

我将创建一个插件，通过以下语法轻松地将字体插入font-family 样式中：

h1 {
    font-family: "Open Sans", fontstack("Arial");
}

运行后

h1 {
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

• 插件实现

创建postcss-myplugin插件

创建文件夹node_modules/postcss-yxpplugin

目录结构

在终端/命令提示符下，运行命令：

mkdir node_modules/postcss-yxpplugin
cd node_modules/postcss-yxpplugin
npm init -y
npm install postcss --save
touch index.js && open index.js

node_modules/postcss-yxpplugin/index.js

var postcss = require('postcss');

module.exports = postcss.plugin('myplugin', function myplugin(options) {
    return function (css) {
        options = options || {};
        // Processing code will be added here
        console.log('我的插件被调用了');
    }
});

gulpfile.js配置postcss-yxpplugin插件

gulpfile.js配置postcss-yxpplugin插件

运行

运行

node_modules/postcss-yxpplugin/index.js 实现插件字体插入font-family 样式功能

var postcss = require('postcss');

var fontstacks_config = {
    'Arial': 'Arial, "Helvetica Neue", Helvetica, sans-serif',
    'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'
}

function toTitleCase(str) {
  return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

module.exports = postcss.plugin('yangxiaoping', function yangxiaoping(options) {

    return function (css) {

        options = options || {};
        // Processing code will be added here
        css.walkRules(function (rule) {
            rule.walkDecls(function (decl, i) {

                /**
                 * decl 提供decl.prop和decl.value2个属性
                 * 以css为例子：font-family: "Open Sans", fontstack("Arial");
                 * decl.prop === "Open Sans"
                 * decl.value === "Open Sans", fontstack("Arial")
                 */
                var value = decl.value;
                if (value.indexOf( 'fontstack(' ) !== -1) {
                    var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g, "");
                    var fontstack = fontstacks_config[fontstack_requested];
                    var first_font = value.substr(0, value.indexOf('fontstack('));
                    var new_value = first_font + fontstack;
                    decl.value = new_value;
                }

            });
        });

    }

});

创建src/style2.css

h1 {
    font-family: "Open Sans", fontstack("Arial");
}

运行

gulp css

运行后生成style2.css

h1 {
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

• 插件发布

1、在www.npmjs.org注册一个账号，这个账号会被添加到npm本地的配置中，用来发布module用。
在终端/命令提示符下，运行命令：

$ npm adduser   
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com

成功之后，npm会把认证信息存储在~/.npmrc中，并且可以通过以下命令查看npm当前使用的用户：

npm whoami 

以上完成之后，我们终于可以发布自己的module了：

cd node_modules/postcss-yxpplugin
npm publish

发布完成

查看自己发布的postcss-yxpplugin插件

查看自己发布的postcss-yxpplugin插件

• 使用postcss-yxpplugin插件

在终端/命令提示符下，运行命令：

cd PostCssDemo
nom install postcss-yxpplugin --save-dev
gulp css

5、参考资料

https://webdesign.tutsplus.com/categories/postcss
https://github.com/postcss/postcss#plugins

6、最后

---

示例代码地址
如果有什么疑问，可以在下面评论或者私信我。
如果您觉得有帮助，请给我点个，谢谢。