基礎知識

Feltとは？

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

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

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

• JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita

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とpostcss-importの機能のみ使用できるようです。

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

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

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

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

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

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などを参考にしてください。
• コンフィグファイルの設定は、レシピの差分として認識されるわけではないので、必要なパッケージ／プラグインは全て記述する必要があります。（PostCSSを使う場合は、felt-postcssだけは必ず必要です）

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

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

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

{
  "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.