scss用の私的lint設定

module.exports = {
  plugins: [
    // scssのチェックを可能にしてくれるプラグイン
    'stylelint-scss',
    // その他のプラグイン（rules欄で後述）
    'stylelint-declaration-strict-value',
    'stylelint-high-performance-animation'
  ],
  extends: [
    // CSSプロパティのソート順定義. --fixオプションで自動ソートもしてくれる
    'stylelint-config-recess-order',
    // 標準ルール
    'stylelint-config-standard'
  ],
  rules: {
    /* config rules */
    /* stylelint-config-standardに存在しない規定を追加 */
    /* 参考: https://qiita.com/DesignChips/items/cd5282dba553026757c8 */
    'font-family-no-duplicate-names': true,
    'font-family-no-missing-generic-family-keyword': true,
    'function-calc-no-invalid': true,
    'function-calc-no-unspaced-operator': true,
    'function-linear-gradient-no-nonstandard-direction': true,
    'string-no-newline': true,
    'unit-no-unknown': true,
    'property-no-unknown': true,
    'declaration-block-no-duplicate-properties': true,
    'declaration-block-no-shorthand-property-overrides': true,
    'block-no-empty': true,
    'selector-pseudo-class-no-unknown': true,
    'selector-pseudo-element-no-unknown': true,
    'selector-type-no-unknown': true,
    'media-feature-name-no-unknown': true,
    'at-rule-no-unknown': true,
    'no-descending-specificity': true,
    'no-duplicate-at-import-rules': true,
    'no-duplicate-selectors': true,
    'no-empty-source': true,
    'no-extra-semicolons': true,
    'declaration-block-single-line-max-declarations': 1,
    // セレクタの詳細度制限  Format "id,class,type"
    'selector-max-specificity': "3,3,2",
    'declaration-no-important': true,
    'keyframe-declaration-no-important': true,
    'comment-no-empty': true,
    // 使用を禁止したいpropertyとvalueの組み合わせと、禁止理由をここに定義する.
    'declaration-property-value-allowed-list': {
      // 例: align-self: 互換性がないブラウザがあるので一部のパターンを禁止
      "align-self": ["/left/", "/right/", "/safe/", "/unsafe/"]
    },
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,

    /* plugin rules */
    // 低パフォーマンスのCSSアニメーションやトランジションのプロパティをチェックするプラグイン
    // 参考(CSSアニメーションのベストプラクティス):
    // https://www.webprofessional.jp/achieve-60-fps-mobile-animations-with-css3/
    'plugin/no-low-performance-animation-properties': [
      true,
      // paint系は警告を抑止し、layout系のみ警告する
      // https://github.com/kristerkari/stylelint-high-performance-animation#ignore-paint-properties
      { ignore: "paint-properties" }
    ],
    // CSSプロパティの変数使用をチェックするプラグイン
    'scale-unlimited/declaration-strict-value': [
      // 変数使用を強制したいCSSプロパティを定義
      ['/color$/', 'z-index', 'font-weight', 'font-size', 'line-height'],
      {
        // ショートハンド内もチェックする
        expandShorthand: true,
        // 自動フォーマットはしない（フォーマッタを自前で書く必要がありコストが大きい為）
        disableFix: true,
        // 以下の値は変数規定せず直接利用を許容する
        ignoreValues: {
          // - 全てのプロパティに対して許容
          '': ['currentColor', 'transparent', 'inherit', 'unset'],
          // - 特定のプロパティに対して許容
          //   - (全てのプロパティ向けの許容値リストをこのプロパティでも有効にしたい場合は再定義が必要な点に注意)
          'font-size': ['0', 'currentColor', 'transparent', 'inherit', 'unset'],
          'line-height': ['normal', 'currentColor', 'transparent', 'inherit', 'unset']
        },
        // 警告文
        message:
          'Avoid using literal like "${value}" for "${property}". Instead, please use predefined variables.'
      }
    ]
  }
}