feat(biome_css_analyzer): useConsistentGridAreas

crates/biome_css_analyze/src/lint/nursery.rs

@@ -14,6 +14,7 @@ pub mod no_unknown_property;
 pub mod no_unknown_selector_pseudo_element;
 pub mod no_unknown_unit;
 pub mod no_unmatchable_anb_selector;
+pub mod use_consistent_grid_areas;
 pub mod use_generic_font_names;
 
 declare_group! {
@@ -32,6 +33,7 @@ declare_group! {
             self :: no_unknown_selector_pseudo_element :: NoUnknownSelectorPseudoElement ,
             self :: no_unknown_unit :: NoUnknownUnit ,
             self :: no_unmatchable_anb_selector :: NoUnmatchableAnbSelector ,
+            self :: use_consistent_grid_areas :: UseConsistentGridAreas ,
             self :: use_generic_font_names :: UseGenericFontNames ,
         ]
      }

crates/biome_css_analyze/src/lint/nursery/use_consistent_grid_areas.rs

@@ -0,0 +1,80 @@
+use biome_analyze::{context::RuleContext, declare_rule, Ast, Rule, RuleDiagnostic};
+use biome_console::markup;
+use biome_css_syntax::CssGenericComponentValueList;
+use biome_rowan::TextRange;
+
+declare_rule! {
+    /// Disallowing invalid named grid areas in CSS Grid Layouts.
+    ///
+    /// For a named grid area to be valid, all strings must define:
+    ///
+    /// - the same number of cell tokens
+    /// - at least one cell token
+    ///
+    /// And all named grid areas that spans multiple grid cells must form a single filled-in rectangle.
+    ///
+    /// ## Examples
+    ///
+    /// ### Invalid
+    ///
+    /// ```css,expect_diagnostic
+    /// a { grid-template-areas: "a a"
+    ///                          "b b b"; }
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// a { grid-template-areas: "b b b"
+    ///                          ""; }
+    /// ```
+    ///
+    /// ```css,expect_diagnostic
+    /// a { grid-template-areas: "a a a"
+    ///                          "a . a"; }
+    /// ```
+    ///
+    /// ### Valid
+    ///
+    /// ```css
+    /// a { grid-template-areas: "a a a"
+    ///                          "b b b"; }
+    /// ```
+    ///
+    /// ```css
+    /// a { grid-template-areas: "a a a"
+    ///                          "a a a"; }
+    /// ```
+    ///
+    pub UseConsistentGridAreas {
+        version: "next",
+        name: "useConsistentGridAreas",
+        language: "css",
+        recommended: false,
+    }
+}
+
+impl Rule for UseConsistentGridAreas {
+    type Query = Ast<CssGenericComponentValueList>;
+    type State = TextRange;
+    type Signals = Option<Self::State>;
+    type Options = ();
+
+    fn run(ctx: &RuleContext<Self>) -> Option<Self::State> {
+        let _node = ctx.query();
+        None
+    }
+
+    fn diagnostic(_: &RuleContext<Self>, range: &Self::State) -> Option<RuleDiagnostic> {
+        Some(
+            RuleDiagnostic::new(
+                rule_category!(),
+                range,
+                markup! {
+                    "Unconsitent grid areas are not allowed."
+                },
+            )
+            .note(markup! {
+                    "Consider ensuring that each row contains the same number of cell tokens and includes at least one cell token."
+            }),
+        )
+    }
+}

crates/biome_css_analyze/src/options.rs

@@ -19,5 +19,6 @@ pub type NoUnknownSelectorPseudoElement = < lint :: nursery :: no_unknown_select
 pub type NoUnknownUnit =
     <lint::nursery::no_unknown_unit::NoUnknownUnit as biome_analyze::Rule>::Options;
 pub type NoUnmatchableAnbSelector = < lint :: nursery :: no_unmatchable_anb_selector :: NoUnmatchableAnbSelector as biome_analyze :: Rule > :: Options ;
+pub type UseConsistentGridAreas = < lint :: nursery :: use_consistent_grid_areas :: UseConsistentGridAreas as biome_analyze :: Rule > :: Options ;
 pub type UseGenericFontNames =
     <lint::nursery::use_generic_font_names::UseGenericFontNames as biome_analyze::Rule>::Options;

crates/biome_css_analyze/tests/specs/nursery/useConsistentGridAreas/invalid.css

@@ -0,0 +1,13 @@
+a { grid-template-areas: "a a"
+                         "b b b"; }
+a { grid-template-areas: "b b b"
+                         ""; }
+a { grid-template-areas: "a a a"
+                         "a . a"; }
+a { grid-template-areas: "o o o ,"
+                         "p , p p"
+                         "q q , q"; }
+a { grid-template-areas: "s s t t"
+                         "s s t t"
+                         "u v v"
+                         "u u v v"; }

crates/biome_css_analyze/tests/specs/nursery/useConsistentGridAreas/invalid.css.snap.new

@@ -0,0 +1,22 @@
+---
+source: crates/biome_css_analyze/tests/spec_tests.rs
+assertion_line: 83
+expression: invalid.css
+---
+# Input
+```css
+a { grid-template-areas: "a a"
+                         "b b b"; }
+a { grid-template-areas: "b b b"
+                         ""; }
+a { grid-template-areas: "a a a"
+                         "a . a"; }
+a { grid-template-areas: "o o o ,"
+                         "p , p p"
+                         "q q , q"; }
+a { grid-template-areas: "s s t t"
+                         "s s t t"
+                         "u v v"
+                         "u u v v"; }
+
+```

crates/biome_css_analyze/tests/specs/nursery/useConsistentGridAreas/valid.css

@@ -0,0 +1,11 @@
+a { grid-template-areas: "a a a"
+                         "b b b"; }
+a { grid-template-areas: "a a a"
+                         "a a a"; }
+a { grid-template-areas: "o o o o"
+                         "p p p p"
+                         "q q q q"; }
+a { grid-template-areas: "s s t t"
+                         "s s"
+                         "v v v"
+                         "u u v"; }