⚙️Stylelint設定の解説

当記事の公開時点でのStylelintに設定している内容について解説します。

Stylelint（.stylelintrc.js）のコード概要

現在は下記のように設定しています。

export default {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
  ],
  plugins: ['stylelint-plugin-use-baseline', 'stylelint-declaration-block-no-ignored-properties'],
  rules: {
    /**
     * CSS
     */
    'no-descending-specificity': [true, { severity: 'warning' }], // 降順のセレクタの優先順位を警告
    'declaration-no-important': [true, { severity: 'warning' }], // !importantを警告
    'declaration-property-unit-allowed-list': /* 許可するプロパティと単位のを指定 */ {
      'line-height': [],
    },
    'media-feature-name-no-vendor-prefix': null, // プレフィックスを許容
    'selector-class-pattern': null, // クラス名のパターンを無効
    'declaration-property-value-no-unknown': [
      true,
      { ignoreProperties: { '/.*$/': '/theme\(.+?\)/' } }, // Tailwindのtheme()関数を無視
    ],

    /**
     * SCSS
     */
    'scss/at-rule-conditional-no-parentheses': null, // @ifの括弧を省略（minmax functionで使用）
    'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'screen'] }], // Tailwindのatルールを無視

    /**
     * Plugin
     */
    // Baseline準拠のCSS機能チェック
    'plugin/use-baseline': [
      true,
      {
        severity: 'warning',
        available: 'widely',
        ignoreSelectors: ['nesting', '/^has/'],
        ignoreProperties: {
          '/^mask/': [],
          '/^grid/': ['subgrid'],
          '/backdrop-filter/': [],
        },
        ignoreAtRules: ['function'],
      },
    ],
    // 使用できないプロパティの組み合わせを検出
    'plugin/declaration-block-no-ignored-properties': true,
  },
  ignoreFiles: ['node_modules/**/*', 'dist/**/*'],
};

導入している設定・プラグイン

ベースルール

方針として、公式の推奨設定と標準設定をベースに導入しています。理由は、それが最も広く使われており、デファクトスタンダードの可能性が高いからです。

export default {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-scss',
    'stylelint-config-standard-scss',
  ],
};

使用しているベースとなる推奨ルールは下記のとおりです。

ルール名説明Rulesリンク
① stylelint-config-recommendedCSSの基本的な推奨ルールRules
② stylelint-config-standard①を拡張したものRules
③ stylelint-config-recommended-scss①を拡張し、SCSSルールを加えたものRules
④ stylelint-config-standard-scss③を拡張したものRules

プロパティの並び順ルール

SCSSのプロパティ並び替えは、recessに準拠しています。理由は、順番が直感的でわかりやすいためです。
選定参考：stylelint order（並び替え）のパッケージについて（Zennスクラップ）

export default {
  extends: [
    'stylelint-config-recess-order',
  ],
};

プラグイン

Stylelintにはないルールはプラグインを活用していますが、公式がサポートしているものではないため、導入は必要最低限に留め、メンテナンスを小まめに行う必要があります。

export default {
  plugins: [
    'stylelint-plugin-use-baseline', 
    'stylelint-declaration-block-no-ignored-properties'
  ],
  rules: {
    // Baseline準拠のCSS機能チェック
    'plugin/use-baseline': [
      true,
      {
        severity: 'warning',
        available: 'widely',
        ignoreSelectors: ['nesting', '/^has/'],
        ignoreProperties: {
          '/^mask/': [], 
          '/^grid/': ['subgrid'],
          '/backdrop-filter/': [],
        },
        ignoreAtRules: ['function'],
      },
    ],
    // 使用できないプロパティの組み合わせを検出
    'plugin/declaration-block-no-ignored-properties': true,
  },
};

使用しているプラグインは下記のとおりです。

プラグイン名説明
stylelint-plugin-use-baselineBaseline準拠のCSS機能チェック
stylelint-declaration-block-no-ignored-properties使用できないプロパティの組み合わせを検出

個別ルールの解説

推奨ルールをベースとしていますが、一部カスタマイズしているルールとその理由について解説します。

no-descending-specificity

降順のセレクタの優先順位を警告します。
SCSSの場合、ネストすることにより、意図せず優先順位が高くなってしまうことがあるため、注意喚起のためにエラーではなく警告で設定しています。
Docs: https://stylelint.io/user-guide/rules/no-descending-specificity/

'no-descending-specificity': [true, { severity: 'warning' }],

declaration-no-important

importantの使用を警告します。
importantは基本的に使用しない方針ですが、どうしても使用が必要な場合が想定されるため、エラーではなく警告で設定しています。
Docs: https://stylelint.io/user-guide/rules/declaration-no-important/

'declaration-no-important': [true, { severity: 'warning' }],

declaration-property-unit-allowed-list

宣言内で許可されるプロパティと単位を指定します。
line-heightプロパティは単位を指定しない方針のため、空配列を設定しています。line-heightは単位を指定しないことが望ましいとされています。（参考: MDN）
Docs: https://stylelint.io/user-guide/rules/declaration-property-unit-allowed-list/

'declaration-property-unit-allowed-list': {
'line-height': [],
},

media-feature-name-no-vendor-prefix

プレフィックスを許容します。
Docs: https://stylelint.io/user-guide/rules/media-feature-name-no-vendor-prefix/

'media-feature-name-no-vendor-prefix': null,

許容する理由として、例えば下記のようなテキスト超過した際の三点リーダーのCSS実装には、依然としてプレフィックスを必要とするものがあるためです。

.text-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

selector-class-pattern

クラス名のパターンを無効にします。
Docs: https://stylelint.io/user-guide/rules/selector-class-pattern/

'selector-class-pattern': null,

stylelint-config-standardでは、下記のようにケバブケースを強制する設定となっているため、プロジェクトの命名規則に合わせて無効化しています。

'selector-class-pattern': [
  '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
  {
    message: (selector) => `Expected class selector "${selector}" to be kebab-case`,
  },
],

declaration-property-value-no-unknown

未知のプロパティ値を警告します。
Tailwind CSSのtheme()関数を使用する際に、プロパティ値として認識されないため、ignorePropertiesオプションで無視するように設定しています。
Docs: https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/

'declaration-property-value-no-unknown': [
  true,
  { ignoreProperties: { '/.*$/': '/theme\(.+?\)/' } },
],

scss/at-rule-conditional-no-parentheses

@ifの括弧を省略を無効にします。
理由は、Sassのminmax()関数を実装する際に、括弧が必要となるためです。
Docs: https://github.com/stylelint-scss/stylelint-scss

'scss/at-rule-conditional-no-parentheses': null,

scss/at-rule-no-unknown

未知のatルールを警告します。
Tailwind CSSのtailwind、screenなどのatルールを使用する際に、プロパティ値として認識されないため、ignoreAtRulesオプションで無視するように設定しています。
Docs: https://github.com/stylelint-scss/stylelint-scss

'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind', 'screen'] }],