零弐壱蜂

[Stylelint] 特定の値を制限する方法（mixinやfunction利用を促す）

1 min read

背景

font-weightにboldを指定するとiOSのHiragino Sansで太さが意図よりも太くなることがある。そのため、font-weight: boldの指定を避けるために、Stylelintで特定の値を制限する方法について考えてみた。

Tip

iOS の Hiragino Sans のウェイトには W3, W6, W8 が含まれるが、font-weight: boldを指定すると700（W7）と同義になり意図よりも太い表示になる。
iOS の場合は bold を直接指定せず、font-wight: 600を指定したい。

方法

Stylelintのdeclaration-property-value-disallowed-listを利用する。

// stylelint.config.js
rules: {
  'declaration-property-value-disallowed-list': {
    'font-weight': 'bold',
  },
}

これでfont-weight: boldを指定するとエラーを出力するようになる。

font-weightに太字の指定をしたい場合はmixinもしくはfunctionを利用する想定。