PostCSS, PostCSS 中文文檔

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 的問題

• postcss-use 允許你在 CSS 里明確地設置 PostCSS 插件，並且只在當前文件執行它們。
• postcss-modules 和 react-css-modules 可以自動以組件為單位隔絕 CSS 選擇器。
• postcss-autoreset 是全局樣式重置的又一個選擇，它更適用於分離的組件。
• postcss-initial 添加了 all: initial 的支持，重置了所有繼承的樣式。
• cq-prolyfill 添加了容器查詢的支持，允許添加響應於父元素寬度的樣式.

提前使用先進的 CSS 特性

• autoprefixer 添加了 vendor 瀏覽器首碼，它使用 Can I Use 上面的數據。
• postcss-preset-env 允許你使用未來的 CSS 特性。

更佳的 CSS 可讀性

• postcss-sorting 給規則的內容以及@規則排序。
• postcss-utilities 囊括了最常用的簡寫方式和書寫幫助。
• short 添加並拓展了大量的縮寫屬性。

圖片和字體

• postcss-assets 可以插入圖片尺寸和內聯文件。
• postcss-sprites 能生成雪碧圖。
• font-magician 生成所有在 CSS 里需要的 @font-face 規則。
• postcss-inline-svg 允許你內聯 SVG 並定製它的樣式。
• postcss-write-svg 允許你在 CSS 里寫簡單的 SVG。

提示器（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。

• sugarss 是一個以縮進為基礎的語法，類似於 Sass 和 Stylus。
• postcss-syntax 通過文件擴展名自動切換語法。
• postcss-html 解析類 HTML 文件里<style>標簽中的樣式。
• postcss-markdown 解析 Markdown 文件里代碼塊中的樣式。
• postcss-jsx 解析源文件里模板或對象字面量中的CSS。
• postcss-styled 解析源文件里模板字面量中的CSS。
• postcss-scss 允許你使用 SCSS (但並沒有將 SCSS 編譯到 CSS)。
• postcss-sass 允許你使用 Sass (但並沒有將 Sass 編譯到 CSS)。
• postcss-less 允許你使用 Less (但並沒有將 LESS 編譯到 CSS)。
• postcss-less-engine 允許你使用 Less (並且使用真正的 Less.js 把 LESS 編譯到 CSS)。
• postcss-js 允許你在 JS 里編寫樣式，或者轉換成 React 的內聯樣式／Radium／JSS。
• postcss-safe-parser 查找並修複 CSS 語法錯誤。
• midas 將 CSS 字元串轉化成高亮的 HTML。

文章

• 一些你對 PostCSS 可能產生的誤解
• PostCSS 究竟是什麼，是做什麼的
• PostCSS 指南

你可以在 awesome-postcss 列表裡找到更多優秀的文章和視頻。

書籍

• Alex Libby, Packt 的 網頁設計之精通 PostCSS (2016年6月)

使用方法

你可以通過簡單的兩步便開始使用 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'] }

運行器

• Grunt: grunt-postcss
• HTML: posthtml-postcss
• Stylus: poststylus
• Rollup: rollup-plugin-postcss
• Brunch: postcss-brunch
• Broccoli: broccoli-postcss
• Meteor: postcss
• ENB: enb-postcss
• Taskr: taskr-postcss
• Start: start-postcss
• Connect/Express: postcss-middleware

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

• language-postcss 添加了 PostCSS 和 SugarSS 代碼高亮。
• source-preview-postcss 在一個獨立視窗里實時預覽生成的 CSS。

Sublime Text

• Syntax-highlighting-for-PostCSS 添加了 PostCSS 代碼高亮。

Vim

• postcss.vim 添加了 PostCSS 代碼高亮。

WebStorm

自 WebStorm 2016.3 開始，提供了 內建的 PostCSS 支持。