stylelintのprocessorsを作って独自構文をlintしてもらう

stylelintはstyleに関するエラーを出すことが出来るlintツールだが、syntaxは今の所

以前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;

正規表現で全然いくつかのパターンに対応されてないので、簡単なやつしかできないけど、一応こうなる。
スクリーンショット 2019-10-06 13.03.23

indentation効いてないけどよくわかんない。
以上。終わり。

作ってみた感想

stylelintのtestのドキュメントもそうだが、あまりドキュメントの質に関してはこだわってない印象がある。他のコントリビューターにそこらへん聞いてみようと思う。
emotionではstylelintのfixが効かないので、stylelint-processor-styled-componentsを見てみると原因が分かるかもしれないなとは思えるようになった。