CSScomb を使っていた
色々なエディタにプラグインがあることとか、簡単に使えて便利だったのもあって、 CSScomb を愛用していた。
そんなある日、あるエラーにぶち当たった。それがこれである。
'Please check validity of the block starting from line #21 CSScomb Core version: 4.2.0'
'Please check validity of the block starting from line #21
CSScomb Core version: 4.2.0'
なんだこれは？文法エラーか？とも思った。しかし、そんなはずはない。
私は CSScomb を通す前に文法チェックを挟んでいる。文法エラーが出るなら、そこのはずだ。そもそも、エディタに入っている linter が反応していないということは、コードには問題はないはずだ。
つまり、これは CSScomb のバグだということになる。時刻は22時、まだ風呂も入っていない。正体の見えないバグとの戦いが始まった。
問題部分はどこか
まず、CSScomb 以外では文法エラーが発生していないにも関わらず、文法エラーが出ていることから、 CSScomb に組み込まれている、CSS の構文を解析する処理になんらかの不具合が発生していると考えた。
そこで私は、ひたすらに探した。CSSパーサを。babel-polyfill...コレは違うな。glob...コレも違う。ちくわ大明神...誰だ今のは。そんなこんなで、とうとう見つけ出した。 CSSComb は、gonzales-peという CSS パーサを使っているようだ。しかも、このパーサの作者の tonyganch さんは CSScomb の作者じゃないか。びっくり。
そして、このパッケージのコミットログを読むと、こんなものが見つかった。これを読む限り、どうやらこのコミット以前のバージョンでは、calc()での乗算に対応していなかったようだ。私の CSS のコードを見ると、確かに calc()内で乗算をしている。恐らくこれが原因だろう。そこで、インストールした CSScomb の中のpackage.jsonに書いてあるgonzales-peのバージョンを最新のものに書き換え、
"dependencies": {
"babel-polyfill": "6.23.0",
"glob": "latest",
- "gonzales-pe": "^3.4.7",
+ "gonzales-pe": "^4.2.0",
"minimatch": "3.0.2",
"minimist": "1.1.x",
"vow": "0.4.4",
"vow-fs": "0.3.6"
}
npm updateコマンドを実行した。
npm update --save --depth=99999
すると、calc()で乗算を使っていても、うまく CSS がフォーマットされた。
CSScomb は使うな
いやー、長い戦いだったなぁ、と落ち着き、リラックスがてら tonyganch さんのサイトを見ていたら、なんとこんなことが書いてあった。
My (deprecated) projects:
CSScomb (CSS coding style formatter)
GPE (CSS parser with support of preprocessors)
で、deprecated！？だからcalc()の乗算ができない問題も CSScomb だと修正されてなかったのか...。
というわけで、 CSScomb では、今後発生したバグも修正される見込みが薄いため、今から使い始めることはオススメしません。今 CSScomb を使っている人も、他のパッケージに移行しましょう。
しかし、私はどうしようか。
stylefmtか、postcss-sortingか、prettierか...。選択肢がいっぱいありすぎる。悩ましい。
私たちの戦いは、これからだ。