零弐壱蜂

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

背景

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

方法

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を利用する想定。