跳至主要內容

移轉至 14.0.0

此版本包含重大變更。我們知道這些變更可能會造成中斷，但為了讓我們的相依關係保持最新且 Stylelint 不會有安全性問題，因此有必要進行這些變更。

使用者​

有五項變更可能會影響您

  • syntax 選項和語法的自動推論已移除
  • 已停止支援 Node.js 10
  • 已移除 13.7.0 中已棄用的規則
  • 已移除 configOverrides 選項
  • 已移除 function-calc-no-invalid 規則

如果您需要更新設定檔，您可能也需要刪除 .stylelintcache 檔案。

syntax 選項和語法的自動推斷​

Stylelint 不再包含下列語法

  • 解析類似 CSS 的語言，例如 SCSS、Sass、Less 和 SugarSS
  • 從 HTML、Markdown 和 CSS-in-JS 物件和範本文字中擷取樣式

如果您使用 Stylelint 來檢查 CSS 檔案以外的任何內容，您將需要安裝並設定這些語法。我們建議延伸包含適當PostCSS 語法的共用設定。例如，如果您使用 Stylelint 來檢查 SCSS，您可以延伸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 的規則）。

有其他針對每種語言提供的共用設定

如果沒有針對您偏好的語言或函式庫提供共用設定，您可以自行安裝適當的PostCSS 語法，並使用設定物件中現已提供的customSyntax 選項。

例如，要檢查SugarSS。

首先，將sugarss 語法安裝為相依項

npm install --save-dev sugarss

然後，更新您的設定物件以使用它

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

對於其他語言和嵌入式樣式，我們建議使用下列PostCSS 語法

(@stylelint/postcss-css-in-js 套件 有問題。未來可能會棄用，轉而採用只專注於一個函式庫的較小語法 (請參閱 此問題))。

如果您要檢查多於一種造型語言，則可以使用新的 overrides 屬性。例如，若要檢查 CSS 和 SugarSS，您可以更新設定檔物件，加入

{
  "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 檔案

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 已移除。您應從設定物件中移除它。

外掛作者​

有三個變更可能會影響您

  • stylelint 現在使用 PostCSS 版本 8
  • 已新增 disableFix 次要選項
  • 已將 TypeScript 型別定義新增至套件

PostCSS 8​

PostCSS 版本 8 中，剖析器的行為已變更。下列內容現在剖析為 Declaration，而先前剖析為 Rule

foo: {
  bar: baz;
}

如果您的外掛鎖定此建構，您需要更新邏輯。

儘管 stylelint 使用 PostCSS 版本 8，但您無法使用 新的 Visitor API，因為 Stylelint 外掛會由 Stylelint 本身轉換為使用 Once。您應繼續使用 walk* API。

disableFix 次要選項​

我們先前建議外掛作者提供此選項。它現在已在 Stylelint 本身中提供，您應從外掛中移除該選項。

內建 TypeScript 定義​

stylelint 套件現在匯出它自己的 TypeScript 型別定義。如果您正在使用 @types/stylelint 套件，您應從相依性中移除它。