biomejs · ematipico · Jan 28, 2026 · Nov 25, 2025 · Dec 3, 2025 · Dec 3, 2025
diff --git a/.changeset/witty-cats-see.md b/.changeset/witty-cats-see.md
@@ -0,0 +1,11 @@
+---
+"@biomejs/biome": minor
+---
+
+Added support for parsing and formatting the CSS `@function` at-rule from the [CSS Mixins Module Level 1](https://drafts.csswg.org/css-mixins-1/#function-rule) specification. Addresses issue [#8184](https://github.com/biomejs/biome/issues/8184).
+
+```css
+@function --transparent(--color <color>, --alpha <number>: 0.5) returns <color> {
+  result: oklch(from var(--color) l c h / var(--alpha));
+}
+```
diff --git a/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs b/crates/biome_css_analyze/src/lint/correctness/no_unknown_property.rs
@@ -3,8 +3,8 @@ use biome_analyze::{
 };
 use biome_console::markup;
 use biome_css_syntax::{
-    AnyCssAtRule, CssContainerAtRule, CssGenericProperty, CssLayerAtRule, CssMediaAtRule,
-    CssScopeAtRule, CssStartingStyleAtRule, CssSupportsAtRule, TwApplyAtRule,
+    AnyCssAtRule, CssContainerAtRule, CssFunctionAtRule, CssGenericProperty, CssLayerAtRule,
+    CssMediaAtRule, CssScopeAtRule, CssStartingStyleAtRule, CssSupportsAtRule, TwApplyAtRule,
 };
 use biome_diagnostics::Severity;
 use biome_rowan::{AstNode, TextRange, declare_node_union};
@@ -112,11 +112,26 @@ impl Rule for NoUnknownProperty {
 
             false
         });
+
         if is_at_rule_supporting_descriptors {
             return None;
         }
+
         let property_name = node.name().ok()?.to_trimmed_text();
         let property_name_lower = property_name.to_ascii_lowercase_cow();
+
+        let in_function_at_rule = node.syntax().ancestors().skip(1).any(|ancestor| {
+            if CssFunctionAtRule::can_cast(ancestor.kind()) {
+                return true;
+            }
+
+            false
+        });
+
+        if in_function_at_rule && property_name_lower == "result" {
+            return None;
+        }
+
         if !property_name_lower.starts_with("--")
             // Ignore `composes` property.
             // See https://github.com/css-modules/css-modules/blob/master/docs/composition.md for more details.
@@ -156,6 +171,7 @@ declare_node_union! {
                     | CssScopeAtRule
                     | CssStartingStyleAtRule
                     | CssSupportsAtRule
+                    | CssFunctionAtRule
 }
 
 fn should_ignore(name: &str, options: &NoUnknownPropertyOptions) -> bool {

diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css
@@ -5,3 +5,13 @@ a {
 a {
   my-property: 1;
 }
+
+.invalid-use-of-return {
+	result: 1;
+}
+
+@function --test-fn() {
+  bad-prop: blue;
+  /* should be valid in function body */
+  result: 1;
+}
diff --git a/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap b/crates/biome_css_analyze/tests/specs/correctness/noUnknownProperty/invalid.css.snap
@@ -1,7 +1,6 @@
 ---
 source: crates/biome_css_analyze/tests/spec_tests.rs
 expression: invalid.css
-snapshot_kind: text
 ---
 # Input
 ```css
@@ -13,6 +12,16 @@ a {
   my-property: 1;
 }
 
+.invalid-use-of-return {
+	result: 1;
+}
+
+@function --test-fn() {
+  bad-prop: blue;
+  /* should be valid in function body */
+  result: 1;
+}
+
 ```
 
 # Diagnostics
@@ -51,3 +60,39 @@ invalid.css:6:3 lint/correctness/noUnknownProperty ━━━━━━━━━
 
 
 ```
+
+```
+invalid.css:10:2 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Unknown property is not allowed.
+
+     9 │ .invalid-use-of-return {
+  > 10 │ 	result: 1;
+       │ 	^^^^^^
+    11 │ }
+    12 │ 
+
+  i See CSS Specifications and browser specific properties for more details.
+
+  i To resolve this issue, replace the unknown property with a valid CSS property.
+
+
+```
+
+```
+invalid.css:14:3 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Unknown property is not allowed.
+
+    13 │ @function --test-fn() {
+  > 14 │   bad-prop: blue;
+       │   ^^^^^^^^
+    15 │   /* should be valid in function body */
+    16 │   result: 1;
+
+  i See CSS Specifications and browser specific properties for more details.
+
+  i To resolve this issue, replace the unknown property with a valid CSS property.
+
+
+```
diff --git a/crates/biome_css_analyze/tests/specs/suspicious/noUnknownAtRules/valid.css b/crates/biome_css_analyze/tests/specs/suspicious/noUnknownAtRules/valid.css
@@ -122,3 +122,7 @@ url-prefix(http: //www.w3.org/Style/), domain(mozilla.org), regexp('https:.*')
      orientation: landscape;
  } */
 
+
+@function --test-fn() {
+  result: 1;
+}
diff --git a/crates/biome_css_analyze/tests/specs/suspicious/noUnknownAtRules/valid.css.snap b/crates/biome_css_analyze/tests/specs/suspicious/noUnknownAtRules/valid.css.snap
@@ -129,6 +129,10 @@ url-prefix(http: //www.w3.org/Style/), domain(mozilla.org), regexp('https:.*')
  } */
 
 
+@function --test-fn() {
+  result: 1;
+}
+
 ```
 
 _Note: The parser emitted 11 diagnostics which are not shown here._
diff --git a/crates/biome_css_factory/src/generated/node_factory.rs b/crates/biome_css_factory/src/generated/node_factory.rs