From b3e34dc69a02638a660bbfd6e19b54b05ef4968c Mon Sep 17 00:00:00 2001 From: Marc G Date: Fri, 11 Mar 2022 13:40:13 +0100 Subject: [PATCH] Fix false positives/negatives in selector-pseudo-class-no-unknown add ::cue, ::target-text, :unresolved, :picture-in-picture, :window-inactive, :fullscreen-ancestor, etc. remove :focus-ring, :drop typo ::-webkit-resizer https://hg.mozilla.org/mozilla-central/file/tip/layout/style/test/test_non_content_accessible_pseudos.html#l8 https://hg.mozilla.org/mozilla-central/file/tip/layout/style/test/test_selectors.html#l1102 https://trac.webkit.org/changeset/252330/webkit/ keywords: datetime, meter, search, validation, any, drag --- lib/reference/keywordSets.js | 115 ++++++++++++++---- .../selector-pseudo-class-no-unknown/index.js | 12 +- 2 files changed, 95 insertions(+), 32 deletions(-) diff --git a/lib/reference/keywordSets.js b/lib/reference/keywordSets.js index b5ed5abfbf..71be78d43a 100644 --- a/lib/reference/keywordSets.js +++ b/lib/reference/keywordSets.js @@ -157,22 +157,24 @@ keywordSets.levelOneAndTwoPseudoElements = new Set([ 'first-letter', ]); -// These are the ones that require double-colon notation keywordSets.levelThreeAndUpPseudoElements = new Set([ 'before', 'after', 'first-line', 'first-letter', - 'selection', - 'spelling-error', - 'grammar-error', + // These are the ones that require double-colon notation 'backdrop', + 'content', + 'cue', + 'file-selector-button', + 'grammar-error', 'marker', 'placeholder', + 'selection', 'shadow', + 'spelling-error', 'slotted', - 'content', - 'file-selector-button', + 'target-text', ]); keywordSets.shadowTreePseudoElements = new Set(['part']); @@ -180,6 +182,8 @@ keywordSets.shadowTreePseudoElements = new Set(['part']); keywordSets.vendorSpecificPseudoElements = new Set([ '-moz-focus-inner', '-moz-focus-outer', + '-moz-list-bullet', + '-moz-meter-bar', '-moz-placeholder', '-moz-progress-bar', '-moz-range-progress', @@ -199,11 +203,60 @@ keywordSets.vendorSpecificPseudoElements = new Set([ '-ms-tooltip', '-ms-track', '-ms-value', + '-webkit-color-swatch', + '-webkit-color-swatch-wrapper', + '-webkit-calendar-picker-indicator', + '-webkit-clear-button', + '-webkit-date-and-time-value', + '-webkit-datetime-edit', + '-webkit-datetime-edit-ampm-field', + '-webkit-datetime-edit-day-field', + '-webkit-datetime-edit-fields-wrapper', + '-webkit-datetime-edit-hour-field', + '-webkit-datetime-edit-millisecond-field', + '-webkit-datetime-edit-minute-field', + '-webkit-datetime-edit-month-field', + '-webkit-datetime-edit-second-field', + '-webkit-datetime-edit-text', + '-webkit-datetime-edit-week-field', + '-webkit-datetime-edit-year-field', + '-webkit-details-marker', + '-webkit-distributed', + '-webkit-file-upload-button', '-webkit-input-placeholder', + '-webkit-keygen-select', + '-webkit-meter-bar', + '-webkit-meter-even-less-good-value', + '-webkit-meter-inner-element', + '-webkit-meter-optimum-value', + '-webkit-meter-suboptimum-value', '-webkit-progress-bar', + '-webkit-progress-inner-element', '-webkit-progress-value', + '-webkit-search-cancel-button', + '-webkit-search-decoration', + '-webkit-search-results-button', + '-webkit-search-results-decoration', '-webkit-slider-runnable-track', '-webkit-slider-thumb', + '-webkit-textfield-decoration-container', + '-webkit-validation-bubble', + '-webkit-validation-bubble-arrow', + '-webkit-validation-bubble-arrow-clipper', + '-webkit-validation-bubble-heading', + '-webkit-validation-bubble-message', + '-webkit-validation-bubble-text-block', + ...keywordSets.webkitScrollbarPseudoElements, +]); + +keywordSets.webkitScrollbarPseudoElements = new Set([ + '-webkit-resizer', + '-webkit-scrollbar', + '-webkit-scrollbar-button', + '-webkit-scrollbar-corner', + '-webkit-scrollbar-thumb', + '-webkit-scrollbar-track', + '-webkit-scrollbar-track-piece', ]); keywordSets.pseudoElements = uniteSets( @@ -238,22 +291,22 @@ keywordSets.otherPseudoClasses = new Set([ 'default', 'defined', 'disabled', - 'drop', 'empty', 'enabled', 'first-child', 'first-of-type', 'focus', - 'focus-ring', 'focus-within', 'focus-visible', 'fullscreen', + 'fullscreen-ancestor', 'future', 'host', 'host-context', 'hover', 'indeterminate', 'in-range', + 'invalid', 'last-child', 'last-of-type', 'link', @@ -264,6 +317,7 @@ keywordSets.otherPseudoClasses = new Set([ 'past', 'placeholder-shown', 'playing', + 'picture-in-picture', 'paused', 'read-only', 'read-write', @@ -272,35 +326,48 @@ keywordSets.otherPseudoClasses = new Set([ 'scope', 'state', 'target', + 'unresolved', 'user-invalid', 'user-valid', - 'invalid', 'valid', 'visited', + 'window-inactive', // for ::selection (chrome) ]); keywordSets.vendorSpecificPseudoClasses = new Set([ + '-khtml-drag', + '-moz-any', + '-moz-any-link', + '-moz-broken', + '-moz-drag-over', + '-moz-first-node', + '-moz-focusring', + '-moz-full-screen', + '-moz-full-screen-ancestor', + '-moz-last-node', + '-moz-loading', + '-moz-meter-optimum', + '-moz-meter-sub-optimum', + '-moz-meter-sub-sub-optimum', '-moz-placeholder', + '-moz-submit-invalid', + '-moz-suppressed', '-moz-ui-invalid', '-moz-ui-valid', + '-moz-user-disabled', + '-moz-window-inactive', + '-ms-fullscreen', '-ms-input-placeholder', + '-webkit-drag', + '-webkit-any', + '-webkit-any-link', + '-webkit-autofill', + '-webkit-full-screen', + '-webkit-full-screen-ancestor', ]); -// TODO migrate to vendorSpecificPseudoElements -// see #2264 -keywordSets.webkitProprietaryPseudoElements = new Set([ - 'scrollbar', - 'scrollbar-button', - 'scrollbar-track', - 'scrollbar-track-piece', - 'scrollbar-thumb', - 'scrollbar-corner', - 'resize', -]); - -// TODO migrate to vendorSpecificPseudoClasses -// see #2264 -keywordSets.webkitProprietaryPseudoClasses = new Set([ +// https://webkit.org/blog/363/styling-scrollbars/ +keywordSets.webkitScrollbarPseudoClasses = new Set([ 'horizontal', 'vertical', 'decrement', diff --git a/lib/rules/selector-pseudo-class-no-unknown/index.js b/lib/rules/selector-pseudo-class-no-unknown/index.js index 0b0658a058..2772314b2b 100644 --- a/lib/rules/selector-pseudo-class-no-unknown/index.js +++ b/lib/rules/selector-pseudo-class-no-unknown/index.js @@ -92,9 +92,7 @@ const rule = (primary, secondaryOptions) => { let prevPseudoElement = pseudoNode; do { - prevPseudoElement = /** @type {import('postcss-selector-parser').Base} */ ( - prevPseudoElement.prev() - ); + prevPseudoElement = /** @type {import('postcss-selector-parser').Base} */ (prevPseudoElement.prev()); if (prevPseudoElement && prevPseudoElement.value.slice(0, 2) === '::') { break; @@ -102,13 +100,11 @@ const rule = (primary, secondaryOptions) => { } while (prevPseudoElement); if (prevPseudoElement) { - const prevPseudoElementValue = vendor.unprefixed( - prevPseudoElement.value.toLowerCase().slice(2), - ); + const prevPseudoElementValue = prevPseudoElement.value.toLowerCase().slice(2); if ( - keywordSets.webkitProprietaryPseudoElements.has(prevPseudoElementValue) && - keywordSets.webkitProprietaryPseudoClasses.has(name) + keywordSets.webkitScrollbarPseudoElements.has(prevPseudoElementValue) && + keywordSets.webkitScrollbarPseudoClasses.has(name) ) { return; }