feat(css_formatter): support meaningful boundaries for range formatti…

…ng (#1363)

crates/biome_css_formatter/src/lib.rs

@@ -13,7 +13,10 @@ use crate::comments::CssCommentStyle;
 pub(crate) use crate::context::CssFormatContext;
 use crate::context::CssFormatOptions;
 use crate::cst::FormatCssSyntaxNode;
-use biome_css_syntax::{AnyCssValue, CssLanguage, CssSyntaxNode, CssSyntaxToken};
+use biome_css_syntax::{
+    AnyCssDeclarationListBlock, AnyCssRule, AnyCssRuleListBlock, AnyCssValue, CssLanguage,
+    CssSyntaxKind, CssSyntaxNode, CssSyntaxToken,
+};
 use biome_formatter::comments::Comments;
 use biome_formatter::prelude::*;
 use biome_formatter::token::string::ToAsciiLowercaseCow;
@@ -244,8 +247,22 @@ impl FormatLanguage for CssFormatLanguage {
     type Context = CssFormatContext;
     type FormatRule = FormatCssSyntaxNode;
 
+    // For CSS, range formatting allows:
+    // - any block of rules or declarations
+    // - any individual rule or declaration
+    // - any individual value
+    // - a complete value definition for a declaration
     fn is_range_formatting_node(&self, node: &SyntaxNode<Self::SyntaxLanguage>) -> bool {
-        AnyCssValue::can_cast(node.kind())
+        AnyCssDeclarationListBlock::can_cast(node.kind())
+            || AnyCssRuleListBlock::can_cast(node.kind())
+            || AnyCssValue::can_cast(node.kind())
+            || AnyCssRule::can_cast(node.kind())
+            || matches!(
+                node.kind(),
+                CssSyntaxKind::CSS_DECLARATION
+                    | CssSyntaxKind::CSS_COMPONENT_VALUE_LIST
+                    | CssSyntaxKind::CSS_SELECTOR_LIST
+            )
     }
 
     fn options(&self) -> &<Self::Context as FormatContext>::Options {

crates/biome_css_formatter/tests/specs/css/range/between_rules.css

@@ -0,0 +1,15 @@
+
+div {    color  : blue ;
+
+    <<<ROME_RANGE_START>>>
+    background-color  : 
+    green;
+}
+
+.foo   html
+{
+    color  : green ;
+    <<<ROME_RANGE_END>>>
+
+    background-color   : blue;
+}

crates/biome_css_formatter/tests/specs/css/range/between_rules.css.snap

@@ -0,0 +1,56 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/between_rules.css
+---
+
+# Input
+
+```css
+
+div {    color  : blue ;
+
+
+    background-color  : 
+    green;
+}
+
+.foo   html
+{
+    color  : green ;
+
+
+    background-color   : blue;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+
+div {
+	color: blue;
+
+	background-color: green;
+}
+
+.foo html {
+	color: green;
+
+	background-color: blue;
+}
+```
+
+

crates/biome_css_formatter/tests/specs/css/range/keyframes.css

@@ -0,0 +1,10 @@
+@keyframes   animation-name   {
+    10%   <<<ROME_RANGE_START>>>,  20%   {
+        opacity:   0
+           ;
+        <<<ROME_RANGE_END>>>
+    }
+
+    100%    {
+        opacity  : 1 }
+}

crates/biome_css_formatter/tests/specs/css/range/keyframes.css.snap

@@ -0,0 +1,47 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/keyframes.css
+---
+
+# Input
+
+```css
+@keyframes   animation-name   {
+    10%   ,  20%   {
+        opacity:   0
+           ;
+
+    }
+
+    100%    {
+        opacity  : 1 }
+}
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+@keyframes animation-name {
+	10%,
+	20% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}```
+
+

crates/biome_css_formatter/tests/specs/css/range/mid_value.css

@@ -0,0 +1,3 @@
+div {
+    border  :   1px <<<ROME_RANGE_START>>>  solid  green   <<<ROME_RANGE_END>>>;
+}

crates/biome_css_formatter/tests/specs/css/range/mid_value.css.snap

@@ -0,0 +1,35 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/mid_value.css
+---
+
+# Input
+
+```css
+div {
+    border  :   1px   solid  green   ;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+div {
+    border: 1px solid green   ;
+}
+```
+
+

crates/biome_css_formatter/tests/specs/css/range/selector_list.css

@@ -0,0 +1 @@
+.foo  , <<<ROME_RANGE_START>>> .bar:FIRST-CHILD <<<ROME_RANGE_END>>>, DIV {color: blue}

crates/biome_css_formatter/tests/specs/css/range/selector_list.css.snap

@@ -0,0 +1,33 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/selector_list.css
+---
+
+# Input
+
+```css
+.foo  ,  .bar:FIRST-CHILD , DIV {color: blue}
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+.foo,
+.bar:first-child,
+div {
+	color: blue;
+}```
+
+

crates/biome_css_formatter/tests/specs/css/range/single_declaration.css

@@ -0,0 +1,6 @@
+div{color  :  blue  
+
+    ;
+    <<<ROME_RANGE_START>>>    border   :  1px   solid;<<<ROME_RANGE_END>>>
+}
+div{color:green;}

crates/biome_css_formatter/tests/specs/css/range/single_declaration.css.snap

@@ -0,0 +1,40 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/single_declaration.css
+---
+
+# Input
+
+```css
+div{color  :  blue  
+
+    ;
+        border   :  1px   solid;
+}
+div{color:green;}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+div {
+	color: blue;
+	border: 1px solid;
+}
+div{color:green;}
+```
+
+

crates/biome_css_formatter/tests/specs/css/range/single_rule.css

@@ -0,0 +1,4 @@
+div{color:blue;}
+<<<ROME_RANGE_START>>>div{color:green;}<<<ROME_RANGE_END>>>
+
+div{color:red;}

crates/biome_css_formatter/tests/specs/css/range/single_rule.css.snap

@@ -0,0 +1,39 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/single_rule.css
+---
+
+# Input
+
+```css
+div{color:blue;}
+div{color:green;}
+
+div{color:red;}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+div{color:blue;}
+div {
+	color: green;
+}
+
+div{color:red;}
+```
+
+

crates/biome_css_formatter/tests/specs/css/range/single_value.css

@@ -0,0 +1,5 @@
+div {
+    COLOR: GREEN;
+
+    Border : 1px <<<ROME_RANGE_START>>>GrEeN<<<ROME_RANGE_END>>>   solid   ;
+}

crates/biome_css_formatter/tests/specs/css/range/single_value.css.snap

@@ -0,0 +1,37 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/range/single_value.css
+---
+
+# Input
+
+```css
+div {
+    COLOR: GREEN;
+
+    Border : 1px GrEeN   solid   ;
+}
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+-----
+
+```css
+div {
+    COLOR: GREEN;
+
+    Border : 1px green   solid   ;
+}```
+
+