fix(css_semantic): semantic event for css supports at-rule (#4810)

biomejs · Dec 30, 2024 · 6ea885f · 6ea885f
1 parent 802a42e
commit 6ea885f
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -87,6 +87,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
   </Suspense>;
   ```
 
+- `noDuplicateProperties` now throws lint errors properly when we use `@supports` (fix [#4756](https://github.com/biomejs/biome/issues/4756)) Contributed by @mehm8128
+
 ### JavaScript APIs
 
 ### Linter

diff --git a/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/invalid.css b/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/invalid.css
@@ -42,3 +42,20 @@ a { -webkit-border-radius: 12px; -webkit-border-radius: 10px; }
 a { color: red !important; color: blue; }
 
 a { color: red !important; color: blue !important; }
+
+a {
+    @supports (color: pink) {
+        color: pink;
+        color: orange;
+    }
+}
+
+a {
+    @supports (color: pink) {
+        color: pink;
+        &:hover {
+            color: orange;
+            color: black;
+        }
+    }
+}
diff --git a/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/invalid.css.snap b/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/invalid.css.snap
@@ -49,6 +49,23 @@ a { color: red !important; color: blue; }
 
 a { color: red !important; color: blue !important; }
 
+a {
+    @supports (color: pink) {
+        color: pink;
+        color: orange;
+    }
+}
+
+a {
+    @supports (color: pink) {
+        color: pink;
+        &:hover {
+            color: orange;
+            color: black;
+        }
+    }
+}
+
 ```
 
 # Diagnostics
@@ -370,6 +387,7 @@ invalid.css:44:28 lint/nursery/noDuplicateProperties ━━━━━━━━━
   > 44 │ a { color: red !important; color: blue !important; }
        │                            ^^^^^
     45 │ 
+    46 │ a {
   
   i color is already defined here.
   
@@ -378,6 +396,59 @@ invalid.css:44:28 lint/nursery/noDuplicateProperties ━━━━━━━━━
   > 44 │ a { color: red !important; color: blue !important; }
        │     ^^^^^
     45 │ 
+    46 │ a {
+  
+  i Remove or rename the duplicate property to ensure consistent styling.
+  
+
+```
+
+```
+invalid.css:49:9 lint/nursery/noDuplicateProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
+  
+    47 │     @supports (color: pink) {
+    48 │         color: pink;
+  > 49 │         color: orange;
+       │         ^^^^^
+    50 │     }
+    51 │ }
+  
+  i color is already defined here.
+  
+    46 │ a {
+    47 │     @supports (color: pink) {
+  > 48 │         color: pink;
+       │         ^^^^^
+    49 │         color: orange;
+    50 │     }
+  
+  i Remove or rename the duplicate property to ensure consistent styling.
+  
+
+```
+
+```
+invalid.css:58:13 lint/nursery/noDuplicateProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
+  
+    56 │         &:hover {
+    57 │             color: orange;
+  > 58 │             color: black;
+       │             ^^^^^
+    59 │         }
+    60 │     }
+  
+  i color is already defined here.
+  
+    55 │         color: pink;
+    56 │         &:hover {
+  > 57 │             color: orange;
+       │             ^^^^^
+    58 │             color: black;
+    59 │         }
   
   i Remove or rename the duplicate property to ensure consistent styling.
   

diff --git a/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/valid.css b/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/valid.css
@@ -15,6 +15,21 @@ a { color: pink; @media { color: orange; &::before { color: black; } } }
 
 a { --custom-property: 0; --custom-property: 1; }
 
+a {
+    @supports (color: pink) {
+        color: pink;
+    }
+}
+
+a {
+    @supports (color: pink) {
+        color: pink;
+        &:hover {
+            color: orange;
+        }
+    }
+}
+
 /* TODO */
 /* @fontface {
     src: url(font.eof);

diff --git a/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/valid.css.snap b/crates/biome_css_analyze/tests/specs/nursery/noDuplicateProperties/valid.css.snap
@@ -21,6 +21,21 @@ a { color: pink; @media { color: orange; &::before { color: black; } } }
 
 a { --custom-property: 0; --custom-property: 1; }
 
+a {
+    @supports (color: pink) {
+        color: pink;
+    }
+}
+
+a {
+    @supports (color: pink) {
+        color: pink;
+        &:hover {
+            color: orange;
+        }
+    }
+}
+
 /* TODO */
 /* @fontface {
     src: url(font.eof);

diff --git a/crates/biome_css_semantic/src/events.rs b/crates/biome_css_semantic/src/events.rs
@@ -65,7 +65,8 @@ impl SemanticEventExtractor {
             // allowing for proper scoping and inheritance of styles.
             kind if kind == CSS_QUALIFIED_RULE
                 || kind == CSS_NESTED_QUALIFIED_RULE
-                || kind == CSS_MEDIA_AT_RULE =>
+                || kind == CSS_MEDIA_AT_RULE
+                || kind == CSS_SUPPORTS_AT_RULE =>
             {
                 let range = node.text_range();
                 self.stash.push_back(SemanticEvent::RuleStart(range));
@@ -95,6 +96,10 @@ impl SemanticEventExtractor {
                     .for_each(|s| self.process_selector(s));
             }
             CSS_DECLARATION => {
+                if matches!(node.parent().kind(), Some(CSS_SUPPORTS_FEATURE_DECLARATION)) {
+                    return;
+                }
+
                 if let Some(property_name) = node.first_child().and_then(|p| p.first_child()) {
                     if let Some(value) = property_name.next_sibling() {
                         self.stash.push_back(SemanticEvent::PropertyDeclaration {