2016年から始めるCSS~環境構築編~

使用するSyntax

PostCSSを使用することで、W3C標準や独自定義など、様々なSyntaxに対応できるようにします。

PostCSS

• 公式サイト
• jsでいうところのbabelのようなものです(cssが付いているからややこしい・・やっぱbabelって神だな・・)
• 本体はcssファイルを読み込んでAST(Abstract Syntax Tree)を作成するだけです
• ASTからのtransformはPluginが実行します
• transformの書き出し(stringify)はPostCSSが実行します
• codeはbabelよりも読みやすいです
• cssのsyntaxの一種ではないです
• syntaxを定義するのはPluginの方でやります

環境構築

webpackを使用します。基本的な使用方法は前提となっています。

install

$ npm install --save-dev postcss-loader

# browser-vendor個々のprefixを設定するautoprefixerと
# sassのような記法が使えるprecssのpluginもインストールします
$ npm install --save-dev autoprefixer precss

webpack.config.jsを編集します

webpack.config.js

'use strict';

var webpack = require('webpack');
var path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');

var env = process.env.NODE_ENV;
var config = {
  module: {
    loaders: [
      ...,

      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      },

      ...,
    ]
  },
  ...,

  postcss: function() {
    return [autoprefixer, precss];
  }
};

module.exports = config;

参考： https://github.com/postcss/postcss-loader
参考： https://github.com/jonathantneal/precss (postcss-scssをインストールすると書いてあるが、実際なしでも動く)

buildすれば正常に動作します。

これだけだとただscssをビルドしているだけ(それでも便利)ですが、pluginを使用すれば色々なsyntaxが利用できるようになります。
pluginを作れば自分だけのsyntaxを定義することも可能です。

PostCSS Plugin使用編に続く・・・（完）