CSScombが8桁のカラーコードを適切に扱ってくれない

VSCodeにCSScombの拡張機能が入っている状態でSCSSを保存するときに、
8桁のアルファ値付きHEX表記カラーコード（ex. #000000fd）が5桁に変換されてしまう

という現象に遭遇したので解決してみます

前提

• VSCodeを使っている
• VSCodeにCSScombの拡張機能が入っている
• 保存時にCSScombによる自動整形がされる
  • settings.jsonに"csscomb.formatOnSave": true が入ってればOK

結論

ルートディレクトリにある.csscomb.jsonのcolor-shorthandの値を書き換えれば解決です

trueになってるのでfalseに直しましょう

.csscomb.json

{
  ..
  "color-shorthand": false,
  ..
}

解説

を保存してみます

（コピペ用）

hoge.scss

// アルファ値なし
$shortHexColor: #333; // 3桁
$hexColor1: #333333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33333355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

"color-shorthand": trueの場合

ご覧の通り$withAlpha1に指定したカラーコードが5桁となりエラーとなってしまいます

#33333355→#33355となっていることから、RGB値までは省略したけどα値はそのままで5桁となっているようです

6 + 2 = 8 → 3 + 2 = 5

hoge.scss

// アルファ値なし
$shortHexColor: #333; // 3桁
$hexColor1: #333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

"color-shorthand": falseの場合

こちらは省略されずに全てのパターンにおいてエラーは出ませんでしたが、
わざわざ省略して書いていた`$shortHexColorをご丁寧にも長くしてくれやがってます

4桁の#3335は#3333335の7桁にしてエラーにするでもなく、#33333355の8桁にするでもなくスルーなのに不思議ですね

hoge.scss

// アルファ値なし
$shortHexColor: #333333; // 3桁
$hexColor1: #333333; // 3桁にできる6桁
$hexColor2: #353535; // 3桁にできない6桁

// アルファ値あり
$shortWithAlpha1: #3335; // 4桁
$withAlpha1: #33333355; // 4桁にできる8桁
$withAlpha2: #35353535; // 4桁にできない8桁

感想

"color-shorthand": falseでアルファ値持ちのカラーコードも無事保存できるようになりましたが、
省略して書いてるものは無視してくれ...