feat(css): parse scss interpolation for selectors and declaration names

crates/biome_css_analyze/src/assist/source/use_sorted_properties.rs

@@ -270,6 +270,13 @@ impl RecessOrderMember {
                                 NodeKindOrder::CustomProperty
                             }
                             AnyCssDeclarationName::CssIdentifier(_) => NodeKindOrder::Declaration,
+                            AnyCssDeclarationName::ScssInterpolatedIdentifier(name) => {
+                                if name.syntax().text_trimmed().starts_with("--") {
+                                    NodeKindOrder::CustomProperty
+                                } else {
+                                    NodeKindOrder::Declaration
+                                }
+                            }
                             AnyCssDeclarationName::TwValueThemeReference(_) => {
                                 NodeKindOrder::Declaration
                             }

crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs

@@ -3,8 +3,9 @@ use biome_analyze::{
 };
 use biome_console::markup;
 use biome_css_syntax::{
-    AnyCssAtRule, CssContainerAtRule, CssFunctionAtRule, CssGenericProperty, CssLayerAtRule,
-    CssMediaAtRule, CssScopeAtRule, CssStartingStyleAtRule, CssSupportsAtRule, TwApplyAtRule,
+    AnyCssAtRule, AnyCssDeclarationName, CssContainerAtRule, CssFunctionAtRule,
+    CssGenericProperty, CssLayerAtRule, CssMediaAtRule, CssScopeAtRule,
+    CssStartingStyleAtRule, CssSupportsAtRule, TwApplyAtRule,
 };
 use biome_diagnostics::Severity;
 use biome_rowan::{AstNode, TextRange, declare_node_union};
@@ -117,8 +118,9 @@ impl Rule for NoUnknownProperty {
             return None;
         }
 
-        let property_name = node.name().ok()?.to_trimmed_text();
-        let property_name_lower = property_name.to_ascii_lowercase_cow();
+        let property_name = node.name().ok()?;
+        let property_name_token = declaration_name_value_token(&property_name)?;
+        let property_name_lower = property_name_token.text_trimmed().to_ascii_lowercase_cow();
 
         let in_function_at_rule = node.syntax().ancestors().skip(1).any(|ancestor| {
             if CssFunctionAtRule::can_cast(ancestor.kind()) {
@@ -140,7 +142,7 @@ impl Rule for NoUnknownProperty {
             && !vendor_prefixed(&property_name_lower)
             && !should_ignore(&property_name_lower, ctx.options())
         {
-            return Some(node.name().ok()?.range());
+            return Some(property_name.range());
         }
         None
     }
@@ -182,3 +184,16 @@ fn should_ignore(name: &str, options: &NoUnknownPropertyOptions) -> bool {
     }
     false
 }
+
+fn declaration_name_value_token(
+    name: &AnyCssDeclarationName,
+) -> Option<biome_css_syntax::CssSyntaxToken> {
+    match name {
+        AnyCssDeclarationName::CssDashedIdentifier(name) => name.value_token().ok(),
+        AnyCssDeclarationName::CssIdentifier(name) => name.value_token().ok(),
+        AnyCssDeclarationName::TwValueThemeReference(name) => {
+            name.reference().ok()?.value_token().ok()
+        }
+        AnyCssDeclarationName::ScssInterpolatedIdentifier(_) => None,
+    }
+}

crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.tailwind.css

@@ -5,3 +5,7 @@
 	allow: "anything";
 	in: here;
 }
+
+.button {
+	--color-*: initial;
+}

crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/valid.tailwind.css.snap

@@ -12,4 +12,8 @@ expression: valid.tailwind.css
 	in: here;
 }
 
