logokimromi/Notes

PostCSS とは

https://postcss.org/

  • 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.

image

Split it into lexical analysis/parsing steps (source string → tokens → AST)

Tokenizer

字句解析。ソースコードの文字列をトークンという単位に切り分ける。

Parser

構文解析。トークンを解析し抽象構文木(AST - Abstract Syntax Tree)に変換する。

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

image

Based on https://github.com/kimromi/notes/issues/47