feat(css): add support for modern CSS properties, pseudo-classes, and pseudo-elements (#9490)

Signed-off-by: will Farrell <willfarrell@proton.me>

Author: willfarrell

.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`.

crates/biome_css_analyze/src/keywords.rs

@@ -851,17 +851,24 @@ 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",
     "file-selector-button",
     "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",

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;

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;

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) {}

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) {}
 
 ```
 

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 {}

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 {}
 
 ```