feat(css_parser): allow multiple semicolons after declaration

CHANGELOG.md

@@ -92,6 +92,17 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
   Contributed by @fireairforce
 
+- Fix [#3836](https://github.com/biomejs/biome/issues/3836), css parser allow multiple semicolons after a declaration, the following example will now parsed correctly:
+
+  ```css
+  .foo {
+    color: red;;
+  }
+  ```
+
+  Contributed by @fireairforce
+
+
 ## v1.9.4 (2024-10-17)
 
 ### Analyzer

crates/biome_css_formatter/src/css/any/declaration_or_rule.rs

@@ -11,6 +11,7 @@ impl FormatRule<AnyCssDeclarationOrRule> for FormatAnyCssDeclarationOrRule {
             AnyCssDeclarationOrRule::AnyCssRule(node) => node.format().fmt(f),
             AnyCssDeclarationOrRule::CssBogus(node) => node.format().fmt(f),
             AnyCssDeclarationOrRule::CssDeclarationWithSemicolon(node) => node.format().fmt(f),
+            AnyCssDeclarationOrRule::CssEmptyDeclaration(node) => node.format().fmt(f),
             AnyCssDeclarationOrRule::CssMetavariable(node) => node.format().fmt(f),
         }
     }

crates/biome_css_formatter/src/css/auxiliary/empty_declaration.rs

@@ -0,0 +1,21 @@
+use crate::prelude::*;
+use biome_css_syntax::{CssEmptyDeclaration, CssEmptyDeclarationFields, CssSyntaxKind};
+use biome_formatter::write;
+use biome_rowan::{AstNode, SyntaxNodeOptionExt};
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssEmptyDeclaration;
+impl FormatNodeRule<CssEmptyDeclaration> for FormatCssEmptyDeclaration {
+    fn fmt_fields(&self, node: &CssEmptyDeclaration, f: &mut CssFormatter) -> FormatResult<()> {
+        let CssEmptyDeclarationFields { semicolon_token } = node.as_fields();
+        let parent_kind = node.syntax().parent().kind();
+
+        if matches!(
+            parent_kind,
+            Some(CssSyntaxKind::CSS_DECLARATION_WITH_SEMICOLON,)
+        ) {
+            write!(f, [semicolon_token.format()])
+        } else {
+            write!(f, [format_removed(&semicolon_token?)])
+        }
+    }
+}

crates/biome_css_formatter/src/css/auxiliary/mod.rs

@@ -24,6 +24,7 @@ pub(crate) mod declaration_or_at_rule_block;
 pub(crate) mod declaration_or_rule_block;
 pub(crate) mod declaration_with_semicolon;
 pub(crate) mod document_custom_matcher;
+pub(crate) mod empty_declaration;
 pub(crate) mod font_family_name;
 pub(crate) mod font_feature_values_block;
 pub(crate) mod font_feature_values_item;

crates/biome_css_formatter/src/generated.rs

@@ -1415,6 +1415,46 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssDocumentCustomMatcher
         )
     }
 }
+impl FormatRule<biome_css_syntax::CssEmptyDeclaration>
+    for crate::css::auxiliary::empty_declaration::FormatCssEmptyDeclaration
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::CssEmptyDeclaration,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::CssEmptyDeclaration>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssEmptyDeclaration {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::CssEmptyDeclaration,
+        crate::css::auxiliary::empty_declaration::FormatCssEmptyDeclaration,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatRefWithRule::new(
+            self,
+            crate::css::auxiliary::empty_declaration::FormatCssEmptyDeclaration::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssEmptyDeclaration {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::CssEmptyDeclaration,
+        crate::css::auxiliary::empty_declaration::FormatCssEmptyDeclaration,
+    >;
+    fn into_format(self) -> Self::Format {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatOwnedWithRule::new(
+            self,
+            crate::css::auxiliary::empty_declaration::FormatCssEmptyDeclaration::default(),
+        )
+    }
+}
 impl FormatRule<biome_css_syntax::CssFontFaceAtRule>
     for crate::css::statements::font_face_at_rule::FormatCssFontFaceAtRule
 {

crates/biome_css_formatter/tests/specs/css/declaration_list.css

@@ -31,3 +31,7 @@ a {
 	--bs-font-monospace: sfmono-regular , menlo , monaco , consolas ,
 	'Liberation Mono' , 'Courier New' , monospace;
 }
+
+a {
+    color: red;;;;
+}

crates/biome_css_formatter/tests/specs/css/declaration_list.css.snap

@@ -39,6 +39,9 @@ a {
 	'Liberation Mono' , 'Courier New' , monospace;
 }
 
+a {
+    color: red;;;;
+}
 ```
 
 
@@ -96,4 +99,8 @@ a {
 	--bs-font-monospace: sfmono-regular, menlo, monaco, consolas,
 		"Liberation Mono", "Courier New", monospace;
 }
+
+a {
+	color: red;
+}
 ```

crates/biome_css_formatter/tests/specs/prettier/css/comments/custom-properties.css.snap

@@ -27,7 +27,7 @@ font-size: 12px;
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,13 +1,14 @@
+@@ -1,13 +1,13 @@
  /* comment 1 */
  :root {
    /* comment 2 */
@@ -41,7 +41,6 @@ font-size: 12px;
      /* comment 9 */
 -  };
 +  }
-+  ;
    /* comment 10 */
  }
  /* comment 11 */
@@ -60,7 +59,6 @@ font-size: 12px;
     font-size: 12px;
     /* comment 9 */
   }
