feat(css): add support for SCSS binary expressions in lexer and parser (#9343)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: denbezrukov

crates/biome_css_formatter/tests/specs/css/scss/declaration/nested-properties-complex-value.scss.snap

@@ -37,7 +37,7 @@ Trailing newline: true
 
 ```scss
 .theme {
-	spacing: (1px +2px) * 3 {
+	spacing: (1px + 2px) * 3 {
 		size: 1px;
 	}
 

crates/biome_css_formatter/tests/specs/css/scss/declaration/page-at-rule.scss.snap

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 212
 info: css/scss/declaration/page-at-rule.scss
 ---
 
@@ -57,7 +58,7 @@ Trailing newline: true
 ```scss
 @page :left {
 	$padding: 12px !default;
-	$scale: 1 +2 * 3;
+	$scale: 1 + 2 * 3;
 	padding: $padding * $scale;
 
 	font: {
@@ -66,13 +67,13 @@ Trailing newline: true
 	}
 
 	$map: (
-		($padding +1): foo,
-		(1 +2): bar,
+		($padding + 1): foo,
+		(1 + 2): bar,
 	);
 
 	@top-left {
 		$margin: 4px !global;
-		margin: ($margin +2) / 2;
+		margin: ($margin + 2) / 2;
 		border: 1px solid $color {
 			width: 1px;
 			color: $color;

crates/biome_css_formatter/tests/specs/css/scss/expression/edge-cases.scss.snap

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 212
 info: css/scss/expression/edge-cases.scss
 ---
 
@@ -70,7 +71,7 @@ $paren-map: (
 	a: 1,
 	b: 2,
 );
-$paren-expr: (1 +2 * 3);
+$paren-expr: (1 + 2 * 3);
 $nested-list: 1 2, 3 4, 5;
 $kw-args: foo($a: 1, $b: 2, $c...);
 .b {

crates/biome_css_formatter/tests/specs/css/scss/expression/formatting.scss.snap

@@ -1,5 +1,6 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 212
 info: css/scss/expression/formatting.scss
 ---
 
@@ -98,15 +99,15 @@ $map: (
 );
 $list: 1, 2, 3;
 
-$bin: 1 +2;
+$bin: 1 + 2;
 $unary1: -1;
 
 $unary2: not $flag;
 $kw: foo($a: 1, $b: 2);
 
 $varargs: foo($args...);
 
-$paren: (1 +2);
+$paren: (1 + 2);
 $qualified: module.$var;
 
 $parent: &;
@@ -118,7 +119,7 @@ $list-space: 1 2 3;
 
 $list-mixed: 1 2, 3 4;
 
-$paren-nested: ((1 +2) * 3);
+$paren-nested: ((1 + 2) * 3);
 
 $comparison: $a <= $b and $c >= $d;
 
@@ -129,7 +130,7 @@ $complex-args: foo($a: (1 2, 3 4), $b: map-get($map, key));
 
 $interpolation: "#{$a}-#{$b}";
 $calc: calc(100% - $gutter * 2);
-$math: 1 +2 * 3% 4 / 5;
+$math: 1 + 2 * 3% 4 / 5;
 $map-nested: (
 	a: (
 		b: 1,

crates/biome_css_formatter/tests/specs/css/scss/expression/precedence.scss.snap

@@ -3,6 +3,7 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs
 assertion_line: 212
 info: css/scss/expression/precedence.scss
 ---
+
 # Input
 
 ```scss
@@ -156,8 +157,8 @@ $expr15: $a != ($b + $c * $d);
 
 $expr16: $a + $b / $c - $d * $e + $f;
 
-$expr17: 1 +2 * 3 -4 / 5;
-$expr18: -1 +2;
+$expr17: 1 + 2 * 3 - 4 / 5;
+$expr18: -1 + 2;
 $expr19: ($a + $b) * ($c + $d) / ($e - $f);
 
 $expr20: $a == $b and $c == $d or $e;

crates/biome_css_formatter/tests/specs/css/scss/expression/signed-numeric-operator.scss

@@ -0,0 +1,28 @@
+$number-plus-tight:1+2;
+$number-plus-left-space:1 +2;
+$number-plus-right-space:1+ 2;
+$number-plus-spaced:1 + 2;
+
+$number-minus-tight:3-2;
+$number-minus-left-space:3 -2;
+$number-minus-right-space:3- 2;
+$number-minus-spaced:3 - 2;
+
+$dimension-plus-tight:10+10px;
+$dimension-minus-tight:10-10px;
+
+$percentage-plus-tight:10+10%;
+$percentage-minus-tight:10-10%;
+
+$unary-plus:+2;
+$unary-minus:-2;
+$binary-plus-unary-plus:1 + +2;
+$binary-plus-unary-minus:1 + -3;
+$binary-plus-unary-plus-literal:1 + +5;
+$binary-minus-unary-minus:1 - -2;
+
+$page-like-scale:1 +2 * 3;
+$page-like-map:(
+(1 +2):foo,
+($gap +1):bar,
+);

crates/biome_css_formatter/tests/specs/css/scss/expression/signed-numeric-operator.scss.snap

@@ -0,0 +1,86 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/expression/signed-numeric-operator.scss
+---
+
+# Input
+
+```scss
+$number-plus-tight:1+2;
+$number-plus-left-space:1 +2;
+$number-plus-right-space:1+ 2;
+$number-plus-spaced:1 + 2;
+
+$number-minus-tight:3-2;
+$number-minus-left-space:3 -2;
+$number-minus-right-space:3- 2;
+$number-minus-spaced:3 - 2;
+
+$dimension-plus-tight:10+10px;
+$dimension-minus-tight:10-10px;
+
+$percentage-plus-tight:10+10%;
+$percentage-minus-tight:10-10%;
+
+$unary-plus:+2;
+$unary-minus:-2;
+$binary-plus-unary-plus:1 + +2;
+$binary-plus-unary-minus:1 + -3;
+$binary-plus-unary-plus-literal:1 + +5;
+$binary-minus-unary-minus:1 - -2;
+
+$page-like-scale:1 +2 * 3;
+$page-like-map:(
+(1 +2):foo,
+($gap +1):bar,
+);
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+$number-plus-tight: 1 + 2;
+$number-plus-left-space: 1 + 2;
+$number-plus-right-space: 1 + 2;
+$number-plus-spaced: 1 + 2;
+
+$number-minus-tight: 3 - 2;
+$number-minus-left-space: 3 - 2;
+$number-minus-right-space: 3 - 2;
+$number-minus-spaced: 3 - 2;
+
+$dimension-plus-tight: 10 + 10px;
+$dimension-minus-tight: 10 - 10px;
+
+$percentage-plus-tight: 10 + 10%;
+$percentage-minus-tight: 10 - 10%;
+
+$unary-plus: +2;
+$unary-minus: -2;
+$binary-plus-unary-plus: 1 + +2;
+$binary-plus-unary-minus: 1 + -3;
+$binary-plus-unary-plus-literal: 1 + +5;
+$binary-minus-unary-minus: 1 - -2;
+
+$page-like-scale: 1 + 2 * 3;
+$page-like-map: (
+	(1 + 2): foo,
+	($gap + 1): bar,
+);
+
+```

crates/biome_css_parser/src/lexer/mod.rs

@@ -63,6 +63,8 @@ pub enum CssReLexContext {
     Regular,
     /// See [CssLexContext::UnicodeRange]
     UnicodeRange,
+    /// Re-lexes `+` and `-` as standalone tokens for SCSS expression parsing.
+    ScssExpression,
 }
 
 /// An extremely fast, lookup table based, lossless CSS lexer
@@ -1502,6 +1504,7 @@ impl<'src> ReLexer<'src> for CssLexer<'src> {
             Some(current) => match context {
                 CssReLexContext::Regular => self.consume_token(current),
                 CssReLexContext::UnicodeRange => self.consume_unicode_range_token(current),
+                CssReLexContext::ScssExpression => self.consume_scss_expression_token(current),
             },
             None => EOF,
         };
@@ -1517,6 +1520,16 @@ impl<'src> ReLexer<'src> for CssLexer<'src> {
     }
 }
 
+impl CssLexer<'_> {
+    fn consume_scss_expression_token(&mut self, current: u8) -> CssSyntaxKind {
+        match current {
+            b'+' => self.consume_byte(T![+]),
+            b'-' => self.consume_byte(T![-]),
+            _ => self.consume_token(current),
+        }
+    }
+}
+
 impl<'src> LexerWithCheckpoint<'src> for CssLexer<'src> {
     fn checkpoint(&self) -> LexerCheckpoint<Self::Kind> {
         LexerCheckpoint {

crates/biome_css_parser/src/syntax/property/mod.rs

@@ -380,7 +380,7 @@ pub(crate) fn parse_generic_component_value(p: &mut CssParser) -> ParsedSyntax {
 
 const GENERIC_DELIMITER_SET: TokenSet<CssSyntaxKind> = token_set![T![,], T![/]];
 #[inline]
-fn is_at_generic_delimiter(p: &mut CssParser) -> bool {
+pub(crate) fn is_at_generic_delimiter(p: &mut CssParser) -> bool {
     p.at_ts(GENERIC_DELIMITER_SET)
 }
 

crates/biome_css_parser/src/syntax/scss/expression/mod.rs

@@ -1,15 +1,17 @@
+use crate::lexer::CssReLexContext;
 use crate::parser::CssParser;
 use crate::syntax::parse_error::{
     expected_component_value, expected_scss_expression, scss_ellipsis_not_allowed,
 };
-use crate::syntax::property::parse_generic_component_value;
+use crate::syntax::property::{is_at_generic_delimiter, parse_generic_component_value};
 use crate::syntax::scss::{is_at_scss_identifier, parse_scss_identifier};
+use crate::syntax::value::dimension::is_at_any_dimension;
 use biome_css_syntax::CssSyntaxKind::{
-    CSS_BOGUS_PROPERTY_VALUE, EOF, SCSS_ARBITRARY_ARGUMENT, SCSS_BINARY_EXPRESSION,
-    SCSS_EXPRESSION, SCSS_EXPRESSION_ITEM_LIST, SCSS_KEYWORD_ARGUMENT, SCSS_LIST_EXPRESSION,
-    SCSS_LIST_EXPRESSION_ELEMENT, SCSS_LIST_EXPRESSION_ELEMENT_LIST, SCSS_MAP_EXPRESSION,
-    SCSS_MAP_EXPRESSION_PAIR, SCSS_MAP_EXPRESSION_PAIR_LIST, SCSS_PARENTHESIZED_EXPRESSION,
-    SCSS_UNARY_EXPRESSION,
+    CSS_BOGUS_PROPERTY_VALUE, CSS_NUMBER_LITERAL, EOF, SCSS_ARBITRARY_ARGUMENT,
+    SCSS_BINARY_EXPRESSION, SCSS_EXPRESSION, SCSS_EXPRESSION_ITEM_LIST, SCSS_KEYWORD_ARGUMENT,
+    SCSS_LIST_EXPRESSION, SCSS_LIST_EXPRESSION_ELEMENT, SCSS_LIST_EXPRESSION_ELEMENT_LIST,
+    SCSS_MAP_EXPRESSION, SCSS_MAP_EXPRESSION_PAIR, SCSS_MAP_EXPRESSION_PAIR_LIST,
+    SCSS_PARENTHESIZED_EXPRESSION, SCSS_UNARY_EXPRESSION,
 };
 use biome_css_syntax::{CssSyntaxKind, T};
 use biome_parser::parse_recovery::ParseRecoveryTokenSet;
@@ -40,7 +42,6 @@ const SCSS_MAP_EXPRESSION_KEY_END_TOKEN_SET: TokenSet<CssSyntaxKind> =
 const SCSS_MAP_EXPRESSION_VALUE_END_TOKEN_SET: TokenSet<CssSyntaxKind> = token_set![T![,], T![')']];
 const SCSS_LIST_EXPRESSION_ELEMENT_END_TOKEN_SET: TokenSet<CssSyntaxKind> =
     token_set![T![,], T![')']];
-
 pub(crate) const END_OF_SCSS_EXPRESSION_TOKEN_SET: TokenSet<CssSyntaxKind> =
     token_set![T![,], T![')'], T![;], T!['}']];
 
@@ -158,27 +159,28 @@ fn parse_scss_expression_item(p: &mut CssParser, options: ScssExpressionOptions)
         return parse_scss_keyword_argument(p, options);
     }
 
-    let expression = parse_scss_binary_expression(p, 0);
+    if is_at_generic_delimiter(p) {
+        return parse_generic_component_value(p);
+    }
+
+    let expression = parse_scss_binary_expression(p, 0).or_else(|| {
+        if p.at(T![...]) {
+            report_and_bump_scss_ellipsis(p);
+        }
+
+        Absent
+    });
     let expression = match expression {
         Present(expression) => expression,
-        Absent => {
-            if p.at(T![...]) {
-                let range = p.cur_range();
-                p.error(scss_ellipsis_not_allowed(p, range));
-                p.bump(T![...]);
-            }
-            return Absent;
-        }
+        Absent => return Absent,
     };
 
     if !p.at(T![...]) {
         return Present(expression);
     }
 
     if !options.allows_ellipsis {
-        let range = p.cur_range();
-        p.error(scss_ellipsis_not_allowed(p, range));
-        p.bump(T![...]);
+        report_and_bump_scss_ellipsis(p);
         return Present(expression);
     }
 
@@ -187,6 +189,13 @@ fn parse_scss_expression_item(p: &mut CssParser, options: ScssExpressionOptions)
     Present(m.complete(p, SCSS_ARBITRARY_ARGUMENT))
 }
 
+#[inline]
+fn report_and_bump_scss_ellipsis(p: &mut CssParser) {
+    let range = p.cur_range();
+    p.error(scss_ellipsis_not_allowed(p, range));
+    p.bump(T![...]);
+}
+
 #[inline]
 fn is_at_scss_keyword_argument(p: &mut CssParser, options: ScssExpressionOptions) -> bool {
     options.allows_keyword_arguments
@@ -266,11 +275,29 @@ fn parse_scss_primary_expression(p: &mut CssParser) -> ParsedSyntax {
     }
 }
 
+/// Re-lexes signed numeric tokens in SCSS expression context.
+///
+/// If the current token is `CSS_NUMBER_LITERAL` or any dimension starting with `+` or `-`,
+/// this mutates parser state via `CssParser::re_lex(CssReLexContext::ScssExpression)`.
+#[inline]
+fn re_lex_signed_numeric_as_scss_operator(p: &mut CssParser) {
+    if !(p.at(CSS_NUMBER_LITERAL) || is_at_any_dimension(p)) {
+        return;
+    }
+
+    let text = p.cur_text();
+    if matches!(text.as_bytes().first(), Some(b'+' | b'-')) {
+        p.re_lex(CssReLexContext::ScssExpression);
+    }
+}
+
 /// Returns the precedence level for the current SCSS binary operator token.
 ///
 /// Docs: https://sass-lang.com/documentation/operators/#order-of-operations
 #[inline]
 fn scss_binary_precedence(p: &mut CssParser) -> Option<u8> {
+    re_lex_signed_numeric_as_scss_operator(p);
+
     if !p.at_ts(SCSS_BINARY_OPERATOR_TOKEN_SET) {
         return None;
     }