PostCSS 入門

PostCSS とは

• PostCSS · A tool for transforming CSS with JavaScript
• PostCSS自体は、CSSパーサの機能のみを提供する
• プラグインを利用し、CSSを加工したり、構文チェックを行う

おすすめプラグイン

• Autoprefixer
  最も有名なPostCSSプラグイン。
  指定されたブラウザ対応に必要なベンダープリフィックスの付与を自動的に行うことができる。

• PostCSS Flexbugs Fixes
  Flex Boxの記述方法によっては、ブラウザのバグによりうまく反映されない場合があるため、
  ブラウザのバグを防ぐ記述に変換する

• cssnano
  CSSを圧縮することができる

• stylelint
  CSSの文法チェック用プラグイン。
  stylelintのプラグインを追加することで、文法チェックのルールを追加できる。

とりあえず使ってみる

$ npm init -y
$ npm install --save-dev postcss-cli autoprefixer
$ npx postcss src/**/*.css --use autoprefixer -d src

設定を行う

.postcssrc.js

module.exports = ctx => {
  return {
    plugins: {
      'autoprefixer': {
        // 'env': ,
        // 'cascade': true,
        'cascade': false,
        // 'add': true,
        // 'remove': true,
        'remove': false,
        // 'supports': true,
        // 'flexbox': true,
        // 'grid': false,
        // 'stats':,
        // 'browsers': ,
      }
    }
  }
}

.browserslistrc

last 4 versions

$ npx postcss src/**/*.css -d src

PostCSSは、自動的に.postcssrc.jsを参照するため、CLIで使用するプラグインを指定しなくてよい。

サンプルコード

最後に

実践編はこちら
　→ PostCSS 実践