PostCSS

PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン

PostCSSを初めて聞いたのはちょうど1年前ぐらいの勉強会で。その時はSassも勉強始めたばかりというのもあり、こんなのあるのか程度で終わってました。

でも、最近PostCSSを使う機会があったり、Sass以外の何か触ってみたいなというのがあったり、ちょこちょこ記事も増えてきてるように感じてるので、いろいろ調べてみました。

使ってみた感想は、PostCSSはPostCSSでいいところありますが、Sassから乗り換えるべきとかそういうのはないです。今はSass使ってる人多いですし、仕事とは別で個人的に触ってみるぐらいでいいかなと思います。

PostCSS

目次
  1. PostCSSとSassの違い
  2. gulpでPostCSSを使ってみる
  3. プラグインを使ってみる
  4. 便利プラグイン
  5. 誰得プラグイン

PostCSSとSassの違い

SassはネストとかMixinなどいろんな便利機能が標準で含まれていますが、PostCSSはそういった機能をプラグインで自分で機能拡張してくようになっています。

また、SassやStylusは独自の書き方がありますが、PostCSSはプラグインによっては将来取り入れられるCSSの標準構文を使うことができます（いわゆるFuture CSS syntax）

あとは、コンパイル速度が速いとかも言われてます。

gulpでPostCSSを使ってみる

gulp使える前提で早速PostCSSを使ってみます。

いつもの流れ

// プロジェクトフォルダ作成
$ mkdir postcsstest
// 移動
$ cd postcsstest
// package.jsonを生成
$ npm init -y
// gulpインストール
$ npm i gulp -D

PostCSSのインストール

$ npm i gulp-postcss -D

ディレクトリ構成

今回のディレクトリ構成はプロジェクト直下に「src」と「dist」ディレクトリを作ってます。src以下にPostCSSを書いてdistへコンパイルします。この辺りは好きにやってください。

./package.json
./node_modules
./src/style.css
./dist
./gulpfile.js

また、gulpfile.jsを追加しておいてください。

gulpfile.js

まずはこんな感じで書いてみます。

var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task("css", function() {
  return gulp.src('./src/style.css')
    .pipe(postcss([]))
    .pipe(gulp.dest('./dist'))
});

style.css

srcディレクトリ以下にstyle.cssを作って以下を書いてみます。

:root {
  --color: red;
}
h1 {
  color: var(--color);
}

これはW3CのCSS Custom Properties for Cascading Variables Moduleに対応した変数の書き方です。

ちなみにこの書き方はPostCSSでコンパイルしなくても、最近のブラウザでは普通に使えます。

style.cssに記述したらタスクを実行します。

gulp css

すると書き出しはこうなります。

:root {
  --color: red;
}
h1 {
  color: var(--color);
}

何も変わってないですね。

そりゃ当然wプラグイン入れてないからww

先ほど書いたようにPostCSSだけでは何もやってくれないので、自分でプラグインを入れていきます。

プラグインを使ってみる

先ほどのコードをコンパイルするために「postcss-custom-properties」をインストールします。

npm i postcss-custom-properties -D

インストールが完了したらgulpfile.jsでプラグインが使えるように修正します。

var gulp = require('gulp');
var postcss = require('gulp-postcss');
gulp.task("css", function() {
  return gulp.src('./src/style.css')
    .pipe(postcss([
      require('postcss-custom-properties') // ここ追加
    ]))
    .pipe(gulp.dest('./dist'))
});

再度タスクを実行します。

gulp css

するとコンパイルされました！

h1 {
  color: red;
}

こんな感じでプラグインを自分で追加して使っていく感じです。

追加はコンマ区切りで繋げていきます。見やすいように変数でまとめておいて読み込む方法もあります。

gulp.task("css", function() {
  return gulp.src('./src/style.css')
    .pipe(postcss([
      require('postcss-custom-properties'),
      require('プラグイン名'),  // 追加
      require('プラグイン名')  // 追加
    ]))
    .pipe(gulp.dest('./dist'))
});

便利プラグイン

ざーっと便利そうなプラグインをピックアップしてみました。

postcss-import

importしてくれます。postcss-importは変数とかMixin的なプラグインより前に読み込まないと、うまくコンパイルしてくれません。一番最初に読み込むようにしておけば大丈夫かと思います。

