每日下載超1000萬次，這個前端工具太有用了！

全文約 5000 字，預計閱讀需要 15 分鐘

今天來分享一個前端必備的工具，其每天在 npm 上的下載量高達 1000 萬次，幾乎每個前端計畫都在用，它就是 PostCSS 。這款工具已經成為前端開發領域中不可或缺的一部份，之所以如此受歡迎，不僅是因為它能夠幫助開發者自動化處理 CSS 中的相容性問題，更是因為它提供了一個強大的外掛程式生態系。這些外掛程式可以讓開發者輕松實作各種高級的 CSS 功能，如自動添加瀏覽器字首、使用最新的 CSS 語法特性，以及進行程式碼最佳化和壓縮等。本文就來揭開這款熱門前端工具的神秘面紗，探索其背後的強大功能和魅力所在。

PostCSS 是什麽？

PostCSS是一種透過JavaScript外掛程式來轉換CSS的工具。它本身並不做任何事情。它將 CSS 程式碼轉換為抽象語法樹（AST），並提供一個API，以便使用JavaScript外掛程式分析和修改它。一旦所有外掛程式都完成了工作，PostCSS會重新格式化所有內容並將其輸出為CSS檔的字串。

PostCSS 的特點如下：

那 PostCSS 和 Less、Sass 這些 CSS 預處理器有什麽區別呢？

了解了 PostCSS 的基本概念，下面就來看看 PostCSS 是如何使用的！

PostCSS 怎麽用？

在前端計畫中，我們提供透過構建工具或者命令列來使用 PostCSS。下面分別來看看這兩種方式。

命令列

透過命令列使用 PostCSS 的步驟如下：

1. 安裝PostCSS和PostCSS CLI ：需要在計畫中安裝PostCSS和PostCSS的命令列介面（CLI）。可以透過npm來安裝，命令如下：

npminstall postcss postcss-cli --save-dev


2. 安裝外掛程式 ：根據需求，安裝相應的PostCSS外掛程式。例如，如果想自動添加瀏覽器字首，可以安裝 autoprefixer 外掛程式。安裝命令如下：

npminstall autoprefixer --save-dev


3. 執行 PostCSS ：在命令列中，使用 npx 命令來執行PostCSS，並指定要使用的外掛程式和目的檔。例如，以下命令將使用 autoprefixer 外掛程式對 origin.css 檔中的CSS樣式添加瀏覽器字首，並將結果輸出到 target.css 檔中：

npx postcss --use autoprefixer -o target.css origin.css


這裏， --use autoprefixer 指定了要使用的外掛程式， -o target.css 指定了輸出檔的名稱， origin.css 是要處理的原始檔。

可以看到，透過命令列使用 PostCSS 是很麻煩的，每個外掛程式都需要執行單獨的命令。在現代前端計畫中，我們基本都會使用構建工具（例如 Webpack、Vite）來構建計畫，下面就來看看如何使用構建工具便捷的使用 PostCSS。

構建工具

下面分別來看看如何透過 Webpack 和 Vite 來使用 PostCSS。

Webpack

1. 安裝依賴 ：在計畫中安裝 postcss-loader 和 postcss。postcss-loader是Webpack的載入器，用於處理PostCSS，而postcss是核心庫。可以透過以下 npm 或 yarn 命令來安裝：

# 使用 npm 安裝
npminstall postcss postcss-loader --save-dev
# 使用 yarn 安裝
yarnadd postcss postcss-loader --dev


2. 配置Webpack ：接下來，在Webpack的配置檔（通常是 webpack.config.js ）中添加一個新的規則，以便Webpack能夠辨識和處理CSS檔，並使用 postcss-loader 。這個規則應該被添加到 module.rules 陣列中：

module.exports ={
// ... 其他Webpack配置 ...
module:{
rules:[
// ... 其他規則 ...
{
test:/\.css$/,// 匹配CSS檔
use:[
' style-loader',// 將JS字串生成 style節點
'css-loader',// 將CSS轉化成CommonJS
'postcss-loader'// 使用PostCSS處理CSS
],
},
],
},
};


註意：在使用 postcss 之前，需要確保已經安裝了 style-loader 和 css-loader，因為 postcss-loader 是用於處理 CSS 檔並套用 PostCSS 外掛程式的 Webpack 載入器。然而，postcss-loader 本身並不負責將 CSS 插入到 DOM 中或將 CSS 轉換為 JavaScript 模組。這是 style-loader 和 css-loader 的職責。

3. 安裝並配置PostCSS外掛程式 ：PostCSS的功能是透過外掛程式提供的，可以根據需要安裝不同的外掛程式。例如， autoprefixer 是一個常用的外掛程式，用於自動添加瀏覽器字首。安裝外掛程式的命令如下：

npminstall autoprefixer --save-dev


然後，在計畫的根目錄下建立一個 postcss.config.js 檔，用於配置 PostCSS 外掛程式：

