关于PostCSS的一点小科普

PostCSS起源于2013年9月,发展到现在,已经有很多开发者在工作中使用它。如果你尚未接触过PostCSS,这篇文章正适合你。

PostCSS是一个使用JavaScript插件来转换CSS的工具。

PostCSS本身很小,其只包含CSS解析器,操作CSS节点树的API,资源生成器(译者注1:原文是source map),以及一个节点树字符串化工具。所有的黑魔法都是通过利用插件实现的。

截止目前,PostCSS的生态圈内已经拥有超过100种插件。这些插件可以做太多的事情,比如lint(译者注2:一种用来检测CSS代码的工具),添加vendor prefixes(译者注3:添加浏览器内核前缀,可以使用浏览器的一些独有特性),允许使用最新的CSS特性,在你的CSS里提供统计数据,或者是允许你使用SassLess或是StylusCSS预处理器。

让我们看看以下十种插件

Autoprefixer

根据用户的使用场景来解析CSS和添加vendor prefixes(前文注2)。

PostCSS Focus

一种利用键盘操作为每个:hover添加:focus选择器的PostCSS插件。

PreCSS

一个允许你在代码中使用类似Sass标记的插件。

Stylelint

一种强大的,先进的可以使你在CSS样式中保持一致性,避免错误的CSS linter工具。

PostCSS CSS Variables

一种将用户自定义CSS变量(CSS variables)转化为静态样式的插件。

PostCSS Flexbugs Fixes

一种用于修复flexbug的bug的插件。

PostCSS CSSnext

一种可以让你使用CSS最新特性的插件。它通过将最新的CSS特性转变为现阶段浏览器所兼容的特性,这样你不用再等待浏览器对某一特定新特性的支持。

PostCSS CSS Stats

一种支持cssstats的插件。这个插件将会返回一个cssstatus对象,这样你可以使用它来进行CSS分析。

PostCSS SVGO

优化在PostCSS中内联SVG。

PostCSS Style Guide

一种可以自动生成风格指导的插件。将会在Markdown中生成CSS注释,并在生成的HTML文档中显示。

如果你想编写自己的插件,并希望将其贡献给社区的话,请确保你是先看过guidelines这篇文档还有PostCSS Plugin Boilerplate这篇官方文档。

在你的工作中使用PostCSS

PostCSS是用JavaScript所编写的,这使得我们在GruntGulpWebpack等常用的前端构建工具中使用它变得非常方便。

下面是我们使用Autoprefixer插件的示例。

npm install autoprefixer --save-dev

Gulp
如果你使用Gulp,那么你需要安装gulp-postcss

npm install --save-dev gulp-postcss

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');

    return gulp.src('./src/*.css')
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(gulp.dest('./dest'));
});

Grunt
如果你使用Grunt,那么你需要安装grunt-postcss

npm install grunt-postcss --save-dev

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-postcss');

    grunt.initConfig({
        postcss: {
            options: {
                    map: true,
                processors: [
                    require('autoprefixer')({
                        browsers: ['last 2 versions']
                    })
                ]
            },
            dist: {
                src: 'css/*.css'
            }
        }
    });

    grunt.registerTask('default', ['postcss:dist']);

};

Webpack
如果你使用Webpack,那么你需要安装postcss-loader

npm install postcss-loader --save-dev

var autoprefixer = require('autoprefixer');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [autoprefixer];
    }
}

关于怎么整合PostCSS,你可以从这里PostCSS repo获取到帮助。

最后最后的诚心安利~

在有些时候,在新技术,新工具,新框架发布的时候,去使用并观察其发展趋势无疑是一种明智的行为。现在,PostCSS已经发展到一个相当成熟的阶段,我强烈建议你在你的工作中使用它。因为它现在已经在工程中被广泛的使用,同时在未来一段时间内它不会发生太大的变化。

Share Comments