こんにちは！stylelintって略すとスターリンですね。CSSを修正…もとい粛清するんでしょうか。Mizutani(@sirycity)です。

今日はそんなstylelintをReactにあるJSXとかに使うとcamelCaseでエラー扱いにしてくる現象を無効化する方法についてです。

stylelintとは

stylelintとは簡単に言うとESLintのCSSバージョンです。間違ったCSSを直してくれるやつ。CSSは間違っててもエラーで止まらないから見つけにくくて、そういう間違いをエラー吐いて教えてくれるやつです。

stylelintはESLintみたいに設定を自由に足せます。でもESLintと違ってブラックリスト方式です。なのでこんな感じに何も書かないと何もエラーは出ない。つまり既存のプロジェクトに導入しやすいんです。

module.exports = {}

JSXのcamelCaseでエラー出る問題

このstylelint、cssだけじゃなくcssっぽいやつ、例えばJSXにも使えます。普通はこんな風に実行するんだけど…

npx stylelint '**/*.css'

こんな風に書けばJSXとかTSXも検査できる。(ほんとはもっと色々設定必要だけどね)

npx stylelint '**/{*.css,*.jsx,*.tsx}'

んでここからが問題なんだけど、stylelintのルールでstylelint-config-standardってのがあって、名前の通りわりと標準的なルールのサブセットのようなものでたくさんの人が使ってるわけです。こんな風に設定して。

module.exports = {
  extends: ['stylelint-config-standard'],
}

そんでこのルールセットの中の一つにキャメルケースだとエラーみたいなのがあります。そりゃそうだ。cssは基本スネークケースでbackground-colorみたいに書くしね。backgroundColorとはならんからな。妥当です。

…しかし一方でjsに使われるのはキャメルケース。もうお分かりでしょうか、JSXにstylelintを適用するとこのキャメルケース禁止ルールが盛大に誤爆します。誤爆例は色々あるけど、一番簡単なのだとstyleを三項演算子で書き分けるような場合。こういうやつ。

const isRed = true

return <div
  style={{
    color: isRed ? 'red' : 'blue'
  }}
/>

上で書いた通りstylelintは設定に何も書かなければエラーは起きんのですが通常のエラーはちゃんと検知して欲しい…なのでこのキャメルケースのエラーだけを設定で無効化します。

結論

こう。

module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'value-keyword-case': [
      'lower',
      {
        ignoreKeywords: [/.*/],
        ignoreProperties: [/.*/],
        ignoreFunctions: [/.*/],
      },
    ],
    'function-name-case': [
      'lower',
      {
        ignoreFunctions: [/.*/],
      },
    ],
  },
}

最後に

個人的にはstylelint大好き。stylelintはもうcssを適当に扱える時代は過ぎたって私たちに語りかけてる気がするんですね。マークアップは他の言語と比較しておまけ程度に扱われていた時期もあったので、そういう技術が重要視されている昨今のwebをとても嬉しく思います。まあ実際使ってるのはCSSinJSだけどな以上！