移轉至 15.0.0
此版本包含重大或重大變更。
重大變更
兩個重大變更可能會影響您
- 已棄用的風格規則
- 新增
declaration-property-value-no-unknown規則
已棄用的風格規則
我們已棄用 76 個強制使用風格慣例的規則
at-rule-name-caseat-rule-name-newline-afterat-rule-name-space-afterat-rule-semicolon-newline-afterat-rule-semicolon-space-beforeblock-closing-brace-empty-line-before區塊結尾大括號後換行區塊結尾大括號前換行區塊結尾大括號後空格區塊結尾大括號前空格區塊起始大括號後換行區塊起始大括號前換行區塊起始大括號後空格區塊起始大括號前空格顏色十六進位碼大小寫宣告驚嘆號後空格宣告驚嘆號前空格宣告區塊分號後換行宣告區塊分號前換行宣告區塊分號後空格宣告區塊分號前空格宣告區塊尾隨分號宣告冒號後換行宣告冒號後空格宣告冒號前空格函式逗號後換行函式逗號前換行函式逗號後空格函式逗號前空格函式最大空行數函式括號內換行函式括號內空格函式後空白縮排換行最大空行數最大行長度媒體功能冒號後空格媒體功能冒號前空格媒體功能名稱大小寫媒體功能括號內空格媒體功能範圍運算子後空格媒體功能範圍運算子前空格媒體查詢列表逗號後換行媒體查詢列表逗號前換行媒體查詢列表逗號後空格媒體查詢列表逗號前空格第一行不為空行尾無空白無多餘分號來源結尾無遺漏換行數字前導零數字無尾隨零屬性大小寫選擇器屬性方括號內空格選擇器屬性運算子後空格選擇器屬性運算子前空格選擇器組合器後空格選擇器組合器前空格選擇器後代組合器無非空格選擇器列表逗號後換行選擇器列表逗號前換行選擇器列表逗號後空格選擇器列表逗號前空格選擇器最大空行數選擇器偽類別大小寫選擇器偽類別括號內空格選擇器偽元素大小寫字串引號Unicode BOM單位大小寫值列表逗號後換行值列表逗號前換行值列表逗號後空格值列表逗號前空格值列表最大空行數
當我們建立這些規則時，美化程式（例如 Prettier）尚未出現。它們現在提供了一種更佳的方式來一致地格式化程式碼，特別是空白。程式碼檢查器和美化程式是互補的工具，可以共同協助您撰寫一致且無錯誤的程式碼。
透過棄用這些規則，我們可以
- 專注於撰寫和維護規則，協助您 避免錯誤 和 強制執行（非樣式）慣例，這兩者都是 Stylelint 獨有的
- 現代化我們的程式碼庫，例如轉移到 ESM，以便我們可以更新相依性並確保 Stylelint 的安全性
已棄用的規則仍會在此版本中運作（並會顯示棄用警告）。在準備下一個主要版本時，我們將從 Stylelint 中移除這些規則，我們建議
- 如果您尚未這麼做，請在您的設定物件中擴充 標準設定
- 從您的設定物件中移除已棄用的規則
{
+ "extends": ["stylelint-config-standard"],
"rules": { .. }
}
此外，您可能不再需要延伸 Prettier 的 Stylelint 設定，因為不應該有衝突的規則
{
- "extends": ["stylelint-config-prettier"],
"rules": { .. }
}
我們已經從 標準設定 的最新版本中移除了已棄用的規則。它仍然可以透過啟用許多 其他強制慣例的規則 來幫助您撰寫一致的 CSS，例如大部分的 *-notation、*-pattern 和 *-quotes 規則。
在 標準設定 中，還有許多其他我們未啟用的規則，您可以在我們的 新指南 中進一步了解如何使用它們來根據您的確切需求自訂 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": ["/.+/"]
}]
}
}
重大變更
三個重大變更也可能影響您
- 移除
processors組態屬性 - 移除對 Node.js 12 的支援
- 變更
overrides.extends行為
移除 processors 組態屬性
處理器是我們首次嘗試支援 CSS 容器，例如 Markdown、HTML 和 CSS-in-JS。我們後來引入了 自訂語法 來修正處理器的部分缺點，例如與 --fix 選項 不相容。
我們也已棄用 postcss-css-in-js 自訂語法。由於有這麼多語法，而且每個語法都有不同的變化，因此無法維護一個試圖支援每個 CSS-in-JS 函式庫和語法的單一自訂語法。
您應該從組態物件中移除 processors 屬性，並改用特定於函式庫或特定於語法（例如範本字串）的 自訂語法。
例如，如果您使用 styled-components
{
- "processors": ["stylelint-processor-styled-components"],
+ "customSyntax": "postcss-styled-syntax",
"rules": { .. }
}
其他自訂語法包括
您可以在 Awesome Stylelint 中找到它們的完整清單。
如果您建立新的自訂語法，請 開啟拉取請求 以更新 Awesome Stylelint，讓其他人可以找到它。例如，Stitches 和 vanilla-extract 需要語法，它們是基於物件的 CSS-in-JS 函式庫。
已移除對 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"]
+ }
]
}