PostCSS
10 Aug 2018什麼是 PostCSS?
PostCSS 是一個使用 JavaScript 轉換 CSS 的工具,它可以做的事情很多,像是(註一)
- 加入各家瀏覽器的前綴詞(prefix),例如:-webkit-、-moz-。
- 將先進的功能轉為目前主流瀏覽器所能支援的語法。
- 語法檢查和報錯。
- 支援 Grid System。
- 使用類似 SASS 的功能,例如:變數。
當然還有很多…
Preprocessors vs Postprocessors
那麼…PostCSS 和過去常用的 LESS、SASS、SCSS 有什麼不同呢?先來看看什麼是預處理器(Preprocessors)和後處理器(Postprocessors)。
預處理器是讓開發者撰寫一些類似 CSS 語法的指令,再轉為瀏覽器能懂的 CSS;相較之下,後處理器就是讓開發者依然撰寫 CSS,再經過擴充功能(plugin)的後製處理,將特定功能轉成瀏覽器能懂的指令。過去常用的 LESS、SASS、SCSS 是屬於預處理器,而 PostCSS 是屬於後處理器(註二)。
使用 PostCSS 的好處是
- PostCSS 有彈性、好擴充。相較 LESS、SASS、SCSS 這些預先綁了許多可能用不到的功能的預處理器,PostCSS 可以像 LEGO 般只根據需要加入或刪除功能,像是 precss、prefix、mixin 等。並且,未來若主流瀏覽器支援了這些功能,要拔除特定 plugin 是很容易的。
例如,現在主流瀏覽器已(部份)支援 break-
,就可以(選擇)拔掉 postcss-page-break。
拔掉前,postcss-page-break 產生重複的指令。
拔掉後,選擇由瀏覽器自動轉換。
- 可使用新穎語法或加上自己撰寫的功能。例如:客製化的屬性、gap、color-mod 函數。掛一個 plugin 勢必比擴充 SASS 的程式庫方便。
- 速度快。由於 PostCSS 的功能由所掛的擴充而定,體積小,因此轉換的速度幾乎比 SASS 快三倍、比 LESS 快四倍。
- PostCSS 並非用來取代 SASS 這些預處理器的,而是用於結合、有彈性地擴充功能。例如,PostCSS 補足了預處理器的一些功能-結合 Grid System、使用 CSSNext。(註三)
使用 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',
],
},
},
};
這樣就可以用了!
備註
註一
- autoprefixer:加入各家瀏覽器的前綴詞(prefix),例如:-webkit-、-moz-。
安裝。
npm install autoprefixer --save-dev
轉換前。
轉換後。
- 利用 polyfill 將先進的功能轉為目前主流瀏覽器所能支援的語法,PostCSS Preset Env 會根據 cssdb 來提供適當的解法。例如:postcss-page-break 會加入
page-
。
安裝。
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;
}
- postcss-modules:產生 CSS Modules / Scoped CSS,
安裝。
npm install postcss-modules --save-dev
轉換前。
.hello-world {
color: #ddd;
}
轉換後。
._hello-world_1x2in_94 {
color: #ddd;
}
- stylelint:語法檢查和報錯。
安裝。
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 應為兩個空白。
當然也可以當成 PostCSS plugin 來用。
- LostGrid :支援 Grid System。
安裝。
npm install lost --save-dev
轉換前。
.hello-world {
lost-column: 1/3;
}
轉換後。
註二
postcss-each 是屬於預處理的方式,因此不能完全判定 PostCSS 必為後處理器。
註三
只是若仍保留預處理器,由於 LESS、SASS、SCSS 是根據特定語法而撰寫,若有一天想換個預處理器來重構專案,還是會遇到需要為了特定預處理器學習新的指令、整套重寫的痛苦過程。