CSS
gulp
stylelint

ここがすごいぞ! stylelint!

More than 1 year has passed since last update.


tl;dr



  • ESLintっぽいCSS用のLint


  • PostCSSプラグインとして動作するので色々嬉しい

  • SCSSもだいたい使える


stylelint

ESLintのようなconfigでPostCSSプラグインとして動くstylelint

唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん!」みたいなプロダクトが実際とても良かったので色々利点を記載。

導入についての手順などはすでに記事があったので、そちらへリンクしたい


ESLintっぽくて良い所

javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。

また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。


config周りがESLintにすごく近いので覚えることが少なめ

肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作られているので、先にESLintを導入していれば覚えることは少ないはず。

{

"plugins": [
"../some-rule-set.js"
],
"rules": {
"block-no-empty": null,
"color-no-invalid-hex": true,
},
}

config関連は、下記のような部分もESLintと同様に扱える


  • 設定はpackage.json,.stylelintrcでも設定可能。stylelint.config.jsとすればJavaScript Objectとして設定を書ける

  • 無視対象のファイルを.stylelintignoreなどで設定できる


  • plugin, extendの機能がある(後述)


デフォルトでルールが設定されてないので既存プロジェクトに導入しやすい

同様のツールである CSSLint など、デフォルトでルールがたくさん設定されているLinterの場合、既存プロジェクトに導入するのは逐一ルールをdisableにするか、大量に吐き出されるであろうlintを潰さないとまともに使えない状況で困難だった(そしてだいたい途中で辛くなって挫折する)

stylelintはESLint同様、デフォルトでは何のルールも設定されてない

この事に良し悪しはあれど、既存プロジェクトへの導入では上記のような苦悩が無く、無理なく適用可能なルールから導入していける。


extendsの機能があるので、新規プロジェクト向けにはstylelint-config-standardが使える

ルールが何もないのは新規プロジェクトでは全く無意味。

「推奨ルールがあってくれないと何を入れたらいいかわからない」という人にも安心。ESLintではeslint:recommendedがあるように、stylelint-config-standardが用意されている。

$ npm install stylelint stylelint-config-standard -D

{

"extends": "stylelint-config-standard"
}

これでオススメルールが追加された状態になる。

もしもっと他のextendsを探したければstylelint-configのタグから探せる。


PostCSSを利用している恩恵の良い所

stylelintはパーサーとしてPostCSSを利用しているので、その恩恵にあやかれる。


gulpなどでPostCSSを利用しているなら追加するだけで良い

autoprefixerなど、PostCSSを既に導入しているプロジェクトも少なく無いだろう。そんなプロダクトにとってstylelintを導入するのはとても簡単。

既存のpostcssのpluginにstylelintpostcssReporterを追加するだけで良い


Gulpfile.js

  :

var stylelint = require('stylelint')
var postcssReporter = require('postcss-reporter')
:
gulp.task('postcss', function () {
gulp.src("path/to/css")
.pipe(postcss([
autoprefixer(autoprefixerOpts),
postcssOpacity,
stylelint(), // これを追加
postcssReporter({clearMessages: true}), // こっちも必要
]))
.pipe(gulp.dest('./web/css'));
});


gruntのexamplepostcssを直接扱うexampleがほしければ公式にある。

当然、Command Lineから直接叩くことも出来る。なので、gulpやらを使いたくない人はこちらを使うと良いだろう。


Scss、SugerSSなどにも対応

PostCSSがCSS-likeな言語をサポートしているScss, SugerSSなどを、stylelintでもそのまま使える(LessはExperimentalの模様)

gulpで使いたければこんな感じになる


Gulpfile.js

  :

var postcssScss = require('postcss-scss')
var stylelint = require('stylelint')
:
gulp.task('scss-lint', function () {
gulp.src("path/to/scss")
.pipe(postcss([
stylelint(), // これを追加
postcssReporter({clearMessages: true}), // こっちも必要
], {syntax: postcssScss}))
.pipe(gulp.dest('./web/css'));
});

ただし、残念ながらno-browser-hacksなど、一部のルールはうまく扱えない1


PostCSSと同じAPIを利用してrulesが作れる

恩恵としては地味だが、独自Ruleを作る際にPostCSSのAPIを扱えるのは利点がある。

PostCSSのpluginを書いたことがある人ならば(そんな人がどの程度いるのかは不明)すぐ書けるし、ルールをpluginに移植したくなったり、既存のpluginをルール化したい時もそんなに難しくない2

例えばカスタムルールはこんな具合で書ける


custom-plugin.js

// ruleはpluginの一部として記載する

module.exports = stylelint.createPlugin(ruleName, function(expectationKeyword, optionsObject) {
return function(root, result) {
// PostCSSのRoot Nodeが取得されるので、これを利用してruleを書いていく
}
})


その他良い所


ルール違反時のメッセージをカスタマイズ出来る

多分ESLintなどには無い(と思う)が、表示するメッセージをカスタマイズすることが出来る。これはデザイナなど非エンジニアにもフレンドリーだろう。


stylelint.config.js

{

"color-hex-case": [ "lower", {
"message": "色はhexで統一しましょう"
} ]
}


Atom周り充実

linter-stylelint.stylelintrcのアイコンなど、Atomプラグインが一通り対応されている。


stylefmtと組み合わせて自動修正

eslint --fix的な自動修正として、stylefmtというプラグインとの組み合わせが言及されている。実はまだここまで手をつけれていないが、組み合わせればかなり便利そう。





  1. 軽くコードを追ってみたが、どうもこれはPostCSSの仕様によるものらしい。 



  2. 実際、no-browser-hacksなどは、stylehacksという別なPostCSSプラグインを使って作られている。