則詳解：selector-pseudo-element-no-unknown —— 禁止未知偽元素選擇器)
代碼質(zhì)量靜態(tài)分析前端【免費下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項目地址https://gitcode.com/gh_mirrors/st/stylelint點擊查看免費下載selector-pseudo-element-no-unknown是 stylelint 內(nèi)置的核心規(guī)則之一用于在樣式表中攔截所有未被 CSS 規(guī)范收錄的偽元素選擇器如a::pseudo {}同時自動放行廠商前綴偽元素如::-moz-placeholder。本文將基于該規(guī)則在 stylelint 倉庫中的官方文檔 README.md 展開結(jié)合其 規(guī)則實現(xiàn)、已知偽元素清單 與 單元測試 三個層面的源碼證據(jù)講透它“已知/未知”的判定標準、兩種配置選項的完整寫法以及底層判定流程。讀完你可以直接在自己的 stylelint 配置中落地該規(guī)則并能按需用ignorePseudoElements擴展自定義偽元素白名單。規(guī)則概覽它檢查什么、又放過什么先看官方文檔給出的規(guī)則示意圖a::before {} /** ↑ * This pseudo-element selector */規(guī)則的核心語義包含三條關鍵約定已知范圍 CSS 規(guī)范全集凡是在 CSS 規(guī)范CSS Specifications中定義過的偽元素包括最新到 Editors Draft編輯器草案階段的內(nèi)容都被視為“已知”不會報錯。廠商前綴一律忽略帶-webkit-、-moz-、-ms-等廠商前綴的偽元素選擇器不會被該規(guī)則檢查原因見下文源碼分析因此input::-moz-placeholder這類寫法天然通過。只針對偽元素不針對偽類偽類:hover、:focus等單冒號由selector-pseudo-class-no-unknown等規(guī)則負責本規(guī)則只關心雙冒號::開頭的偽元素詳見實現(xiàn)中value.slice(0, 2) ! ::的判斷。此外該規(guī)則支持1 個 message 參數(shù)見 配置文檔 message 說明即被判定為未知的那個偽元素本身可用于自定義報錯文案。啟用方式與主選項true在 stylelint 配置中開啟該規(guī)則只需將主選項設為true{ selector-pseudo-element-no-unknown: true }視為問題的寫法會被報錯以下三種寫法都會觸發(fā)Unknown pseudo-element selector警告a::pseudo {}a::PSEUDO {}a::element {}注意第二個例子大小寫不敏感地判定“未知”。::PSEUDO與::pseudo同樣會被拒絕因為源碼最終用name.toLowerCase()去查已知表而pseudo本身不在已知清單里無論怎么寫大小寫都通不過。不會被視為問題的寫法a:before {}a::before {}::selection {}input::-moz-placeholder {}這里的判定要點a:before是單冒號的舊式偽元素寫法CSS 1/2 時代合法因為不滿足“雙冒號”前提直接被放行a::before、::selection都在已知偽元素清單內(nèi)input::-moz-placeholder帶-moz-前綴命中“忽略廠商前綴”約定?？蛇x次選項ignorePseudoElements自定義白名單當項目里使用規(guī)范之外的自定義偽元素例如 Web Components 場景時可用次選項把特定名字加入白名單{ ignorePseudoElements: [array, of, pseudo-elements, /regex/] }數(shù)組元素既可以是普通字符串精確匹配也可以是以/包裹的正則表達式字符串正則匹配。完整示例{ selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [/^--my-/, --pseudo-element] } ] }配置后以下寫法都不再報錯a::--my-pseudo {}a::--my-other-pseudo {}a::--pseudo-element {}測試用例tests/index.mjs中對[pseudo, /^my-/, /foo/i]的驗證進一步揭示了匹配細節(jié)a::pseudo字符串精確匹配? 放行a::my-pseudo正則/^my-/前綴匹配? 放行a::FOO-pseudo正則/foo/i大小寫不敏感? 放行a::pSeUdO、a::PSEUDO、a::MY-other-pseudo、a::not-my-pseudo? 仍被拒絕——其中::MY-other-pseudo之所以被拒是因為匹配發(fā)生在去掉::前綴之后的名字MY-other-pseudo上而正則/^my-/區(qū)分大小寫首字母大寫 M 無法匹配小寫my-。若要放行需寫成/^my-/i或在正則里同時覆蓋大寫形式。深入源碼一條未知偽元素的完整判定流程規(guī)則實現(xiàn)位于 index.mjs整個判定可拆成六個步驟選項校驗validateOptions校驗主選項與次選項ignorePseudoElements只接受字符串或正則[isString, isRegExp]且次選項可缺省optional: true。校驗邏輯見 validateOptions.mjs配置不合法時會以invalidOption類型告警?？焖龠^濾root.walkRules(mayIncludeRegexes.pseudo, ...)只遍歷含冒號的規(guī)則mayIncludeRegexes.pseudo /:/見 regexes.mjs是一個性能優(yōu)化——不含冒號的規(guī)則直接跳過無需進入后續(xù)解析。標準語法過濾isStandardSyntaxRule和isStandardSyntaxSelector兩層把關把 SCSS/Less 插值如::#{$variable}、占位符選擇器、Less mixin 等非標準語法排除在外判定細節(jié)見 isStandardSyntaxSelector.mjs。偽類分流parseSelector(...).walkPseudos(...)遍歷所有偽選擇器后先檢查value.slice(0, 2) ! ::——單冒號的偽類直接 return 放行只有雙冒號的偽元素進入下一步。白名單與廠商前綴先看optionsMatches(secondaryOptions, ignorePseudoElements, pseudoNode.value.slice(2))是否命中白名單實現(xiàn)見 optionsMatches.mjs再看vendor.prefix(name)是否提取到廠商前綴或pseudoElements.has(name.toLowerCase())是否命中已知表三者任一成立即放行。報告問題都不滿足時調(diào)用report()用pseudoNode.sourceIndex與index value.length計算告警區(qū)間消息為Unknown pseudo-element selector ${selector}并統(tǒng)一追加規(guī)則名后綴(selector-pseudo-element-no-unknown)見 ruleMessages.mjs。廠商前綴“一律忽略”的實現(xiàn)原理為什么文檔說“This rule ignores vendor-prefixed pseudo-element selectors”關鍵在于 vendor.mjs 中的prefix()prefix(prop) { const match prop.match(/^(-\w-)/); return match ? (match[0] || ) : ; }只要偽元素名以-xxx-開頭例如-moz-placeholder、-webkit-scrollbar就會提取出前綴并直接放行。注意這意味著即使是完全不存在的廠商前綴寫法如input::-moz-test也不會報錯——這一點在測試用例中專門有input::-moz-test { }被接受的確證。已知偽元素清單從規(guī)范到代碼判定“已知”的最終依據(jù)是 selectors.mjs 中導出的pseudoElements集合它由uniteSets合并以下幾組構(gòu)成分組成員說明levelOneAndTwoPseudoElementsbefore、after、first-line、first-letterCSS 1/2 時代的四個經(jīng)典偽元素允許單冒號舊寫法shadowTreePseudoElementspartShadow DOM 偽元素配合::part(...)使用deprecatedPseudoElementscontent、shadow已被廢棄但仍被規(guī)范記錄的偽元素vendorSpecificPseudoElements-moz-focus-inner、-ms-clear、-webkit-scrollbar系列等數(shù)十個各瀏覽器私有偽元素雖然這些會被vendor.prefix提前放行仍保留在集合中其余現(xiàn)代偽元素backdrop、cue、file-selector-button、grammar-error、highlight、marker、placeholder、selection、slotted、spelling-error、target-text、view-transition系列、scroll-marker系列等含編輯草案階段的較新提案因此::selection、::marker、::placeholder、::spelling-error、::grammar-error、::search-text、::view-transition以及::scroll-marker、::picker(select)、::part(shadow-part)等都能通過測試用例中均有對應斷言。邊界行為與測試佐證tests/index.mjs 覆蓋了不少容易被忽略的邊界場景大小寫容忍a:Before、a::bEfOrE、a::BEFORE等任意大小寫組合都被接受查表前統(tǒng)一toLowerCase()復雜選擇器a:hover::before、選擇器列表a,\nb .foo::before正常處理未知偽元素按行定位a:hover::element的告警定位在column: 8b .foo::error定位在line: 2, column: 9非標準語法跳過使用postcss-scss自定義語法時::#{$variable}、a::#{$variable}等 SCSS 插值寫法不被檢查行內(nèi)禁用生效/* stylelint-disable-next-line selector-pseudo-element-no-unknown */注釋可精確抑制下一行的::pseudo報錯一處規(guī)則多報同一選擇器列表中出現(xiàn)多個未知偽元素時逐一出報例如 5 行代碼中 3 處a::pseudo產(chǎn)生 3 條 warning行號列號一一對應。實際配置示例把以上內(nèi)容落地到一個.stylelintrc.json{ rules: { selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [ --my-custom-element, /^x-/i ] } ] } }此配置下::before、::selection、::-webkit-scrollbar正常通過::pseudo、::element、::PSEUDO報錯::--my-custom-element與::x-foo、::X-BAR正則i標志被白名單放行。小結(jié)selector-pseudo-element-no-unknown的設計思路清晰以 CSS 規(guī)范含編輯草案為“已知”基線用vendor.prefix兜底廠商前綴用ignorePseudoElements為用戶自定義偽元素留出擴展口。理解它的判定鏈路雙冒號前提 → 標準語法過濾 → 白名單/前綴/已知表三層命中你就能準確預判任意偽元素寫法的檢查結(jié)果并在團隊規(guī)范中放心啟用它來攔截拼寫錯誤與不存在的偽元素。若需要檢查單冒號偽類可配合selector-pseudo-class-no-unknown一起使用兩者覆蓋完整的偽選擇器檢查面。贊分享代碼質(zhì)量靜態(tài)分析前端【免費下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項目地址https://gitcode.com/gh_mirrors/st/stylelint點擊查看免費下載相關推薦Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析 導讀 cilium operator alibabaclou代碼質(zhì)量靜態(tài)分析前端eslint-plugin-unicorn 規(guī)則詳解no-unknown-pseudo-selectors 校驗未知 CSS 偽類與偽元素eslint plugin unicorn 規(guī)則詳解no unknown pseudo selectors 校驗未知 CSS 偽類與偽元素 導讀 no unkLint代碼質(zhì)量cross-en-it-roberta-sentence-transformer常見問題解答10個開發(fā)者必知的技術要點cross en it roberta sentence transformer常見問題解答10個開發(fā)者必知的技術要點 cross en it roberta代碼質(zhì)量靜態(tài)分析前端上一篇React Native FBSDK Next用戶資料獲取終極指南如何安全訪問用戶信息下一篇7步搞定深度學習數(shù)據(jù)預處理Pandas特征工程實戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 stylelint 規(guī)則詳解：selector-pseudo-element-no-unknown —— 禁止未知偽元素選擇器
代碼質(zhì)量靜態(tài)分析前端【免費下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項目地址https://gitcode.com/gh_mirrors/st/stylelint點擊查看免費下載selector-pseudo-element-no-unknown是 stylelint 內(nèi)置的核心規(guī)則之一用于在樣式表中攔截所有未被 CSS 規(guī)范收錄的偽元素選擇器如a::pseudo {}同時自動放行廠商前綴偽元素如::-moz-placeholder。本文將基于該規(guī)則在 stylelint 倉庫中的官方文檔 README.md 展開結(jié)合其 規(guī)則實現(xiàn)、已知偽元素清單 與 單元測試 三個層面的源碼證據(jù)講透它“已知/未知”的判定標準、兩種配置選項的完整寫法以及底層判定流程。讀完你可以直接在自己的 stylelint 配置中落地該規(guī)則并能按需用ignorePseudoElements擴展自定義偽元素白名單。規(guī)則概覽它檢查什么、又放過什么先看官方文檔給出的規(guī)則示意圖a::before {} /** ↑ * This pseudo-element selector */規(guī)則的核心語義包含三條關鍵約定已知范圍 CSS 規(guī)范全集凡是在 CSS 規(guī)范CSS Specifications中定義過的偽元素包括最新到 Editors Draft編輯器草案階段的內(nèi)容都被視為“已知”不會報錯。廠商前綴一律忽略帶-webkit-、-moz-、-ms-等廠商前綴的偽元素選擇器不會被該規(guī)則檢查原因見下文源碼分析因此input::-moz-placeholder這類寫法天然通過。只針對偽元素不針對偽類偽類:hover、:focus等單冒號由selector-pseudo-class-no-unknown等規(guī)則負責本規(guī)則只關心雙冒號::開頭的偽元素詳見實現(xiàn)中value.slice(0, 2) ! ::的判斷。此外該規(guī)則支持1 個 message 參數(shù)見 配置文檔 message 說明即被判定為未知的那個偽元素本身可用于自定義報錯文案。啟用方式與主選項true在 stylelint 配置中開啟該規(guī)則只需將主選項設為true{ selector-pseudo-element-no-unknown: true }視為問題的寫法會被報錯以下三種寫法都會觸發(fā)Unknown pseudo-element selector警告a::pseudo {}a::PSEUDO {}a::element {}注意第二個例子大小寫不敏感地判定“未知”。::PSEUDO與::pseudo同樣會被拒絕因為源碼最終用name.toLowerCase()去查已知表而pseudo本身不在已知清單里無論怎么寫大小寫都通不過。不會被視為問題的寫法a:before {}a::before {}::selection {}input::-moz-placeholder {}這里的判定要點a:before是單冒號的舊式偽元素寫法CSS 1/2 時代合法因為不滿足“雙冒號”前提直接被放行a::before、::selection都在已知偽元素清單內(nèi)input::-moz-placeholder帶-moz-前綴命中“忽略廠商前綴”約定?？蛇x次選項ignorePseudoElements自定義白名單當項目里使用規(guī)范之外的自定義偽元素例如 Web Components 場景時可用次選項把特定名字加入白名單{ ignorePseudoElements: [array, of, pseudo-elements, /regex/] }數(shù)組元素既可以是普通字符串精確匹配也可以是以/包裹的正則表達式字符串正則匹配。完整示例{ selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [/^--my-/, --pseudo-element] } ] }配置后以下寫法都不再報錯a::--my-pseudo {}a::--my-other-pseudo {}a::--pseudo-element {}測試用例tests/index.mjs中對[pseudo, /^my-/, /foo/i]的驗證進一步揭示了匹配細節(jié)a::pseudo字符串精確匹配? 放行a::my-pseudo正則/^my-/前綴匹配? 放行a::FOO-pseudo正則/foo/i大小寫不敏感? 放行a::pSeUdO、a::PSEUDO、a::MY-other-pseudo、a::not-my-pseudo? 仍被拒絕——其中::MY-other-pseudo之所以被拒是因為匹配發(fā)生在去掉::前綴之后的名字MY-other-pseudo上而正則/^my-/區(qū)分大小寫首字母大寫 M 無法匹配小寫my-。若要放行需寫成/^my-/i或在正則里同時覆蓋大寫形式。深入源碼一條未知偽元素的完整判定流程規(guī)則實現(xiàn)位于 index.mjs整個判定可拆成六個步驟選項校驗validateOptions校驗主選項與次選項ignorePseudoElements只接受字符串或正則[isString, isRegExp]且次選項可缺省optional: true。校驗邏輯見 validateOptions.mjs配置不合法時會以invalidOption類型告警?？焖龠^濾root.walkRules(mayIncludeRegexes.pseudo, ...)只遍歷含冒號的規(guī)則mayIncludeRegexes.pseudo /:/見 regexes.mjs是一個性能優(yōu)化——不含冒號的規(guī)則直接跳過無需進入后續(xù)解析。標準語法過濾isStandardSyntaxRule和isStandardSyntaxSelector兩層把關把 SCSS/Less 插值如::#{$variable}、占位符選擇器、Less mixin 等非標準語法排除在外判定細節(jié)見 isStandardSyntaxSelector.mjs。偽類分流parseSelector(...).walkPseudos(...)遍歷所有偽選擇器后先檢查value.slice(0, 2) ! ::——單冒號的偽類直接 return 放行只有雙冒號的偽元素進入下一步。白名單與廠商前綴先看optionsMatches(secondaryOptions, ignorePseudoElements, pseudoNode.value.slice(2))是否命中白名單實現(xiàn)見 optionsMatches.mjs再看vendor.prefix(name)是否提取到廠商前綴或pseudoElements.has(name.toLowerCase())是否命中已知表三者任一成立即放行。報告問題都不滿足時調(diào)用report()用pseudoNode.sourceIndex與index value.length計算告警區(qū)間消息為Unknown pseudo-element selector ${selector}并統(tǒng)一追加規(guī)則名后綴(selector-pseudo-element-no-unknown)見 ruleMessages.mjs。廠商前綴“一律忽略”的實現(xiàn)原理為什么文檔說“This rule ignores vendor-prefixed pseudo-element selectors”關鍵在于 vendor.mjs 中的prefix()prefix(prop) { const match prop.match(/^(-\w-)/); return match ? (match[0] || ) : ; }只要偽元素名以-xxx-開頭例如-moz-placeholder、-webkit-scrollbar就會提取出前綴并直接放行。注意這意味著即使是完全不存在的廠商前綴寫法如input::-moz-test也不會報錯——這一點在測試用例中專門有input::-moz-test { }被接受的確證。已知偽元素清單從規(guī)范到代碼判定“已知”的最終依據(jù)是 selectors.mjs 中導出的pseudoElements集合它由uniteSets合并以下幾組構(gòu)成分組成員說明levelOneAndTwoPseudoElementsbefore、after、first-line、first-letterCSS 1/2 時代的四個經(jīng)典偽元素允許單冒號舊寫法shadowTreePseudoElementspartShadow DOM 偽元素配合::part(...)使用deprecatedPseudoElementscontent、shadow已被廢棄但仍被規(guī)范記錄的偽元素vendorSpecificPseudoElements-moz-focus-inner、-ms-clear、-webkit-scrollbar系列等數(shù)十個各瀏覽器私有偽元素雖然這些會被vendor.prefix提前放行仍保留在集合中其余現(xiàn)代偽元素backdrop、cue、file-selector-button、grammar-error、highlight、marker、placeholder、selection、slotted、spelling-error、target-text、view-transition系列、scroll-marker系列等含編輯草案階段的較新提案因此::selection、::marker、::placeholder、::spelling-error、::grammar-error、::search-text、::view-transition以及::scroll-marker、::picker(select)、::part(shadow-part)等都能通過測試用例中均有對應斷言。邊界行為與測試佐證tests/index.mjs 覆蓋了不少容易被忽略的邊界場景大小寫容忍a:Before、a::bEfOrE、a::BEFORE等任意大小寫組合都被接受查表前統(tǒng)一toLowerCase()復雜選擇器a:hover::before、選擇器列表a,\nb .foo::before正常處理未知偽元素按行定位a:hover::element的告警定位在column: 8b .foo::error定位在line: 2, column: 9非標準語法跳過使用postcss-scss自定義語法時::#{$variable}、a::#{$variable}等 SCSS 插值寫法不被檢查行內(nèi)禁用生效/* stylelint-disable-next-line selector-pseudo-element-no-unknown */注釋可精確抑制下一行的::pseudo報錯一處規(guī)則多報同一選擇器列表中出現(xiàn)多個未知偽元素時逐一出報例如 5 行代碼中 3 處a::pseudo產(chǎn)生 3 條 warning行號列號一一對應。實際配置示例把以上內(nèi)容落地到一個.stylelintrc.json{ rules: { selector-pseudo-element-no-unknown: [ true, { ignorePseudoElements: [ --my-custom-element, /^x-/i ] } ] } }此配置下::before、::selection、::-webkit-scrollbar正常通過::pseudo、::element、::PSEUDO報錯::--my-custom-element與::x-foo、::X-BAR正則i標志被白名單放行。小結(jié)selector-pseudo-element-no-unknown的設計思路清晰以 CSS 規(guī)范含編輯草案為“已知”基線用vendor.prefix兜底廠商前綴用ignorePseudoElements為用戶自定義偽元素留出擴展口。理解它的判定鏈路雙冒號前提 → 標準語法過濾 → 白名單/前綴/已知表三層命中你就能準確預判任意偽元素寫法的檢查結(jié)果并在團隊規(guī)范中放心啟用它來攔截拼寫錯誤與不存在的偽元素。若需要檢查單冒號偽類可配合selector-pseudo-class-no-unknown一起使用兩者覆蓋完整的偽選擇器檢查面。贊分享代碼質(zhì)量靜態(tài)分析前端【免費下載鏈接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.項目地址https://gitcode.com/gh_mirrors/st/stylelint點擊查看免費下載相關推薦Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析Cilium Operator 的 Hive 依賴檢查與 AlibabaCloud 部署配置全解析 導讀 cilium operator alibabaclou代碼質(zhì)量靜態(tài)分析前端eslint-plugin-unicorn 規(guī)則詳解no-unknown-pseudo-selectors 校驗未知 CSS 偽類與偽元素eslint plugin unicorn 規(guī)則詳解no unknown pseudo selectors 校驗未知 CSS 偽類與偽元素 導讀 no unkLint代碼質(zhì)量cross-en-it-roberta-sentence-transformer常見問題解答10個開發(fā)者必知的技術要點cross en it roberta sentence transformer常見問題解答10個開發(fā)者必知的技術要點 cross en it roberta代碼質(zhì)量靜態(tài)分析前端上一篇React Native FBSDK Next用戶資料獲取終極指南如何安全訪問用戶信息下一篇7步搞定深度學習數(shù)據(jù)預處理Pandas特征工程實戰(zhàn)指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考