stylelintのprocessorsを作って独自構文をlintしてもらう
stylelintはstyleに関するエラーを出すことが出来るlintツールだが、syntaxは今の所
- css-in-js
- html
- less
- markdown
- sass
- scss
- sugarss
しか対応されておらず、それ以外はcustom-syntax
オプションを使うことで可能っぽい。 stylelint/node-api.md at master · stylelint/stylelint · GitHub
以前Reactのプロジェクトでemotionを使った際、stylelint-processor-styled-componentsを使ったことがあり、興味が出たので勉強を兼ねて自分で作ってみた。
ドキュメントが必要最低限で辛い
まずは僕が作ったものがこれ。
そして参考にしたのがmapbox/stylelint-processor-markdown。
ドキュメントも見たのだが、必要最低限のことしか書いておらず、どういうふうにやったらいいのかというのがあまり見えてこなかった。
Writing processors · stylelint
ちなみに、stylelint-processor-styled-componentsは、stylelintコアメンバーの一人のDavid Clark氏が作ったmapbox/stylelint-processor-markdownを参考にしたみたい。
何をやったのか
独自定義ファイル(.hoge)を作って、その中のstyle定義箇所の文字列をstylelintに渡してlintしてもらった。
// 独自定義ファイル
// ここはコメント部分
// {{}}で囲われたところがstyle定義箇所
{{
color => red,
color => blue,
backgroundColor => green,
}}
fixは検証してない。
どうやったのか
module.exports = {
processors: [
["../lib/index.js", {target: ['hoge']}]
],
extends: "stylelint-config-standard",
rules: {
"color-named": "never",
"indentation": 2,
}
};
.stylelintrc
ファイルにprocessorsを指定するフィールドがあるので、そこに作ってみたprocessors実装ファイルを相対パスで指定している。
@tyankatsu0105/stylelint-processor-original
とかでnpm package作ればそれ指定すればいい。
実装はここ。
最終的には
module.exports = function (options) {
return {
code: transformer(options),
result: transformedResult,
};
};
みたいになればいい。
code
にはstylelintに渡す文字列を与える。
result
は使わなかったのでよくわからない。(誰か教えて。otaさん・・・)
ちなみに、.hogeファイルの文字列はこのようにcodeに返してる。
color: red;
color: blue;
background-color: green;
正規表現で全然いくつかのパターンに対応されてないので、簡単なやつしかできないけど、一応こうなる。
indentation効いてないけどよくわかんない。
以上。終わり。
作ってみた感想
stylelintのtestのドキュメントもそうだが、あまりドキュメントの質に関してはこだわってない印象がある。他のコントリビューターにそこらへん聞いてみようと思う。
emotionではstylelintのfixが効かないので、stylelint-processor-styled-componentsを見てみると原因が分かるかもしれないなとは思えるようになった。