+.button {
+	--color-*: initial;
+}
+
 ```

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

@@ -10,6 +10,7 @@ impl FormatRule<AnyCssDeclarationName> for FormatAnyCssDeclarationName {
         match node {
             AnyCssDeclarationName::CssDashedIdentifier(node) => node.format().fmt(f),
             AnyCssDeclarationName::CssIdentifier(node) => node.format().fmt(f),
+            AnyCssDeclarationName::ScssInterpolatedIdentifier(node) => node.format().fmt(f),
             AnyCssDeclarationName::TwValueThemeReference(node) => node.format().fmt(f),
         }
     }

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

@@ -0,0 +1,5 @@
+@font-face{
+#{$name}:1px;
+margin-#{$side}:1px;
+--theme-#{$slot}:red;
+}

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

@@ -0,0 +1,40 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/at-rule/declaration-block-interpolation.scss
+---
+
+# Input
+
+```scss
+@font-face{
+#{$name}:1px;
+margin-#{$side}:1px;
+--theme-#{$slot}:red;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+@font-face {
+	#{$name}: 1px;
+	margin-#{$side}: 1px;
+	--theme-#{$slot}: red;
+}
+
+```

crates/biome_css_formatter/tests/specs/css/scss/at-rule/supports-expression.scss

@@ -0,0 +1,35 @@
+$base: 10;
+
+@import "theme.css" supports( #{$name}:$base + 1);
+@import "theme.css" supports( margin-#{$side}:$base + 1);
+@import "theme.css" supports(--theme-#{$slot}:red);
+
+.box {
+  @supports not ( #{$name}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports ( #{$name}:$base + 1 ) and ( display:grid ) {
+    width:$base + 1;
+  }
+
+  @supports ( #{$name}:$base + 1 ) or ( margin-#{$side}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports (( #{$name}:$base + 1 ) and (--theme-#{$slot}:red)) {
+    color:red;
+  }
+
+  @supports ( margin-#{$side}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports ( --theme-#{$slot}:red ) {
+    color:red;
+  }
+
+  @supports selector( .foo-#{$name} ) {
+    color:red;
+  }
+}

crates/biome_css_formatter/tests/specs/css/scss/at-rule/supports-expression.scss.snap

@@ -0,0 +1,100 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/scss/at-rule/supports-expression.scss
+---
+
+# Input
+
+```scss
+$base: 10;
+
+@import "theme.css" supports( #{$name}:$base + 1);
+@import "theme.css" supports( margin-#{$side}:$base + 1);
+@import "theme.css" supports(--theme-#{$slot}:red);
+
+.box {
+  @supports not ( #{$name}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports ( #{$name}:$base + 1 ) and ( display:grid ) {
+    width:$base + 1;
+  }
+
+  @supports ( #{$name}:$base + 1 ) or ( margin-#{$side}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports (( #{$name}:$base + 1 ) and (--theme-#{$slot}:red)) {
+    color:red;
+  }
+
+  @supports ( margin-#{$side}:$base + 1 ) {
+    width:$base + 1;
+  }
+
+  @supports ( --theme-#{$slot}:red ) {
+    color:red;
+  }
+
+  @supports selector( .foo-#{$name} ) {
+    color:red;
+  }
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+$base: 10;
+
+@import "theme.css" supports(#{$name}: $base + 1);
+@import "theme.css" supports(margin-#{$side}: $base + 1);
+@import "theme.css" supports(--theme-#{$slot}: red);
+
+.box {
+	@supports not (#{$name}: $base + 1) {
+		width: $base + 1;
+	}
+
+	@supports (#{$name}: $base + 1) and (display: grid) {
+		width: $base + 1;
+	}
+
+	@supports (#{$name}: $base + 1) or (margin-#{$side}: $base + 1) {
+		width: $base + 1;
+	}
+
+	@supports ((#{$name}: $base + 1) and (--theme-#{$slot}: red)) {
+		color: red;
+	}
+
+	@supports (margin-#{$side}: $base + 1) {
+		width: $base + 1;
+	}
+
+	@supports (--theme-#{$slot}: red) {
+		color: red;
+	}
+
+	@supports selector(.foo-#{$name}) {
+		color: red;
+	}
+}
+
+```

crates/biome_css_formatter/tests/specs/css/scss/declaration/ambiguous-selector-vs-nesting.scss

@@ -3,4 +3,8 @@
   font:bold{color:blue;}
   font:12px{family:sans-serif;}
   font: bold{family:serif;}
+  #{$name}:hover{color:green;}
+  a:#{$pseudo}{color:teal;}
+  font-#{$weight}:bold{color:purple;}
+  font-#{$weight}::before{color:orange;}
 }

crates/biome_css_formatter/tests/specs/css/scss/declaration/ambiguous-selector-vs-nesting.scss.snap

@@ -11,6 +11,10 @@ info: css/scss/declaration/ambiguous-selector-vs-nesting.scss
   font:bold{color:blue;}
   font:12px{family:sans-serif;}
   font: bold{family:serif;}
+  #{$name}:hover{color:green;}
+  a:#{$pseudo}{color:teal;}
+  font-#{$weight}:bold{color:purple;}
+  font-#{$weight}::before{color:orange;}
 }
 
 ```
@@ -45,6 +49,18 @@ Trailing newline: true
 	font: bold {
 		family: serif;
 	}
+	#{$name}:hover {
+		color: green;
+	}
+	a: #{$pseudo} {
+		color: teal;
+	}
+	font-#{$weight}:bold {
+		color: purple;
+	}
+	font-#{$weight}::before {
+		color: orange;
+	}
 }
 
 ```

crates/biome_css_formatter/tests/specs/css/scss/declaration/interpolation.scss

@@ -0,0 +1,5 @@
+.box{
+#{$name}:1px;
+margin-#{$side}:1px;
+--theme-#{$slot}:red;
+}

crates/biome_css_formatter/tests/specs/css/scss/declaration/interpolation.scss.snap

@@ -0,0 +1,41 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+assertion_line: 212
+info: css/scss/declaration/interpolation.scss
+---
+
+# Input
+
+```scss
+.box{
+#{$name}:1px;
+margin-#{$side}:1px;
+--theme-#{$slot}:red;
+}
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+Trailing newline: true
+-----
+
+```scss
+.box {
+	#{$name}: 1px;
+	margin-#{$side}: 1px;
+	--theme-#{$slot}: red;
+}
+
+```

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

@@ -1,6 +1,5 @@
 ---
 source: crates/biome_formatter_test/src/snapshot_builder.rs
-assertion_line: 212
 info: css/scss/declaration/nested-properties-empty-value.scss
 ---
 

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

@@ -2,6 +2,9 @@
 $padding:12px !default;
 $scale:1+2*3;
 padding:$padding*$scale;
+#{$name}:1px;
+margin-#{$side}:1px;
+--theme-#{$slot}:red;
 
 font:{
 size:12px;
@@ -25,5 +28,8 @@ color:$color;
 @top-right{
 theme.$gutter:8px;
 padding:theme.$gutter;
+#{$inner}:2px;
+margin-#{$inner-side}:2px;
+--theme-#{$inner-slot}:blue;
 }
 }