15.0.0 への移行

このリリースには、重要な変更または破壊的な変更が含まれています。

重要な変更

2つの重要な変更が影響する可能性があります。

スタイルに関するルールが非推奨になりました
declaration-property-value-no-unknown ルールが追加されました

スタイルに関するルールの非推奨化

スタイルの規約を強制する76個のルールを非推奨としました。

at-rule-name-case
at-rule-name-newline-after
at-rule-name-space-after
at-rule-semicolon-newline-after
at-rule-semicolon-space-before
block-closing-brace-empty-line-before
block-closing-brace-newline-after
block-closing-brace-newline-before
block-closing-brace-space-after
block-closing-brace-space-before
block-opening-brace-newline-after
block-opening-brace-newline-before
block-opening-brace-space-after
block-opening-brace-space-before
color-hex-case
declaration-bang-space-after
declaration-bang-space-before
declaration-block-semicolon-newline-after
declaration-block-semicolon-newline-before
declaration-block-semicolon-space-after
declaration-block-semicolon-space-before
declaration-block-trailing-semicolon
declaration-colon-newline-after
declaration-colon-space-after
declaration-colon-space-before
function-comma-newline-after
function-comma-newline-before
function-comma-space-after
function-comma-space-before
function-max-empty-lines
function-parentheses-newline-inside
function-parentheses-space-inside
function-whitespace-after
indentation
linebreaks
max-empty-lines
max-line-length
media-feature-colon-space-after
media-feature-colon-space-before
media-feature-name-case
media-feature-parentheses-space-inside
media-feature-range-operator-space-after
media-feature-range-operator-space-before
media-query-list-comma-newline-after
media-query-list-comma-newline-before
media-query-list-comma-space-after
media-query-list-comma-space-before
no-empty-first-line
no-eol-whitespace
no-extra-semicolons
no-missing-end-of-source-newline
number-leading-zero
number-no-trailing-zeros
property-case
selector-attribute-brackets-space-inside
selector-attribute-operator-space-after
selector-attribute-operator-space-before
selector-combinator-space-after
selector-combinator-space-before
selector-descendant-combinator-no-non-space
selector-list-comma-newline-after
selector-list-comma-newline-before
selector-list-comma-space-after
selector-list-comma-space-before
selector-max-empty-lines
selector-pseudo-class-case
selector-pseudo-class-parentheses-space-inside
selector-pseudo-element-case
string-quotes
unicode-bom
unit-case
value-list-comma-newline-after
value-list-comma-newline-before
value-list-comma-space-after
value-list-comma-space-before
value-list-max-empty-lines

これらのルールを作成した当時は、(Prettierのような) プリティプリンタは存在しませんでした。現在では、プリティプリンタは、特に空白に関して、コードを一貫してフォーマットするためのより良い方法を提供しています。リンターとプリティプリンタは、一貫性がありエラーのないコードを書くのに役立つ補完的なツールです。

これらのルールを非推奨とすることで、以下のことが可能になります。

エラーの回避と(スタイル以外の) 規約の適用に役立つルールの作成と保守に集中できます。どちらも Stylelint 独自の機能です。
コードベースを最新化できます。たとえば、ESM に移行することで、依存関係を更新し、Stylelint の安全性を確保できます。

非推奨のルールは、このリリースでは引き続き機能します（非推奨の警告が表示されます）。次のメジャーリリースで Stylelint からルールを削除する準備として、以下のことをお勧めします。

まだ行っていない場合は、設定オブジェクトで標準設定を拡張します。
設定オブジェクトから非推奨のルールを削除します。

以下の方法で標準設定を拡張できます。

{
+ "extends": ["stylelint-config-standard"],
  "rules": { .. }
}

また、競合するルールがなくなるため、Prettier の Stylelint 設定を拡張する必要がなくなる可能性があります。

{
- "extends": ["stylelint-config-prettier"],
  "rules": { .. }
}

標準設定の最新バージョンから非推奨のルールを削除しました。規約を強制する他のルールの多く、たとえば、*-notation、*-pattern、*-quotes ルールのほとんどを有効にすることで、一貫性のある CSS を記述できます。

標準設定では有効にしていないルールが他にもたくさんあります。新しいガイドで、これらのルールを使用して Stylelint をニーズに合わせてカスタマイズする方法について詳しく知ることができます。

