feat(css): use expression in page

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

@@ -1,13 +1,29 @@
 @page   :left{
 $padding:12px !default;
-padding:$padding;
+$scale:1+2*3;
+padding:$padding*$scale;
 
 font:{
 size:12px;
+family:$font-stack;
 }
 
+$map:(
+($padding+1):foo,
+(1+2):bar,
+);
+
 @top-left{
 $margin:4px !global;
-margin:$margin;
+margin:($margin+2)/2;
+border:1px solid $color{
+width:1px;
+color:$color;
+}
+}
+
+@top-right{
+theme.$gutter:8px;
+padding:theme.$gutter;
 }
 }

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

@@ -8,15 +8,31 @@ info: css/scss/declaration/page-at-rule.scss
 ```scss
 @page   :left{
 $padding:12px !default;
-padding:$padding;
+$scale:1+2*3;
+padding:$padding*$scale;
 
 font:{
 size:12px;
+family:$font-stack;
 }
 
+$map:(
+($padding+1):foo,
+(1+2):bar,
+);
+
 @top-left{
 $margin:4px !global;
-margin:$margin;
+margin:($margin+2)/2;
+border:1px solid $color{
+width:1px;
+color:$color;
+}
+}
+
+@top-right{
+theme.$gutter:8px;
+padding:theme.$gutter;
 }
 }
 
@@ -41,15 +57,31 @@ Trailing newline: true
 ```scss
 @page :left {
 	$padding: 12px !default;
-	padding: $padding;
+	$scale: 1 +2 * 3;
+	padding: $padding * $scale;
 
 	font: {
 		size: 12px;
+		family: $font-stack;
 	}
 
+	$map: (
+		($padding +1): foo,
+		(1 +2): bar,
+	);
+
 	@top-left {
 		$margin: 4px !global;
-		margin: $margin;
+		margin: ($margin +2) / 2;
+		border: 1px solid $color {
+			width: 1px;
+			color: $color;
+		}
+	}
+
+	@top-right {
+		theme.$gutter: 8px;
+		padding: theme.$gutter;
 	}
 }
 

crates/biome_css_parser/src/syntax/at_rule/page.rs

@@ -6,7 +6,10 @@ use crate::syntax::at_rule::parse_error::{
 use crate::syntax::at_rule::{is_at_at_rule, parse_at_rule};
 use crate::syntax::block::{ParseBlockBody, parse_declaration_or_at_rule_list_block};
 use crate::syntax::parse_error::scss_only_syntax_error;
-use crate::syntax::scss::{is_at_scss_nesting_declaration, parse_scss_nesting_declaration};
+use crate::syntax::scss::{
+    is_at_scss_declaration, is_at_scss_nesting_declaration, parse_scss_declaration,
+    parse_scss_nesting_declaration,
+};
 use crate::syntax::{
     CssSyntaxFeatures, is_at_any_declaration_with_semicolon, is_at_identifier,
     is_at_qualified_rule, parse_any_declaration_with_semicolon,
@@ -26,6 +29,18 @@ pub(crate) fn is_at_page_at_rule(p: &mut CssParser) -> bool {
     p.at(T![page])
 }
 
+/// Parses `@page` and allows SCSS declarations inside the block so variables can be
+/// scoped to the at-rule body.
+///
+/// Example:
+/// ```scss
+/// @page {
+///   $margin: 1cm;
+///   margin: $margin;
+/// }
+/// ```
+///
+/// Docs: https://sass-lang.com/documentation/variables
 #[inline]
 pub(crate) fn parse_page_at_rule(p: &mut CssParser) -> ParsedSyntax {
     if !is_at_page_at_rule(p) {
@@ -172,8 +187,9 @@ impl ParseBlockBody for PageBlock {
     fn is_at_element(&self, p: &mut CssParser) -> bool {
         at_margin_rule(p)
             || is_at_at_rule(p)
-            || is_at_scss_nesting_declaration(p)
-            || is_at_any_declaration_with_semicolon(p)
+           // SCSS allows variable declarations and nested properties inside any block.
+            || is_at_scss_declaration(p)
+            || is_at_scss_nesting_declaration(p) || is_at_any_declaration_with_semicolon(p)
             || is_at_qualified_rule(p)
     }
 
@@ -196,7 +212,16 @@ impl ParseNodeList for PageAtRuleItemList {
             parse_margin_at_rule(p)
         } else if is_at_at_rule(p) {
             parse_at_rule(p)
+        } else if is_at_scss_declaration(p) {
+            CssSyntaxFeatures::Scss.parse_exclusive_syntax(
+                p,
+                parse_scss_declaration,
+                |p, marker| {
+                    scss_only_syntax_error(p, "SCSS variable declarations", marker.range(p))
+                },
+            )
         } else if is_at_scss_nesting_declaration(p) {
+            // Keep nested property blocks intact inside @page.
             CssSyntaxFeatures::Scss.parse_exclusive_syntax(
                 p,
                 parse_scss_nesting_declaration,

crates/biome_css_parser/tests/css_test_suite/ok/scss/at-rule/page.scss

@@ -1,13 +1,27 @@
 @page :left {
   $padding: 12px !default;
-  padding: $padding;
-
+  $scale: 1 + 2 * 3;
+  padding: $padding * $scale;
   font: {
     size: 12px;
+    family: $font-stack;
   }
+  $map: (
+    ($padding + 1): foo,
+    (1 + 2): bar,
+  );
 
   @top-left {
     $margin: 4px !global;
-    margin: $margin;
+    margin: ($margin + 2) / 2;
+    border: 1px solid $color {
+      width: 1px;
+      color: $color;
+    }
+  }
+
+  @top-right {
+    theme.$gutter: 8px;
+    padding: theme.$gutter;
   }
 }