PostCssで勧告ちょい前くらいまでのCSSをビルドする

naoto

2017.3.6

最近はGolangの勉強中心のみやっててちょっと疲れたので閑話休題っす。

要約3行

PostCss
ボイラープレート
書く

やったこと

前に「cssのclearfixハックの代わりとなる記法がChromeに実装される」っていうので注目を集めたこともあって、
ちょっとcssビルド周りの設定を見直しがてら、ここで一旦jsやhtmlじゃなくて最新仕様のcssだけpostcssのcliでビルドする、という主旨でやってみます。
使うもの、postCSSのcliツール。

ここ1年以上、postCSS使用の際はビルドツールの雄webpackからpostcssを呼んでいましたが、多分そっちはやりすぎっていう向きも多いかと思うので、今回はcliでのビルドの紹介に留めます。
(というか単体でのビルドやったことなかったので。)

PostCss

概要

PostCSSは各種css変換プラグインを通すためのAPIを提供するツールです。好きなコンパイラ設定を個々に導入できるイメージです。
cssフレームワークのBootstrapはsassからpostcssになったりと、そこそこ使われている場面があります。

PostCSSプラグインには、もちろんSASS記法を高速コンパイルするものもあります。
ですが、SASSが事実上のデファクト(?)とはいえ、独自記法に関しては今回の趣旨と違うため導入手順は割愛します。

プラグインの追加

特にcliで呼ぶ場合、コマンドで指定してもいいですが、npmで各プラグインをインストール後、
こういう設定ファイルを書くと便利です。

{
  "use": [
    "postcss-import",
    "postcss-cssnext",
    "postcss-flexbugs-fixes",
    "postcss-flow-root",
    "postcss-grid-kiss"
  ],
  "postcss-flow-root" : {
    "fallback" : "clearfix"
  },
  "input": "src/index.css",
  "output": "build/bundle.css"
}

コンパイル

postcss -c .postcssrc.json

代表的なPostCssプラグイン

cssnext(postcss-cssnext)

cssnextは幾つかのPostCSSプラグインがあらかじめ同梱されてるPostCSSプラグインです。
基本的には策定中のCSS仕様を使えるようにするプラグインであり、CSS版Babelみたいなものです。

今回の趣旨としては大枠としてこれだけを入れとけばOKです。

同梱されているPostCSSプラグインはこんな感じ。
個別に無効化することも可能です。

Bootstrapと並ぶcssフレームワークのFoundationもこれを使ってるぽいです。

できるようになることは本家やCSSの仕様見てください。

all : initial; のバックポート実装が使えるようになる。
css variables が全ブラウザで使えるようになり、カラーパレットやmargin設定の管理がより強固にできるようになる。
custom media queriesで各デバイス用のメディアクエリを論理立てて一元管理できるようになる。
同梱されているautoprefixerプラグインでベンダープリフィックス勝手につけてくれる。

と、まあそれなりに利点があります。

あとはColor FunctionなどSASSとかの文化から策定に行ったっぽい奴もありますね。

autoprefixer

おそらく世界で一番使われてるPostCSSプラグインです。前述のcssnextの中にも同梱されています。
moz-* とか webkit-* とかのベンダープリフィックスを自動で付与します。
下記のような感じですね。

.cannot-selectble {
    user-select: none;
}

.cannot-selectble {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

ちょい足し

cssnextに加えて、魔改造オレオレCSS化しないよう気をつけながらテスト的にPostCSSプラグインをいくつか追加してみます。

postcss-flexbugs-fixes

ブラウザごとに起こるflexboxの挙動の違いをある程度吸収します。

postcss-flow-root

幾つかのブラウザ実装が始まったW3Cのdisplay： flow-rootを入れ込みます。
しばらくはオプション指定でclearfixとかいうあのハックまがいの実装を吐いてもらいますが、これであの実装とは事実上別れを告げます。
こういうとこにはflexboxやGrid使いたいのですが。
しばらくは fallback: "clearfix"の設定が必要そう。