適当な思いつきで書くブログ

テキオモの記憶の片隅に追いやられそうな出来事を書き連ねます

Stylelintプラグインでdoiuseのチェック

2017年11月07日

doiuseはCSSのスタイルが指定したブラウザでサポートしてくれるかチェックしてくれる。
doiuseはnpmでも公開されているのでnpm-scriptsなりgulpなりでチェック環境を作れるのだけれども、stylelintのプラグインであるstylelint-no-unsupported-browser-featuresを利用して、stylelintに含めることができるのでやってみた。

https://github.com/ismay/stylelint-no-unsupported-browser-features

$ npm i -D stylelint stylelint-no-unsupported-browser-features

# stylelint-config-standard を使うなら
$ npm i -D stylelint-config-standard

./.stylelintrcはこんな感じ

# ./.stylelintrc
{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [true, {
      "browsers": ["> 1% in JP"]
    }]
  }
}

実行はこんな感じ。stylelintの実行と変わらない。

$ ./node_modules/.bin/stylelint /PATH/TO/CSS/*

browsersを含めていると何故かstylelintのプロセスが終了しない。(環境は node v7.10.1, npm 5.5.1)

./browserslistに定義してあげるととりあえず動いた。

# ./browserslist
> 1% in JP