または、非推奨のルールを移行したコミュニティプラグイン@stylistic/stylelint-pluginを使用して、Stylelint でスタイルの一貫性を引き続き適用することもできます。

非推奨の警告を非表示にするには、quietDeprecationWarnings オプションを使用できます。

`declaration-property-value-no-unknown` ルールの追加

declaration-property-value-no-unknown ルールを追加しました。このルールは、CSS 仕様で不明なプロパティと値のペアにフラグを立てます。例：

a {
  top: red;
}

top プロパティは、<length>、<percentage>、または auto キーワードを受け入れます。ルールは、red が <color> であるため、フラグを立てます。

多くの人がこのルールをリクエストしており、CSS でのエラーの回避に役立つルールをさらに追加する予定です。

設定オブジェクトで有効にするには、次のようにします。

{
  "extends": ["stylelint-config-standard"],
  "rules": {
+   "declaration-property-value-no-unknown": true
    ..
   }
}

このルールは、CSSTree とその 600 以上のプロパティ、350 以上のタイプ、100 以上の関数を含む構文辞書を使用します。 mdn-data またはCSSTree のパッチファイルを更新することで、辞書のギャップを特定して埋めるのに役立ちます。

CSS 仕様にない値を使用する場合は、ルールのセカンダリオプションを使用して、ルールをより寛容にすることができます。以下のいずれかを行うことができます。

プロパティまたは値を完全に無視する
プロパティと値の構文を拡張する

後者は、特定の例外のみが許可されるようにします。

現在stylelint-csstree-validator プラグインを使用している場合は、プラグインを at ルール名とプレリュードのチェックのみに制限することで、新しいルールと並行して引き続き使用できます。

{
  "rules": {
    "csstree/validator": [true, {
+      "ignoreProperties": ["/.+/"]
    }]
  }
}

破壊的な変更

3つの破壊的な変更も影響する可能性があります。

processors 設定プロパティが削除されました
Node.js 12 のサポートが削除されました
overrides.extends の動作が変更されました

`processors` 設定プロパティの削除

プロセッサは、Markdown、HTML、CSS-in-JS などの CSS のコンテナをサポートするための最初の試みでした。その後、プロセッサのいくつかの欠点、たとえば、--fix オプションとの非互換性を修正するために、カスタム構文を導入しました。

postcss-css-in-js カスタム構文も非推奨にしました。 CSS-in-JS ライブラリと構文は非常に多く、それぞれに構文のバリエーションがあるため、すべての CSS-in-JS ライブラリと構文をサポートしようとする一枚岩のカスタム構文を維持することはできませんでした。

設定オブジェクトから processors プロパティを削除し、ライブラリ固有または構文固有（例：テンプレートリテラル）のカスタム構文を使用する必要があります。

たとえば、styled-components を使用する場合は、次のようにします。

{
- "processors": ["stylelint-processor-styled-components"],
+ "customSyntax": "postcss-styled-syntax",
  "rules": { .. }
}

他のカスタム構文は次のとおりです。

Awesome Stylelint に、それらの完全なリストがあります。

新しいカスタム構文を作成する場合は、プルリクエストを送信してAwesome Stylelint を更新し、他の人がそれを見つけることができるようにしてください。たとえば、オブジェクトベースの CSS-in-JS ライブラリであるStitches とvanilla-extract には構文が必要です。

Node.js 12 のサポートの削除

Node.js 12 はサポート終了に達しました。依存関係の一部を更新できるように、Node.js 12 のサポートを削除しました。 Node.js の次のバージョン以降を使用する必要があります。

14.13.1
16.0.0
18.0.0

`overrides.extends` の動作の変更

overrides.plugins との一貫性を保つため、overrides.extends の動作を置き換えるのではなくマージするように変更しました。

以前の動作を維持したい場合は、設定を次のように変更する必要があります。

{
- "extends": ["config-a"],
  "overrides": [
    {
      "files": ["*.module.css"],
      "extends": ["config-b"]
    },
+   {
+     "files": ["*.css"],
+     "extends": ["config-a"]
+   }
  ]
}

15.0.0 への移行

重要な変更​

スタイルに関するルールの非推奨化​

declaration-property-value-no-unknown ルールの追加​

破壊的な変更​

processors 設定プロパティの削除​

Node.js 12 のサポートの削除​

overrides.extends の動作の変更​