PostCSS

PostCSS

什麼是 PostCSS?

PostCSS 是一個使用 JavaScript 轉換 CSS 的工具,它可以做的事情很多,像是(註一

當然還有很多

Preprocessors vs Postprocessors

那麼…PostCSS 和過去常用的 LESSSASSSCSS 有什麼不同呢?先來看看什麼是預處理器(Preprocessors)和後處理器(Postprocessors)。

預處理器是讓開發者撰寫一些類似 CSS 語法的指令,再轉為瀏覽器能懂的 CSS;相較之下,後處理器就是讓開發者依然撰寫 CSS,再經過擴充功能(plugin)的後製處理,將特定功能轉成瀏覽器能懂的指令。過去常用的 LESS、SASS、SCSS 是屬於預處理器,而 PostCSS 是屬於後處理器(註二)。

使用 PostCSS 的好處是

例如,現在主流瀏覽器已(部份)支援 break-,就可以(選擇)拔掉 postcss-page-break

拔掉前,postcss-page-break 產生重複的指令。

postcss-page-break 拔掉前

拔掉後,選擇由瀏覽器自動轉換。

postcss-page-break 拔掉後

使用 PostCSS 的缺點就是必須自己研究和測試,找出符合需求、仍在維護的 plugin,這是比較花時間的。

如何加入 PostCSS?

安裝 PostCSS 與相關套件。

npm install postcss postcss-loader autoprefixer precss --save-dev

在上例中,autoprefixer 用於加上各家瀏覽器的前綴詞,precss 讓開發者可使用類似 SASS 的功能。

在 Webpack 設定檔加入 postcss-loader。

{
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
    },
  ],
},

在 PostCSS 設定檔(postcss.config.js)加入需要用到的套件 precss 和 autoprefixer。小提醒,擴充功能都要列在 PostCSS 設定檔中才能使用噢。

module.exports = {
  plugins: {
    precss: {}, // 使用類似 SASS 的功能,例如:變數
    autoprefixer: {
      // 加入各家瀏覽器的前綴詞
      browsers: [
        // 指定支援的瀏覽器版本
        'Chrome >= 52',
        'FireFox >= 44',
        'Safari >= 7',
        'Explorer >= 11',
        'last 2 Edge versions',
      ],
    },
  },
};

這樣就可以用了!

備註

註一

安裝。

npm install autoprefixer --save-dev

轉換前。

autoprefixer 加入前

轉換後。

autoprefixer 加入後

安裝。

npm install postcss-page-break --save-dev

轉換前。

body {
  break-inside: avoid;
  break-after: page;
}

轉換後。

body {
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  break-after: page;
}

安裝。

npm install postcss-modules --save-dev

轉換前。

.hello-world {
  color: #ddd;
}

轉換後。

._hello-world_1x2in_94 {
  color: #ddd;
}

安裝。

npm install stylelint -g

設定 .stylelintrc

{
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": 2,
    "number-leading-zero": null,
    "unit-whitelist": ["px", "%", "em", "rem", "s", "ms"]
  }
}

CLI

stylelint style/style.css --config './.stylelintrc'

測試結果如下圖,提示 text indent 應為兩個空白。

stylelint

當然也可以當成 PostCSS plugin 來用。

安裝。

npm install lost --save-dev

轉換前。

.hello-world {
  lost-column: 1/3;
}

轉換後。

lost

註二

postcss-each 是屬於預處理的方式,因此不能完全判定 PostCSS 必為後處理器。

註三

只是若仍保留預處理器,由於 LESS、SASS、SCSS 是根據特定語法而撰寫,若有一天想換個預處理器來重構專案,還是會遇到需要為了特定預處理器學習新的指令、整套重寫的痛苦過程。

References


PostCSS css webpack