PostCSS とは
- CSS をコード変換するための JavaScript ベースのツール
- プラグインを組み合わせることで様々な変換をすることができる
- Autoprefixer, Stylelint, cssnano なども PostCSS のエコシステム上で開発され動作する
要するに JavaScript でプラグインを書くことができ、Autoprefixer や cssnano などのプラグインの組み合わせで CSS をいい感じに変換した CSS として出力してくれるやつ。
PostCSS のアーキテクチャ
https://postcss.org/docs/postcss-architecture
- is NOT a style preprocessor like Sass or Less.
- is a tool for CSS syntax transformations
- is a big player in CSS ecosystem
- A Large amount of lovely tools like Autoprefixer, Stylelint, CSSnano were built on PostCSS ecosystem.
Split it into lexical analysis/parsing steps (source string → tokens → AST)
Tokenizer
字句解析。ソースコードの文字列をトークンという単位に切り分ける。
Parser
構文解析。トークンを解析し抽象構文木(AST - Abstract Syntax Tree)に変換する。
- https://github.com/postcss/postcss/blob/main/lib/parse.js
- https://github.com/postcss/postcss/blob/main/lib/parser.js
Processor
設定されているプラグインを実行し AST を更に変換する
Stringifier
Processor で出力された AST を純粋なCSS文字列に変換する。
webpack で PostCSS を利用するには、webpack-contrib/postcss-loader を利用すればよい。
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
// プラグインを列挙
],
],
},
},
},
],
},
],
},
};
プラグイン設定などは postcss.config.js に切り出すこともできる。
ちなみに webpack 使うときによく使う mini-css-extract-plugin は cssnano は使ってないようだった。コードみたけどよくわからなかったけど。。
https://npmtrends.com/cssnano-vs-mini-css-extract-plugin-vs-optimize-css-assets-webpack-plugin