module.exports ={
plugins:[
// 使用 autoprefixer 外掛程式添加瀏覽器字首
require('autoprefixer'),
// 使用 cssnano 外掛程式進行 CSS 壓縮和最佳化
require('cssnano')({
preset:'default',// 使用 cssnano 的預設預設
}),
],
};


4. 執行Webpack ：當執行Webpack時，它會根據配置檔中的規則處理CSS檔。postcss-loader 將自動套用於匹配到的 CSS 檔，並使用在 postcss.config.js 中配置的外掛程式來處理這些檔。

Vite

Vite 本身已經整合了 PostCSS，因此無需額外安裝 PostCSS。Vite 在處理 CSS 檔時會自動使用 PostCSS，並且可以直接在 vite.config.js 檔中配置 PostCSS 外掛程式。

在 vite.config.js 檔中，可以配置 css.postcss 選項來指定要使用的 PostCSS 外掛程式。例如：

// vite.config.js
import{ defineConfig }from'vite'
import autoprefixer from'autoprefixer'
exportdefaultdefineConfig({
css:{
postcss:{
plugins:[
autoprefixer(),
// 其他外掛程式...
],
},
},
// 其他配置...
})


PostCSS 常用外掛程式

下面來看一些常用的 PostCSS 外掛程式。

PostCSS 全部外掛程式： https://github.com/postcss/postcss/blob/main/docs/plugins.md

postcss-import

postcss-import 用於簡化 CSS 檔的匯入過程。透過引入該外掛程式，可以使用類似於Sass或Less的 @import 語法來匯入外部 CSS 檔，同時也支持匯入Node.js模組。

@import'./components/comp1.css';
@import'./components/comp2.css';


要使用 postcss-import 外掛程式，首先需要透過npm或yarn將其安裝到計畫中。然後，PostCSS配置檔中（通常是 postcss.config.js ），將 postcss-import 添加到 plugins 列表中。這樣，當在 CSS 檔中使用 @import 規則時，PostCSS 就會自動使用 postcss-import 外掛程式來處理這些匯入。

那你可能要問了，CSS 中本來不就有 @import 功能嗎，為什麽還要使用 postcss-import 呢？

這是因為，原生CSS的 import 規則可能會阻止樣式表同時下載，這會影響載入速度和效能。因為瀏覽器必須等待每個匯入的檔載入完成，而無法一次性載入所有CSS檔。這可能導致頁面渲染延遲，影響使用者體驗。而 postcss-import 外掛程式則試圖解決這個問題。它遵循CSS @import 規範，可以將樣式表分割成多個部份，然後再重新組合它們，從而減少HTTP請求次數，提高頁面載入速度。此外，它還可以引入第三方的樣式表，或者使用bower_components或npm_modules資料夾中的樣式表，使得CSS檔的管理和組織更為靈活和高效。

autoprefixer

Autoprefixer 用於自動管理瀏覽器字首。它可以解析CSS檔並且根據 Can I Use 網站的數據來決定哪些字首是需要的，然後自動添加這些字首到 CSS 內容裏。這樣，開發者就無需手動為CSS內容添加各種瀏覽器字首，簡化了開發過程。

註意：不同瀏覽器對CSS內容的支持程度可能不同。瀏覽器廠商為了實作一些新的CSS特性，可能會在實作前加上自己的字首，以示區別。

要使用 Autoprefixer，首先需要透過透過 npm 或 yarn 在計畫中安裝它。安裝完成後，可以在PostCSS的配置檔中引入Autoprefixer，並將其添加到外掛程式列表中。

在配置Autoprefixer時，可以透過設定 browsers 參數來指定需要支持的瀏覽器版本。例如，如果計畫需要支持最新的兩個瀏覽器版本，可以將 browsers 參數設定為['last 2 versions']。

module.exports ={
plugins:[
require('autoprefixer')({
browsers:[
'> 1%',// 支持全球使用率超過1%的瀏覽器
'last 2 versions',// 支持每種瀏覽器的最後兩個版本
'not ie < 9',// 不支持IE8及以下版本
'Firefox ESR'// 支持Firefox的Extended Support Release（ESR）版本
]
})
]
};


在這個例子中，autoprefixer 外掛程式被添加到了 plugins 陣列中。外掛程式的配置物件被傳遞給了 require('autoprefixer') 函式。在配置物件中， browsers 內容定義了Autoprefixer 應該支持哪些瀏覽器。

browsers 內容可以是一個字串或字串陣列，表示瀏覽器範圍和版本。在這個例子中，它被設定為一個陣列，包含了四個不同的瀏覽器範圍：

此外，Autoprefixer 還使用 Browserslist 庫來對瀏覽器的版本進行精確設定，這使得配置更加靈活和強大。可以在 package.json 檔中使用 「browserslist」 配置 Browserslist：

"browserslist":[
"defaults"
]


