fix(css_parser): fix CSS: Layout using named grid lines #3055 (#3131)

CHANGELOG.md

@@ -21,6 +21,7 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 - Fix the bug where whitespace after the & character in CSS nesting was incorrectly trimmed, ensuring proper targeting of child classes [#3061](https://github.com/biomejs/biome/issues/3061). Contributed by @denbezrukov
 - Fix [#3091](https://github.com/biomejs/biome/issues/3091). Allows the parser to handle nested style rules and at-rules properly, enhancing the parser's compatibility with the CSS Nesting Module. Contributed by @denbezrukov
 - Fix [#3068](https://github.com/biomejs/biome/issues/3068) where the CSS formatter was inadvertently converting variable declarations and function calls to lowercase. Contributed by @denbezrukov
+- Fix [#3055](https://github.com/biomejs/biome/issues/3055) CSS: Layout using named grid lines is now correctly parsed. Contributed by @denbezrukov
 
 ### Configuration
 

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

@@ -10,6 +10,7 @@ impl FormatRule<AnyCssValue> for FormatAnyCssValue {
         match node {
             AnyCssValue::AnyCssDimension(node) => node.format().fmt(f),
             AnyCssValue::AnyCssFunction(node) => node.format().fmt(f),
+            AnyCssValue::CssBracketedValue(node) => node.format().fmt(f),
             AnyCssValue::CssColor(node) => node.format().fmt(f),
             AnyCssValue::CssCustomIdentifier(node) => node.format().fmt(f),
             AnyCssValue::CssDashedIdentifier(node) => node.format().fmt(f),

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

@@ -0,0 +1,24 @@
+use crate::prelude::*;
+use biome_css_syntax::{CssBracketedValue, CssBracketedValueFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssBracketedValue;
+impl FormatNodeRule<CssBracketedValue> for FormatCssBracketedValue {
+    fn fmt_fields(&self, node: &CssBracketedValue, f: &mut CssFormatter) -> FormatResult<()> {
+        let CssBracketedValueFields {
+            l_brack_token,
+            items,
+            r_brack_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                l_brack_token.format(),
+                soft_block_indent(&items.format()),
+                r_brack_token.format()
+            ]
+        )
+    }
+}

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

@@ -4,6 +4,7 @@ pub(crate) mod attribute_matcher;
 pub(crate) mod attribute_matcher_value;
 pub(crate) mod attribute_name;
 pub(crate) mod binary_expression;
+pub(crate) mod bracketed_value;
 pub(crate) mod composes_import_specifier;
 pub(crate) mod composes_property_value;
 pub(crate) mod container_and_query;

crates/biome_css_formatter/src/css/lists/bracketed_value_list.rs

@@ -0,0 +1,12 @@
+use crate::prelude::*;
+use biome_css_syntax::CssBracketedValueList;
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssBracketedValueList;
+impl FormatRule<CssBracketedValueList> for FormatCssBracketedValueList {
+    type Context = CssFormatContext;
+    fn fmt(&self, node: &CssBracketedValueList, f: &mut CssFormatter) -> FormatResult<()> {
+        f.join_with(&space())
+            .entries(node.iter().formatted())
+            .finish()
+    }
+}

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

@@ -1,5 +1,6 @@
 //! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
 
+pub(crate) mod bracketed_value_list;
 pub(crate) mod component_value_list;
 pub(crate) mod composes_class_list;
 pub(crate) mod compound_selector_list;

crates/biome_css_formatter/src/generated.rs

@@ -240,6 +240,46 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssBinaryExpression {
         )
     }
 }
+impl FormatRule<biome_css_syntax::CssBracketedValue>
+    for crate::css::auxiliary::bracketed_value::FormatCssBracketedValue
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::CssBracketedValue,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::CssBracketedValue>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssBracketedValue {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::CssBracketedValue,
+        crate::css::auxiliary::bracketed_value::FormatCssBracketedValue,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatRefWithRule::new(
+            self,
+            crate::css::auxiliary::bracketed_value::FormatCssBracketedValue::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssBracketedValue {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::CssBracketedValue,
+        crate::css::auxiliary::bracketed_value::FormatCssBracketedValue,
+    >;
+    fn into_format(self) -> Self::Format {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatOwnedWithRule::new(
+            self,
+            crate::css::auxiliary::bracketed_value::FormatCssBracketedValue::default(),
+        )
+    }
+}
 impl FormatRule<biome_css_syntax::CssCharsetAtRule>
     for crate::css::statements::charset_at_rule::FormatCssCharsetAtRule
 {
@@ -5270,6 +5310,33 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::CssValueAtRuleNamedImpor
         FormatOwnedWithRule :: new (self , crate :: css :: auxiliary :: value_at_rule_named_import_specifier :: FormatCssValueAtRuleNamedImportSpecifier :: default ())
     }
 }
+impl AsFormat<CssFormatContext> for biome_css_syntax::CssBracketedValueList {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::CssBracketedValueList,
+        crate::css::lists::bracketed_value_list::FormatCssBracketedValueList,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatRefWithRule::new(
+            self,
+            crate::css::lists::bracketed_value_list::FormatCssBracketedValueList::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::CssBracketedValueList {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::CssBracketedValueList,
+        crate::css::lists::bracketed_value_list::FormatCssBracketedValueList,
+    >;
+    fn into_format(self) -> Self::Format {
+        #![allow(clippy::default_constructed_unit_structs)]
+        FormatOwnedWithRule::new(
+            self,
+            crate::css::lists::bracketed_value_list::FormatCssBracketedValueList::default(),
+        )
+    }
+}
 impl AsFormat<CssFormatContext> for biome_css_syntax::CssComponentValueList {
     type Format<'a> = FormatRefWithRule<
         'a,

crates/biome_css_formatter/tests/specs/css/properties/grid.css

@@ -0,0 +1,11 @@
+.chat-image {
+	grid-row: span 2 / span 2;
+	align-self: flex-end
+}
+
+
+#grid {
+	display: grid;
+	grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
+	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
+}

crates/biome_css_formatter/tests/specs/css/properties/grid.css.snap

@@ -0,0 +1,49 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/properties/grid.css
+---
+# Input
+
+```css
+.chat-image {
+	grid-row: span 2 / span 2;
+	align-self: flex-end
+}
+
+
+#grid {
+	display: grid;
+	grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
+	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+.chat-image {
+	grid-row: span 2 / span 2;
+	align-self: flex-end;
+}
+
+#grid {
+	display: grid;
+	grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
+	grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start]
+		50px [last];
+}
+```

crates/biome_css_formatter/tests/specs/prettier/css/character-escaping/character_escaping.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/character-escaping/character_escaping.css
 ---
-
 # Input
 
 ```css
@@ -107,14 +106,6 @@ info: css/character-escaping/character_escaping.css
  }
  #\[attr\=value\] {
  }
-@@ -94,5 +87,6 @@
- }
-
- .grid {
--  grid-template-rows: [row-1-00\:00] auto;
-+  grid-template-rows:
-+    [row-1-00\:00] auto;
- }
 ```
 
 # Output
@@ -209,8 +200,7 @@ info: css/character-escaping/character_escaping.css
 }
 
 .grid {
-  grid-template-rows:
-    [row-1-00\:00] auto;
+  grid-template-rows: [row-1-00\:00] auto;
 }
 ```
 
@@ -389,33 +379,10 @@ character_escaping.css:7:2 parse ━━━━━━━━━━━━━━━
     8 │ #\? {}
     9 │ #\@ {}
   
-character_escaping.css:57:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Unexpected value or character.
-  
-    55 │ .grid {
-    56 │   grid-template-rows:
-  > 57 │     [row-1-00\:00] auto;
-       │     ^^^^^^^^^^^^^^^^^^^
-    58 │ }
-    59 │ 
-  
-  i Expected one of:
-  
-  - identifier
-  - string
-  - number
-  - dimension
-  - ratio
-  - custom property
-  - function
-  
 
 ```
 
 # Lines exceeding max width of 80 characters
 ```
    26: #\+\+\+\+\+\+\+\+\+\+\[\>\+\+\+\+\+\+\+\>\+\+\+\+\+\+\+\+\+\+\>\+\+\+\>\+\<\<\<\<\-\]\>\+\+\.\>\+\.\+\+\+\+\+\+\+\.\.\+\+\+\.\>\+\+\.\<\<\+\+\+\+\+\+\+\+\+\+\+\+\+\+\+\.\>\.\+\+\+\.\-\-\-\-\-\-\.\-\-\-\-\-\-\-\-\.\>\+\.\>\. {
 ```
-
-