diff --git a/.changeset/modern-css-keywords.md b/.changeset/modern-css-keywords.md new file mode 100644 index 000000000000..7d01a9f3b5ac --- /dev/null +++ b/.changeset/modern-css-keywords.md @@ -0,0 +1,11 @@ +--- +"@biomejs/biome": patch +--- + +Added support for modern CSS properties, pseudo-classes, and pseudo-elements. + +New known properties: `dynamic-range-limit`, `overlay`, `reading-flow`, `reading-order`, `scroll-marker-group`, `scroll-target-group`. + +New pseudo-elements: `::checkmark`, `::column`, `::picker`, `::picker-icon`, `::scroll-button`, `::scroll-marker`, `::scroll-marker-group`. + +New pseudo-classes: `:active-view-transition-type`, `:has-slotted`, `:target-after`, `:target-before`, `:target-current`. diff --git a/crates/biome_css_analyze/src/keywords.rs b/crates/biome_css_analyze/src/keywords.rs index 45286282cb99..8dbf5fa9c39d 100644 --- a/crates/biome_css_analyze/src/keywords.rs +++ b/crates/biome_css_analyze/src/keywords.rs @@ -851,8 +851,10 @@ pub const VENDOR_SPECIFIC_PSEUDO_ELEMENTS: [&str; 66] = [ pub const SHADOW_TREE_PSEUDO_ELEMENTS: [&str; 1] = ["part"]; -pub const OTHER_PSEUDO_ELEMENTS: [&str; 22] = [ +pub const OTHER_PSEUDO_ELEMENTS: [&str; 29] = [ "backdrop", + "checkmark", + "column", "content", "cue", "details-content", @@ -860,8 +862,13 @@ pub const OTHER_PSEUDO_ELEMENTS: [&str; 22] = [ "grammar-error", "highlight", "marker", + "picker", + "picker-icon", "placeholder", "prefix", + "scroll-button", + "scroll-marker", + "scroll-marker-group", "search-text", "selection", "shadow", @@ -930,9 +937,10 @@ pub const RESOURCE_STATE_PSEUDO_CLASSES: [&str; 7] = [ "volume-locked", ]; -pub const OTHER_PSEUDO_CLASSES: [&str; 52] = [ +pub const OTHER_PSEUDO_CLASSES: [&str; 57] = [ "active", "active-view-transition", + "active-view-transition-type", "any-link", "autofill", "blank", @@ -951,6 +959,7 @@ pub const OTHER_PSEUDO_CLASSES: [&str; 52] = [ "fullscreen", "fullscreen-ancestor", "future", + "has-slotted", "host", "host-context", "hover", @@ -977,6 +986,9 @@ pub const OTHER_PSEUDO_CLASSES: [&str; 52] = [ "scope", "state", "target", + "target-after", + "target-before", + "target-current", "unresolved", "user-invalid", "user-valid", @@ -1156,6 +1168,7 @@ pub const KNOWN_PROPERTIES: &[&str] = &[ "direction", "display", "dominant-baseline", + "dynamic-range-limit", "elevation", "empty-cells", "field-sizing", @@ -1374,6 +1387,7 @@ pub const KNOWN_PROPERTIES: &[&str] = &[ "overflow-wrap", "overflow-x", "overflow-y", + "overlay", "overscroll-behavior", "overscroll-behavior-block", "overscroll-behavior-inline", @@ -1416,6 +1430,8 @@ pub const KNOWN_PROPERTIES: &[&str] = &[ "print-color-adjust", "property-name", "quotes", + "reading-flow", + "reading-order", "region-fragment", "resize", "rest", @@ -1443,6 +1459,7 @@ pub const KNOWN_PROPERTIES: &[&str] = &[ "scroll-margin-left", "scroll-margin-right", "scroll-margin-top", + "scroll-marker-group", "scroll-padding", "scroll-padding-block", "scroll-padding-block-end", @@ -1458,6 +1475,7 @@ pub const KNOWN_PROPERTIES: &[&str] = &[ "scroll-snap-stop", "scroll-snap-type", "scroll-start-target", + "scroll-target-group", "scroll-timeline", "scroll-timeline-axis", "scroll-timeline-name", diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css index 58e6f0f84055..104fca6a28f1 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css @@ -68,6 +68,14 @@ a { color: yellow; } +/* Scroll and modern CSS properties */ +a { scroll-marker-group: after; } +a { scroll-target-group: auto; } +a { reading-flow: flex-visual; } +a { reading-order: 1; } +a { overlay: auto; } +a { dynamic-range-limit: standard; } + /* View Transition navigation property (should not be flagged) */ view-transition { navigation: auto; diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap index e8d2f88d7b43..b1eeb3b7e98a 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.css.snap @@ -74,6 +74,14 @@ a { color: yellow; } +/* Scroll and modern CSS properties */ +a { scroll-marker-group: after; } +a { scroll-target-group: auto; } +a { reading-flow: flex-visual; } +a { reading-order: 1; } +a { overlay: auto; } +a { dynamic-range-limit: standard; } + /* View Transition navigation property (should not be flagged) */ view-transition { navigation: auto; diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css index 8c3a233ecf22..eb7b81ba4956 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css @@ -40,3 +40,8 @@ a:defined { } dialog:open {} custom-selector:state(checked) {} :active-view-transition * { transition-duration: 0s; } +::scroll-marker:target-current {} +::scroll-marker:target-before {} +::scroll-marker:target-after {} +slot:has-slotted {} +html:active-view-transition-type(slide) {} diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css.snap index 5bd836a78212..402a326437ff 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css.snap +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoClass/valid.css.snap @@ -46,6 +46,11 @@ a:defined { } dialog:open {} custom-selector:state(checked) {} :active-view-transition * { transition-duration: 0s; } +::scroll-marker:target-current {} +::scroll-marker:target-before {} +::scroll-marker:target-after {} +slot:has-slotted {} +html:active-view-transition-type(slide) {} ``` diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css index 42141beef5f9..9d65adc2fcca 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css @@ -36,3 +36,10 @@ a::part(shadow-part) { } position: absolute; } details::details-content {} +select::picker(select) {} +option::checkmark {} +select::picker-icon {} +.carousel::scroll-marker {} +.carousel::scroll-marker-group {} +.carousel::scroll-button(inline-start) {} +.multicol::column {} diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css.snap index 7ca7ef570a00..37240c43cfa4 100644 --- a/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css.snap +++ b/crates/biome_css_analyze/tests/specs/correctness/noUnknownPseudoElement/valid.css.snap @@ -42,6 +42,13 @@ a::part(shadow-part) { } position: absolute; } details::details-content {} +select::picker(select) {} +option::checkmark {} +select::picker-icon {} +.carousel::scroll-marker {} +.carousel::scroll-marker-group {} +.carousel::scroll-button(inline-start) {} +.multicol::column {} ```