"defaults" 表示預設的瀏覽器支持範圍，這個預設範圍會隨著時間的推移和瀏覽器使用率的變化而更新。預設範圍即：

上面的配置就等同於：

"browserslist":[
"> 0.5%",
"last 2 versions",
"not dead"
]


對於以下 CSS 程式碼：

label{
user-select: none;
}
::selection{
color:white;
background:blue;
}
::placeholder{
color:gray;
}


基於上面的 browserslist 設定，使用 Autoprefixer 外掛程式之後，轉換結果如下：

label{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::-moz-selection{
color:white;
background:blue;
}
::selection{
color:white;
background:blue;
}
::-moz-placeholder{
color:gray;
}
:-ms-input-placeholder{
color:gray;
}
::placeholder{
color:gray;
}


postcss-preset-env

postcss-preset-env 可以將一些現代的CSS特性，轉成大多數瀏覽器認識的CSS，並且會根據目標瀏覽器或者執行時環境添加所需的polyfill，添加私有字首等配置。該外掛程式預設整合 Autoprefixer 外掛程式，並且 browsers 選項將自動傳遞給它。

postcss-preset-env 有一個 stage 配置項，用於指定需要對哪個階段的CSS語法進行相容處理的。

module.exports ={
plugins:[
require('postcss-preset-env')({stage:2})
],
}


這個配置項有五個可選項，分別是：

stylelint

stylelint 用於檢測 CSS 程式碼品質和一致性的工具，可以幫助開發者避免語法錯誤、不符合規範的樣式聲明以及其他潛在問題，從而確保程式碼品質和風格統一。

可以按照以下步驟使用 stylelint 外掛程式：

1. 安裝 stylelint：

npminstall stylelint --save-dev


2. 建立配置檔 ：在計畫根目錄中建立 stylelint 配置檔，通常命名為 . stylelintrc 。在這個檔中，可以定義 stylelint 的規則和配置選項。

註意：預設情況下不啟用任何規則，也沒有預設值，必須顯式配置每個規則才能將其開啟。

{
"extends":" stylelint-config-recommended",
"rules":{
"color-no-invalid-hex":true,
"font-family-no-missing-generic-family-keyword":true,
"declaration-no-important":true
}
}


這裏使用了 stylelint-config-recommended 作為預設規則集，並添加了一些自訂規則。

3. 配置 PostCSS ：在 PostCSS 配置檔中添加 stylelint 外掛程式，並傳遞 stylelint 的配置物件。

module.exports ={
plugins:[
require(' stylelint')({
configFile:'. stylelintrc',// 指向 stylelint 配置檔
}),
],
};


如果沒有提供 configFile 選項， stylelint 將使用預設的尋找演算法來尋找配置。

4. 執行 PostCSS ：現在，當執行 PostCSS 時， stylelint 外掛程式將自動檢測 CSS 檔並報告任何發現的問題。如果透過命令列執行：

npx postcss your-css-file.css -o output.css


如果使用的是構建工具（如 Webpack、Vite 等），確保在構建過程中呼叫 PostCSS，這樣 stylelint 就會自動執行。

5. 處理報告 ： stylelint 會在控制台輸出報告，顯示任何發現的問題，包括問題的型別、位置以及可能的解決方案。可以根據這些報告來修復 CSS 程式碼。

Cssnano

Cssnano 外掛程式用於最佳化和壓縮 CSS 程式碼的工具。Cssnano 透過移除註釋、空白、重復規則、過時的瀏覽器字首以及執行其他最佳化來減少 CSS 檔的大小，從而確保在開發環境中下載量盡可能的小。

可以按照以下步驟使用 Cssnano 外掛程式：

1. 安裝 Cssnano

npminstall cssnano --save-dev


2. 配置 PostCSS ：在 PostCSS 配置檔中添加 Cssnano 外掛程式。

module.exports ={
plugins:[
require('cssnano')({
preset:'default',// 使用預設的最佳化預設
}),
],
};


3. 執行 PostCSS ：現在，當執行 PostCSS 時，Cssnano 外掛程式將自動最佳化和壓縮 CSS 程式碼。

4. 處理輸出 ：Cssnano 會生成一個最佳化後的 CSS 檔，該檔將具有更小的檔大小，並且仍然與原始檔保持功能上的等價。可以將這個壓縮後的檔用於生產環境，以減小載入時間並提高效能。

小結

PostCSS 是一個功能強大的工具，它為 CSS 提供了轉換和最佳化能力，可以在 CSS 程式碼被編寫出來後，對其進行各種有用的轉換。PostCSS 的核心優勢在於其外掛程式系統，這個系統允許開發者根據需要選擇和組合各種外掛程式，以擴充套件 PostCSS 的功能。

使用 PostCSS 的過程相對簡單，只需要將它與構建工具整合，並在配置檔中指定所需的外掛程式即可。設定完成之後，PostCSS 將在構建過程中自動處理 CSS 程式碼，使其更加高效、相容和可維護。

往期推薦