14.0.0 への移行

このリリースには、破壊的な変更が含まれています。 これらの変更は混乱を招く可能性がありますが、依存関係を最新の状態に保ち、Stylelintにセキュリティ上の問題がないようにするために必要でした。

ユーザー

影響を受ける可能性のある変更は5つあります。

• syntax オプションと構文の自動推論が削除されました。
• Node.js 10 のサポートが終了しました。
• 13.7.0 で非推奨となったルールが削除されました。
• configOverrides オプションが削除されました。
• function-calc-no-invalid ルールが削除されました。

設定ファイルを更新する必要がある場合は、.stylelintcache ファイルも削除する必要がある場合があります。

syntax オプションと構文の自動推論

Stylelint は、以下の構文をサポートしなくなりました。

• SCSS、Sass、Less、SugarSS などの CSS 類似言語を解析する構文
• HTML、Markdown、CSS-in-JS オブジェクト & テンプレートリテラルからスタイルを抽出する構文

CSS ファイル以外を Stylelint で lint する場合は、これらの構文をインストールして設定する必要があります。適切な PostCSS 構文 を含む共有設定を 拡張する ことをお勧めします。たとえば、Stylelint を使用して SCSS を lint する場合は、stylelint-config-standard-scss 共有設定 を拡張できます。

まず、共有設定を依存関係としてインストールします。

npm install --save-dev stylelint-config-standard-scss

次に、設定オブジェクト を更新して使用します。

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

この共有設定は、Stylelint を SCSS と互換性を持つように拡張します。組み込みルール を SCSS 用に設定し、postcss-scss 構文 と stylelint-scss プラグイン (SCSS 固有のルールのコレクション) を含みます。

各言語用に提供されている他の共有設定があります。

• stylelint-config-recommended-vue ... Vue 用の共有設定
• stylelint-config-html ... HTML、XML、Vue、Svelte、PHP の解析を有効にする共有設定

好みの言語またはライブラリ用の共有設定がない場合は、適切な PostCSS 構文 を自分でインストールし、設定オブジェクトで使用できるようになった customSyntax オプション を使用できます。

たとえば、SugarSS を lint するには、

まず、sugarss 構文 を依存関係としてインストールします。

npm install --save-dev sugarss

次に、設定オブジェクトを更新して使用します。

{
  "customSyntax": "sugarss",
  "rules": {
    ..
  }
}

他の言語および埋め込みスタイルについては、以下の PostCSS 構文 をお勧めします。

• Less 言語 (.less) は postcss-less を使用します。
• Sass 言語 (.sass) は postcss-sass を使用します。
• CSS-in-JS 埋め込み (.js、.jsx、.ts など) は @stylelint/postcss-css-in-js を使用します。
• HTML、XML、および HTML 類似の埋め込み (.html、.xml、.svelte、.vue など) は postcss-html を使用します。
• Markdown 埋め込み (.md、.markdown など) は postcss-markdown を使用します。

(@stylelint/postcss-css-in-js パッケージには 問題があります。将来的には、1 つのライブラリのみに焦点を当てたより小さな構文を支持して非推奨となる可能性があります ( この issue を参照)。)

複数のスタイリング言語を lint する場合は、新しい overrides プロパティ を使用できます。たとえば、CSS と SugarSS の両方を lint するには、設定オブジェクトを更新して以下を含めます。

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["**/*.sss"],
      "customSyntax": "sugarss",
      "rules": {
        "block-closing-brace-empty-line-before": null,
        "block-closing-brace-newline-after": null,
        "block-closing-brace-newline-before": null,
        "block-closing-brace-space-before": null,
        "block-opening-brace-newline-after": null,
        "block-opening-brace-space-after": null,
        "block-opening-brace-space-before": null,
        "declaration-block-semicolon-newline-after": null,
        "declaration-block-semicolon-space-after": null,
        "declaration-block-semicolon-space-before": null,
        "declaration-block-trailing-semicolon": null
      }
    }
  ]
}

これは、公式の標準設定 を拡張し、overrides プロパティを使用して customSyntax プロパティを設定し、SugarSS ファイルの中括弧とセミコロンをチェックするルールを無効にします。

その後、Stylelint を使用して CSS ファイルと SugarSS ファイルの両方を lint できます。

npx stylelint "**/*.{css,sss}"

Node.js 10

Node.js 10 のサポートは終了しました。以下のバージョン以上の Node.js を使用する必要があります。

• 12.20.0
• 14.13.1
• 16.0.0

13.7.0 で非推奨となったルール

13.7.0 で非推奨となったルールは削除されました。13.7.0 の CHANGELOG エントリの代替案のリスト を参照して、代わりにそれらを使用する必要があります。

configOverrides オプション

configOverrides オプションは削除されました。代わりに、設定オブジェクトの overrides プロパティ を使用してください。

function-calc-no-invalid ルール

function-calc-no-invalid は削除されました。設定オブジェクトから削除する必要があります。

プラグイン作者

影響を受ける可能性のある変更は3つあります。

• stylelint で PostCSS バージョン 8 が使用されるようになりました。
• disableFix セカンダリオプション が追加されました。
• TypeScript 型定義がパッケージに追加されました。

PostCSS 8

PostCSS バージョン 8 でパーサーの動作が変更されました。 以前は Rule として解析されていたものが、現在は Declaration として解析されるようになりました。

foo: {
  bar: baz;
}

プラグインがこの構造を対象としている場合は、ロジックを更新する必要があります。

stylelint では PostCSS バージョン 8 が使用されていますが、新しい Visitor API を使用することはできません。Stylelint プラグインは Stylelint 自体によって Once を使用するように変換されるためです。引き続き walk* API を使用する必要があります。

disableFix セカンダリオプション

以前は、プラグイン作者にこのオプションを提供することを提案していました。現在は Stylelint 自体で使用できるようになったため、プラグインからこのオプションを削除する必要があります。

組み込みの TypeScript 型定義

stylelint パッケージは、独自の TypeScript 型定義をエクスポートするようになりました。@types/stylelint パッケージを使用している場合は、依存関係から削除する必要があります。