sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

PostCSSさわってみた

セカイエブログをご覧のみなさまこんにちは。

Webフロントエンド担当の富坂です。

今日はセカイエアドベントカレンダー1日目 ということで PostCSSについて少し書いていきます。

最近ではもう当たり前のようにSassやLess、StylusなどのaltCSSを使った開発がデファクトスタンダードになってます。 最近ではちらほら聞こえ始めた「PostCss」という言葉。 そのPostCssを取り入れて開発している所も徐々に増え始めているのではないでしょうか。

PostCSSとは

公式レポジトリのREADMEには

PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.

引用: https://github.com/postcss/postcss

(ざっくり和訳) PostCSSはJSプラグインでのスタイルを変換するためのツールです。 これらのプラグインは、変数とミックスイン、 将来のCSSの構文のtranspile、インライン画像などをサポートすることができます。

PostCSSはグーグル、ツイッター、アリババ、およびShopifyなどの業界のリーダーなどで使用されています。 Autoprefixer PostCSSプラグインは、最も人気のあるCSSプロセッサの1つです。

PostCSSはSass、Stylusなどのプリプロセッサと同じように作業を行うことができます。PostCSSはモジュラーなので3-30倍高速でずっと強力です。

と書かれています。

なにができるのか

公式リポジトリから一部抜粋

  • Packs
  • Future CSS Syntax
  • Fallbacks
  • Language Extensions
  • Optimizations

Packs

プラグインのパック

  • cssnext
  • cssnano
  • precss
  • stylelint

Future CSS Syntax

W3C仕様策定中の構文の先取り。

変数、カスタムセレクター、カラー関数などなど

  • cssnext

    http://cssnext.io/

    現在策定中でまだブラウザが実装していないCSS記法を現在のブラウザが解釈できるようにするプラグインパックです。

Fallbacks

後方互換

ベンダープリフィックス付与だったり、IE8のopacity filterの記述したり。

Language Extensions

言語拡張。

Optimizations

最適化。

などなどその他もろもろプラグインがあります。

Performance

Compare CSS processors for parsings, nested rules, mixins, variables and math:

PostCSS:   40 ms
Rework:    75 ms   (1.9 times slower)
libsass:   76 ms   (1.9 times slower)
Less:      147 ms  (3.7 times slower)
Stylus:    166 ms  (4.1 times slower)
Stylecow:  258 ms  (6.4 times slower)
Ruby Sass: 1042 ms (26.0 times slower)
Compare vendor prefixes tools:

Autoprefixer: 45 ms
Stylecow:     200 ms  (4.5 times slower)
nib:          381 ms  (8.5 times slower)
Compass:      2451 ms (54.5 times slower)

引用: https://github.com/postcss/benchmark

とパフォーマンスに関してもこれまでのツールなどよりとにかく速いです。

実際にさわってみる

いろいろ書きましたので実際に少し使ってみたいと思います。

いくつかのビルドツールが使えるということで今回は glupを使っていきたいと思います。

ここではgulp.jsが扱える前提で書いていきます。

まず、 cssnextを使ってみたいと思います。

http://cssnext.io/setup/

https://github.com/cssnext/gulp-cssnext

適当にプロジェクトフォルダを作成して、

ターミナルでプロジェクト配下まで移動して、プラグインをインストールします。

npm i -D gulp-cssnext

と入力。

次にglupのタスクファイルの作成します。

var gulp = require('gulp');
var cssnext = require("gulp-cssnext");


gulp.task('css', function () {
  gulp.src('src/**/*.css')
  .pipe(cssnext([
      require('cssnext'),
  ]))
  .pipe(gulp.dest('css/'));
});

gulp.task('default', ['css']);

次にcssファイルを作成します。

input.css

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */
:root {
  --primary-color:   #E86100;
  --secondary-color: #2c3e50;
  --base-fontsize:     1rem;
}

.h1 {
  color: var(--primary-color);
}
.h1:hover {
  color: var(--secondary-color);
}
body {
  font-size: var(--base-fontsize);
}


/* prefix */
.box {
    display: flex;
}
.transform {
    transition: scale(0.5);
}

ターミナルで

gulp

コンパイルすると・・・

output

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */

.h1 {
  color: #E86100;
}
.h1:hover {
  color: #2c3e50;
}
body {
  font-size: 16px;
  font-size: 1rem;
}


/* prefix */
.box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.transform {
    -webkit-transition: scale(0.5);
            transition: scale(0.5);
}

ちゃんと変換されてますね。

次にSassライクに書けるプラグインを入れてみます。

npm i -D gulp-postcss postcss-mixins postcss-nested postcss-simple-vars

gulpfile.jsを書き換えて

var postcss = require('gulp-postcss');
var cssnext = require("gulp-cssnext");


gulp.task('css', function () {
  return gulp.src('src/**/*.css')
  .pipe(postcss([
      require('postcss-mixins'),
      require('postcss-nested'),
      require('postcss-simple-vars'),
  ]))
  .pipe(cssnext([
      require('cssnext'),
  ]))
  .pipe(gulp.dest('css/'));
});

gulp.task('default', ['css']);

input.css

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */
:root {
  --primary-color:   #E86100;
  --secondary-color: #2c3e50;
  --base-fontsize:     1rem;
}

.h1 {
  color: var(--primary-color);
}
.h1:hover {
  color: var(--secondary-color);
}
body {
  font-size: var(--base-fontsize);
}


/* Variables */
$red: #f00;

.menuLink {
    color: $red;
}


/* Mixins */
@define-mixin icon $name {
    padding-left: 16px;
    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}

/* Nested */
.phone {
    &Title {
        width: 100px;
        &.titleRight {
            float: right;
            .link {
                color: $red;
            }
        }
    }
}

/* prefix */
.box {
    display: flex;
}

コンパイルすると

/* custom properties */
/* http://dev.w3.org/csswg/css-variables/ */

.h1 {
  color: #E86100;
}
.h1:hover {
  color: #2c3e50;
}
body {
  font-size: 16px;
  font-size: 1rem;
}


/* Variables */

.menuLink {
    color: #f00;
}


/*  Mixins */

.search {
    padding-left:   16px;
}

.search:after {
  content:   "";
  background-url:   url(/icons/search.png);
}

/* Nested */
.phoneTitle {
  width: 100px;
}
.phoneTitle.titleRight {
  float: right;
}
.phoneTitle.titleRight .link {
  color: #f00;
}

/* prefix */
.box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

いい感じに変換されてます。

さわってみた感想

とにかくコンパイルは速かった。 ただすでに運用されている業務で使うとなると使いどころはいろいろ考えなければいけないのかなーと。

まだ日本語ドキュメントが少なく、バグなども隠れているかもしれませんが、gulpやSassに慣れていれば導入は比較的容易なので、個人的なブログや小規模サイトやこれから構築するサイトなどでは積極的に取り入れていけるんではないでしょうか。

選ぶプラグインによってはSassライクに書けるのでSassに慣れた人なら学習コストが低そうです。

現在すでに運用されているリノコに導入と考えるとプラグインの選定や、ルール作りが必須となりそうです。

ほな。