@import "layout/header.css";

postcss-apply

簡易Mixin的なやつ

これが

:root {
    --theme-width: {
      width: 96%;
      max-width: 700px;
    }
}
div {
  @apply --theme-width;
}

こう

div {
  width: 96%;
  max-width: 700px;
}

postcss-custom-properties

コンパイル例でも使った変数が使えるプラグイン

変数系は他にも「postcss-simple-vars」などがあります。これは「$変数名」と書くのでSassと同じように書くことができます。ただ個人的にはSassに近づけたいならSass使いなよと思います。

postcss-nesting

これはネストが使えるようになるプラグインです。これも仕様に近い形でネストを使うことができます。

CSS Nesting Module Level 3

これが

.list {
  width: 100%;
  &__item {
    font-size: 24px;
  }
  & a {
    color: #333;
    &:hover {
      color: blue;
    }
  }
}

こう

.list {
  width: 100%;
}
.list__item {
  font-size: 24px;
}
.list a {
  color: #333;
}
.list a:hover {
  color: blue;
}

ネストに関しても&が不要なSassの書き方ができる「postcss-nested」というものもあります。

postcss-custom-media

メディアクエリの指定が簡単になる。

autoprefixer

自動でプレフィックスつけてくれるやつ

CSSWring

CSSの圧縮をしてくれます。

PostCSS Flexbugs Fixes

flexプロパティのバグを直してくれます。

PostCSS Media Minmax

メディアクエリをmin/maxで指定するのではなく、記号（<=）で指定できる

postcss-selector-matches

:matches()セレクタが使えるようになります。

postcss-will-change

will-changeプロパティのハックをしてくれる。will-change初めて聞いた。

postcss-utilities

SassでいうMixin集的なやつ。Borbonとかそういうのに似てます。

PostCSS-Neat

Neatのグリッドシステムが使えるようになります。

PreCSS

いろいろオールインワンなやつ

あげたらキリがないですが、他にもいろいろなプラグインがあります。

誰得プラグイン

PostCSSのプラグインは誰でも自由に作ることができるため、中にはちょっと変わったプラグインもあります。誰かの得にはなるのかもしれない。

postcss-instagram

インスタグラムのフィルター名で画像に加工ができるもの。今はないフィルター名もあるような。

postcss-triangle

三角形をつくってくれるプラグイン

postcss-speech-bubble

吹き出しが簡単に作れるプラグイン

PostCSS Currency

通貨の単位を記号に変えてくれるプラグイン

ちなみに日本円

/* before */
.foo:after {
    content: 'JPY';
}
/* after */
.foo:after {
    content: '¥';
}

postcss-german-stylesheets

ドイツ語でCSSが書けるようになるプラグイン

.foo {
    höhe: 300px;
    außenabstand-unten: 10px;
    schriftgröße: 20px !wichtig;
    hintergrundfarbe: schwarz;
    farbe: weiß;
}

他にはイタリア語やロシア語、中国語などもあります。

日本語も作られていました。

postcss-japanese-stylesheets

postcss-lolcat-stylesheets

Lolcatは、ネコの画像に正しくない英語でキャプションを付けたもののこと。英語圏の掲示板で使われるネットスラングのようなものです。おそらく日本でいう「www」とかそんな感じです。

それで書けるようになるプラグインです（笑）

postcss-pointer

Tweetから生まれたプラグイン。「pointer: cursor;」でも「cursor: pointer;」で書き出してくれます。

GitHubに元ツイートのリンク貼られてますが、あまり英語わからないです。間違えやすいから一緒にしてってことかな…？

こんな感じで実用的ではないけど、面白いプラグインも公開されています。

さいごに

プラグイン一覧はここにまとめられています。ただ載ってないのもあるので、自分でググる必要もあります。

PostCSS Plugins

今すぐPostCSSを取り入れるべきとは言わないですが、ちょっとやってみると面白いのでぜひお試しください！

（にしても、なんでPostCSSのロゴはこんなオカルトっぽいんだ…）

参考サイト

Step by Stepで始めるPostCSS

Qiita

噂のPostCSSを検証してみた

ドワンゴクリエイターズブログ

PostCSSとcssnextで最新CSS仕様を先取り！

HTML5 Experts.jp