PostCSS をコマンドラインから使う

目的

postcss-cli を使う実験（PostCSS をコマンドラインから使う）。

• 本ページで使用する CSSファイルを生成します。

準備

ディレクトリ構成

index.html
.postcssrc.js
Makefile
css/
  ├ main.css
  └ main.css.map
src/css
  ├ main.css
  ├ sub.css
  ├ normalize.css
  └ monokai.css
node_modules/

npm パッケージのインストール

$ npm i -D postcss-cli postcss-import autoprefixer cssnano

.postcssrc.js ファイル

module.exports = (ctx) => ({
  parser: false,
  stringfier: false,
  map: ctx.env === 'development' ? { inline: false } : false,
  plugins: {
    'postcss-import': {},
    'postcss-simple-vars': {},
    'autoprefixer': {},
    'cssnano': ctx.env === 'production' ? { preset: 'default' } : false
  },
  autoprefixer: {
    browsers: "last 2 versions"
  }
})

• 本ページでは、ctx.env = 'development' でファイルを出力してあります。

postcss コマンドの実行

./node_modules/.bin/postcss --env production src/css/main.css -o css/main.css

• 出力されたファイルがどうなっているのか？などは、Chrome DevTools で確かめます。

実験後のメモ

• @import ではその場にインポートされる。そのCSSファイルの「後ろに」追加してくれるオプションはなさそう。
• .postcssrc.js 内の ctx については、Context | postcss/postcss-cli を参照。