-  ;
   /* comment 10 */
 }
 /* comment 11 */
@@ -127,25 +125,5 @@ custom-properties.css:4:12 parse ━━━━━━━━━━━━━━━
   - past
   - future
 
-custom-properties.css:10:4 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a declaration, or an at rule but instead found ';'.
-
-     8 │ font-size: 12px;
-     9 │   /* comment 9 */
-  > 10 │   };
-       │    ^
-    11 │   /* comment 10 */
-    12 │ }
-
-  i Expected a declaration, or an at rule here.
-
-     8 │ font-size: 12px;
-     9 │   /* comment 9 */
-  > 10 │   };
-       │    ^
-    11 │   /* comment 10 */
-    12 │ }
-
 
 ```

crates/biome_css_formatter/tests/specs/prettier/css/comments/selectors.css.snap

@@ -435,7 +435,7 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen
        /* comment 161 */
      } /* comment 162 */
      /* comment 163 */
-@@ -201,30 +188,35 @@
+@@ -201,30 +188,34 @@
    /* comment 165 */
  } /* comment 166 */
 
@@ -482,7 +482,6 @@ input:not(/* comment 125 */[/* comment 126 */disabled/* comment 127 */]/* commen
      justify-content: center;
 -  };
 +  }
-+  ;
  }
 ```
 
@@ -709,7 +708,6 @@ input:not(
     align-items: center;
     justify-content: center;
   }
-  ;
 }
 ```
 
@@ -854,26 +852,6 @@ selectors.css:152:75 parse ━━━━━━━━━━━━━━━━━
   - past
   - future
 
-selectors.css:156:6 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a declaration, or an at rule but instead found ';'.
-
-    154 │         align-items: center;
-    155 │         justify-content: center;
-  > 156 │     };
-        │      ^
-    157 │ }
-    158 │ 
-
-  i Expected a declaration, or an at rule here.
-
-    154 │         align-items: center;
-    155 │         justify-content: center;
-  > 156 │     };
-        │      ^
-    157 │ }
-    158 │ 
-
 
 ```
 

crates/biome_css_formatter/tests/specs/prettier/css/url/url.css.snap

@@ -45,7 +45,7 @@ a {
 ```diff
 --- Prettier
 +++ Biome
-@@ -13,17 +13,19 @@
+@@ -13,16 +13,17 @@
    content: url(https://example.com/\)\).jpg);
    content: url(https://example.com/\(\(.jpg);
    content: url(https://example.com/\ \ .jpg);
@@ -69,8 +69,6 @@ a {
      no-repeat url(foo.ttf?query=foo,bar,),
      no-repeat url(foo.woff2?foo=rgb\(255,255,0\))
      no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
-+  ;
- }
 ```
 
 # Output
@@ -105,7 +103,6 @@ a {
     no-repeat url(foo.ttf?query=foo,bar,),
     no-repeat url(foo.woff2?foo=rgb\(255,255,0\))
     no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
-  ;
 }
 ```
 
@@ -165,26 +162,6 @@ url.css:3:33 parse ━━━━━━━━━━━━━━━━━━━━
   - custom property
   - function
 
-url.css:30:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Expected a declaration, or an at rule but instead found ';'.
-
-    28 │     no-repeat url(foo.woff2?foo=rgb\(255,255,0\))
-    29 │     no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
-  > 30 │   ;
-       │   ^
-    31 │ }
-    32 │ 
-
-  i Expected a declaration, or an at rule here.
-
-    28 │     no-repeat url(foo.woff2?foo=rgb\(255,255,0\))
-    29 │     no-repeat url(RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf);
-  > 30 │   ;
-       │   ^
-    31 │ }
-    32 │ 
-
 
 ```