Feltにプラグインを追加してPostCSSを使う方法

# 基礎知識

## Feltとは？

[Felt](https://github.com/cognitom/felt)は、CSSとJavaScriptのバンドル機能を持った、ローカルで動作するWebサーバです。
ES6とPostCSSで記述すると、内部で処理してくれるので、複雑な環境を用意しなくても、サクッと表示確認することができます。

私は、ES6はまだちゃんと使ったことがなかったので、とりあえずPostCSSのみで試してみましたが、その際のやり方を備忘録として残しておきます。

※Felt自体の解説は、下記エントリーを参考にしてください。

- [JavaScriptを劇的に教えやすくするWebサーバ作りました \- Qiita](http://qiita.com/cognitom/items/010dd3b9a0c0a5dd22d0)

## PostCSSとは？

[PostCSS](https://github.com/postcss/postcss)とは、多種多様なプラグインを用いてCSSファイルを変換するポストプロセッサーです。
gulp等で利用されることも多いかと思いますが、基本的にはそれ単体で使用するものではなく、適宜必要なPostCSSプラグインと連携しながら使うスタイルが一般的です。

# 最小構成でPostCSSを使う場合

以下のコマンドを実行するだけでOK。（※要node v6.x）

```
$ npm install -g felt felt-recipe-minimal  
$ cd path/to/project/  
$ felt  
```

`http://localhost:3000/`にアクセスすると、コンパイル済みの状態でサイトを閲覧することができます。

## ファイル構成例

今回はCSSの変換のみなので、以下のようなファイル構成を想定しています。

- project/
    - index.html
    - css/
        - style.css
    - cache/（Felt実行時に自動的に生成）

## 補足＆注意点

- 上記のやり方の場合、最小構成のレシピ（felt-recipe-minimal）を使う形になります。
- デフォルトでは、PostCSSプラグインのうち、[postcss-cssnext](https://github.com/MoOx/postcss-cssnext)と[postcss-import](https://github.com/postcss/postcss-import)の機能のみ使用できるようです。

# PostCSSプラグインを追加する場合

レシピに入っていないプラグインを使用するには、コンフィグ（設定）ファイルを作成して、プラグインを個別にインストールする必要があります。
以下の手順に従って設定すれば、自分の好きなプラグインを追加することができます。

## 1.コンフィグファイルの作成

プロジェクト直下にコンフィグファイル（felt.config.js）を設置して、使用したいプラグインを追記します。

例えば、postcss-nested、postcss-simple-vars、postcss-mixinsの3つを追加で利用したい場合は、以下のように記述します。

```felt.config.js
const
  postcss = require('felt-postcss'),
  postcssImport = require('postcss-import'),
  postcssNested = require('postcss-nested'),
  postcssSimpleVars = require('postcss-simple-vars'),
  postcssMixins = require('postcss-mixins'),
  cssnext = require('postcss-cssnext')

module.exports = {
  handlers: {
    '.css': postcss({
      plugins: [
        postcssImport(),
        postcssMixins(),
        postcssSimpleVars(),
        postcssNested(),
        cssnext()
      ],
      options: {
        map: { inline: false }
      }
    })
  }
}
```

### コンフィグファイルの注意点

- コンフィグファイルの書式は公式レシピと一緒なので、詳しい書き方は[felt-recipe-minimal](https://github.com/cognitom/felt-recipe-minimal)などを参考にしてください。
- コンフィグファイルの設定は、レシピの差分として認識されるわけではないので、必要なパッケージ／プラグインは全て記述する必要があります。（PostCSSを使う場合は、felt-postcssだけは必ず必要です）

## 2.プラグインのインストール

コンフィグファイルを用いてFeltを利用する場合、依存するパッケージ／プラグインはローカルにインストールする必要があるので、別途npmでインストールを行います。

今回は`package.json`に以下のように記述して、`npm install`コマンドを実行しました。

```package.json
{
  "name": "felt-postcss-selection",
  "version": "1.0.0",
  "description": "PostCSS selection for Felt",
  "main": "felt.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yusuke Takahashi",
  "license": "MIT",
  "dependencies": {
    "postcss-cssnext": "^2.7.0",
    "felt-postcss": "^0.1.0",
    "postcss-import": "^8.1.2",
    "postcss-mixins": "^5.0.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}
```

## 3.Feltの実行

以下のコマンドにより、コンフィグファイルを指定してFeltを実行します。

```
$ felt --config felt.config.js
```

すると、先ほどと同じように、`http://localhost:3000/`でコンパイルされた状態で閲覧することができます。

`cache/`以下に生成されているCSSファイルを見れば、追加されたプラグインの機能のみ、変換が実行されているのを確認できるでしょう。

## ファイル構成例

`felt.config.js`と`package.json`を新規で作成したため、ファイル構成としては以下のような形になりました。

- project/
    - index.html
    - css/
        - style.css
    - cache/（Felt実行時に自動的に生成）
    - node_modules/（追加モジュールを格納）
    - felt.config.js
    - package.json

# まとめ

最小構成のレシピ（felt-recipe-minimal）では、PostCSSの一部の機能しか使用できませんが、コンフィグファイルを用いて設定することで、自分の好きなPostCSSプラグインを追加することができます。

ただし、コンフィグファイルを使用する場合は、プラグインを個別にインストールする必要があるので、`package.json`を用いてプロジェクト毎にプラグインを管理すると良いでしょう。

# サンプル

今回の解説で使用したPostCSS用のサンプルファイル一式をGitHubに公開しています。
こちらをローカルにcloneして実行すれば、実際にFeltでPostCSSを利用する流れが体験できるので、参考にしてみてください。

- [littlebirdjp/felt\-postcss\-selection: Sample files to use PostCSS with Felt\.](https://github.com/littlebirdjp/felt-postcss-selection)