博客

PostCSS,PostCSS中文文档

  • Post author:
  • Post category:其他


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



PostCSS

中文文档：

PostCSS 中文文档


英文文档：

PostCSS 英文文档


Star：16.9k



微信交流群：

前端攻城狮（点击加入）

PostCSS 在工业界被广泛地应用，其中不乏很多有名的行业领导者，如：维基百科，Twitter，阿里巴巴，JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个[抽象语法树]的方式）。在这之后，这个 API 便可被许多[插件]利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。



插件

截止到目前，PostCSS 有 200 多个插件。你可以在

插件列表

或

搜索目录

找到它们。

下方的列表是我们最喜欢的插件 – 它们很好地演示了我们可以用 PostCSS 做些什么。

如果你有任何新的想法，

开发 PostCSS 插件

非常简单易上手。



解决全局 CSS 的问题



提前使用先进的 CSS 特性



更佳的 CSS 可读性



图片和字体



提示器（Linters）



  • stylelint


    是一个模块化的样式提示器。


  • stylefmt


    是一个能根据

    stylelint

    规则自动优化 CSS 格式的工具。


  • doiuse


    提示 CSS 的浏览器支持性，使用的数据来自于 Can I Use。


  • colorguard


    帮助你保持一个始终如一的调色板。



其它



  • postcss-rtl


    在单个 CSS 文件里组合了两个方向（左到右，右到左）的样式。


  • cssnano


    是一个模块化的 CSS 压缩器。


  • lost


    是一个功能强大的

    calc()

    栅格系统。


  • rtlcss


    镜像翻转 CSS 样式，适用于 right-to-left 的应用场景。



语法

PostCSS 可以转化样式到任意语法，不仅仅是 CSS。

如果还没有支持你最喜欢的语法，你可以编写一个解释器以及（或者）一个 stringifier 来拓展 PostCSS。



文章

你可以在

awesome-postcss

列表里找到更多优秀的文章和视频。



书籍



使用方法

你可以通过简单的两步便开始使用 PostCSS：

  1. 在你的构建工具中查找并添加 PostCSS 拓展。

  2. 选择插件

    并将它们添加到你的 PostCSS 处理队列中。



CSS-in-JS

同时使用 PostCSS 与 CSS-in-JS 的最好方式是


astroturf


，将它的 loader 添加到

webpack.config.js

中： 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'postcss-loader'],
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'astroturf/loader'],
      }
    ]
  }
}

然后创建

postcss.config.js

： 

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}



Parcel


Parcel

有内建的 PostCSS 支持，并已经使用 Autoprefixer 和 cssnano。如果你想更换插件，请在项目根目录中创建

postcss.config.js

： 

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

Parcel 甚至会自动地帮你安装这些插件。

请注意

第 1 版中存在的几个问题

，第 2 版通过

issue #2157

解决了这些问题。



Webpack

在

webpack.config.js

里使用


postcss-loader


: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

然后创建

postcss.config.js

: 

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}



Gulp

使用


gulp-postcss


和


gulp-sourcemaps


. 

gulp.task('css', () => {
  const postcss    = require('gulp-postcss')
  const sourcemaps = require('gulp-sourcemaps')
  return gulp.src('src/**/*.css')
    .pipe( sourcemaps.init() )
    .pipe( postcss([ require('postcss-nested'), require('autoprefixer') ]) )
    .pipe( sourcemaps.write('.') )
    .pipe( gulp.dest('build/') )
})



npm run / CLI

如果需要在你的命令行界面或 npm 脚本里使用 PostCSS，你可以使用


postcss-cli


。 

postcss --use autoprefixer -c options.json -o main.css css/*.css



浏览器

如果你想编译浏览器里的 CSS 字符串（例如像 CodePen 一样的在线编辑器），

只需使用

Browserify

或

webpack

。它们会把 PostCSS 和插件文件打包进一个独立文件。

如果想要在 React 内联样式／JSS／Radium／其它

CSS-in-JS

里使用 PostCSS，

你可以用


postcss-js


然后转换样式对象。 

var postcss  = require('postcss-js')
var prefixer = postcss.sync([ require('autoprefixer') ])
prefixer({ display: 'flex' }) //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }



运行器



JS API

对于其它的应用环境，你可以使用 JS API： 

const postcssNested = require('postcss-nested')
const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const fs = require('fs')
fs.readFile('src/app.css', (err, css) => {
  postcss([postcssNested, autoprefixer])
    .process(css, { from: 'src/app.css', to: 'dest/app.css' })
    .then(result => {
      fs.writeFile('dest/app.css', result.css)
      if ( result.map ) fs.writeFile('dest/app.css.map', result.map)
    })
})

阅读

PostCSS API 文档

获取更多有关 JS API 的信息.

所有的 PostCSS 运行器应当通过

PostCSS 运行器指南

。



配置选项

绝大多数 PostCSS 运行器接受两个参数：

  • 一个包含所需插件的数组
  • 一个配置选项的对象

常见的选项：


  • syntax

    : 一个提供了语法解释器和 stringifier 的对象。

  • parser

    : 一个特殊的语法解释器（例如

    SCSS

    ）。

  • stringifier

    : 一个特殊的语法 output 生成器（例如

    Midas

    ）。

  • map

    :

    source map 选项

    .

  • from

    : input 文件名称（大多数运行器自动设置了这个）。

  • to

    : output 文件名称（大多数运行器自动设置了这个）。



Atom



Sublime Text



Vim



WebStorm

自 WebStorm 2016.3 开始，

提供了

内建的 PostCSS 支持。


版权声明：本文为shao402248950原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。