feat(format/css): implement formatters for new tailwind nodes

.changeset/tasty-hairs-shop.md

@@ -2,7 +2,7 @@
 "@biomejs/biome": minor
 ---
 
-Added a new CSS parser option `tailwindDirectives`. Enabling this option will allow all of Tailwind v4's syntax additions to be parsed by Biome.
+Added a new CSS parser option `tailwindDirectives`. Enabling this option will allow all of Tailwind v4's syntax additions to be parsed and formatted by Biome.
 
 You can enable this by setting `css.parser.tailwindDirectives` to `true` in your Biome configuration.
 

crates/biome_css_formatter/src/tailwind/auxiliary/custom_variant_shorthand.rs

@@ -1,6 +1,7 @@
 use crate::prelude::*;
-use biome_css_syntax::TwCustomVariantShorthand;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwCustomVariantShorthand, TwCustomVariantShorthandFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwCustomVariantShorthand;
 impl FormatNodeRule<TwCustomVariantShorthand> for FormatTwCustomVariantShorthand {
@@ -9,6 +10,21 @@ impl FormatNodeRule<TwCustomVariantShorthand> for FormatTwCustomVariantShorthand
         node: &TwCustomVariantShorthand,
         f: &mut CssFormatter,
     ) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwCustomVariantShorthandFields {
+            l_paren_token,
+            selector,
+            r_paren_token,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                l_paren_token.format(),
+                selector.format(),
+                r_paren_token.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/auxiliary/functional_utility_name.rs

@@ -1,10 +1,24 @@
 use crate::prelude::*;
-use biome_css_syntax::TwFunctionalUtilityName;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwFunctionalUtilityName, TwFunctionalUtilityNameFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwFunctionalUtilityName;
 impl FormatNodeRule<TwFunctionalUtilityName> for FormatTwFunctionalUtilityName {
     fn fmt_fields(&self, node: &TwFunctionalUtilityName, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwFunctionalUtilityNameFields {
+            identifier,
+            minus_token,
+            star_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                identifier.format(),
+                minus_token.format(),
+                star_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/auxiliary/value_theme_reference.rs

@@ -1,10 +1,23 @@
 use crate::prelude::*;
-use biome_css_syntax::TwValueThemeReference;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwValueThemeReference, TwValueThemeReferenceFields};
+use biome_formatter::write;
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwValueThemeReference;
 impl FormatNodeRule<TwValueThemeReference> for FormatTwValueThemeReference {
     fn fmt_fields(&self, node: &TwValueThemeReference, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwValueThemeReferenceFields {
+            reference,
+            minus_token,
+            star_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                reference.format(),
+                minus_token.format(),
+                star_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/lists/apply_class_list.rs

@@ -5,6 +5,8 @@ pub(crate) struct FormatTwApplyClassList;
 impl FormatRule<TwApplyClassList> for FormatTwApplyClassList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &TwApplyClassList, f: &mut CssFormatter) -> FormatResult<()> {
-        f.join().entries(node.iter().formatted()).finish()
+        f.join_with(space())
+            .entries(node.iter().formatted())
+            .finish()
     }
 }

crates/biome_css_formatter/src/tailwind/statements/apply_at_rule.rs

@@ -1,10 +1,25 @@
 use crate::prelude::*;
-use biome_css_syntax::TwApplyAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwApplyAtRule, TwApplyAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwApplyAtRule;
 impl FormatNodeRule<TwApplyAtRule> for FormatTwApplyAtRule {
     fn fmt_fields(&self, node: &TwApplyAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwApplyAtRuleFields {
+            apply_token,
+            classes,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                apply_token.format(),
+                space(),
+                classes.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/config_at_rule.rs

@@ -1,10 +1,25 @@
 use crate::prelude::*;
-use biome_css_syntax::TwConfigAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwConfigAtRule, TwConfigAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwConfigAtRule;
 impl FormatNodeRule<TwConfigAtRule> for FormatTwConfigAtRule {
     fn fmt_fields(&self, node: &TwConfigAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwConfigAtRuleFields {
+            config_token,
+            path,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                config_token.format(),
+                space(),
+                path.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/custom_variant_at_rule.rs

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::TwCustomVariantAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwCustomVariantAtRule, TwCustomVariantAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwCustomVariantAtRule;
 impl FormatNodeRule<TwCustomVariantAtRule> for FormatTwCustomVariantAtRule {
     fn fmt_fields(&self, node: &TwCustomVariantAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwCustomVariantAtRuleFields {
+            custom_variant_token,
+            name,
+            selector,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                custom_variant_token.format(),
+                space(),
+                name.format(),
+                space(),
+                selector.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/plugin_at_rule.rs

@@ -1,10 +1,25 @@
 use crate::prelude::*;
-use biome_css_syntax::TwPluginAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwPluginAtRule, TwPluginAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwPluginAtRule;
 impl FormatNodeRule<TwPluginAtRule> for FormatTwPluginAtRule {
     fn fmt_fields(&self, node: &TwPluginAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwPluginAtRuleFields {
+            plugin_token,
+            name,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                plugin_token.format(),
+                space(),
+                name.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/reference_at_rule.rs

@@ -1,10 +1,25 @@
 use crate::prelude::*;
-use biome_css_syntax::TwReferenceAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwReferenceAtRule, TwReferenceAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwReferenceAtRule;
 impl FormatNodeRule<TwReferenceAtRule> for FormatTwReferenceAtRule {
     fn fmt_fields(&self, node: &TwReferenceAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwReferenceAtRuleFields {
+            reference_token,
+            path,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                reference_token.format(),
+                space(),
+                path.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/source_at_rule.rs

@@ -1,10 +1,24 @@
 use crate::prelude::*;
-use biome_css_syntax::TwSourceAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwSourceAtRule, TwSourceAtRuleFields};
+use biome_formatter::write;
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwSourceAtRule;
 impl FormatNodeRule<TwSourceAtRule> for FormatTwSourceAtRule {
     fn fmt_fields(&self, node: &TwSourceAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwSourceAtRuleFields {
+            source_token,
+            path,
+            semicolon_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                source_token.format(),
+                space(),
+                path.format(),
+                semicolon_token.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/theme_at_rule.rs

@@ -1,10 +1,21 @@
 use crate::prelude::*;
-use biome_css_syntax::TwThemeAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwThemeAtRule, TwThemeAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwThemeAtRule;
 impl FormatNodeRule<TwThemeAtRule> for FormatTwThemeAtRule {
     fn fmt_fields(&self, node: &TwThemeAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwThemeAtRuleFields {
+            theme_token,
+            name,
+            block,
+        } = node.as_fields();
+
+        write!(f, [theme_token.format()])?;
+        if let Some(name) = name {
+            write!(f, [space(), name.format()])?;
+        }
+        write!(f, [space(), block.format()])
     }
 }

crates/biome_css_formatter/src/tailwind/statements/utility_at_rule.rs

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::TwUtilityAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwUtilityAtRule, TwUtilityAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwUtilityAtRule;
 impl FormatNodeRule<TwUtilityAtRule> for FormatTwUtilityAtRule {
     fn fmt_fields(&self, node: &TwUtilityAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwUtilityAtRuleFields {
+            utility_token,
+            name,
+            block,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                utility_token.format(),
+                space(),
+                name.format(),
+                space(),
+                block.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/src/tailwind/statements/variant_at_rule.rs

@@ -1,10 +1,26 @@
 use crate::prelude::*;
-use biome_css_syntax::TwVariantAtRule;
-use biome_rowan::AstNode;
+use biome_css_syntax::{TwVariantAtRule, TwVariantAtRuleFields};
+use biome_formatter::write;
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatTwVariantAtRule;
 impl FormatNodeRule<TwVariantAtRule> for FormatTwVariantAtRule {
     fn fmt_fields(&self, node: &TwVariantAtRule, f: &mut CssFormatter) -> FormatResult<()> {
-        format_css_verbatim_node(node.syntax()).fmt(f)
+        let TwVariantAtRuleFields {
+            variant_token,
+            name,
+            block,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                variant_token.format(),
+                space(),
+                name.format(),
+                space(),
+                block.format()
+            ]
+        )
     }
 }

crates/biome_css_formatter/tests/language.rs

@@ -23,7 +23,8 @@ impl TestFormatLanguage for CssTestFormatLanguage {
     fn parse(&self, text: &str) -> AnyParse {
         let options = CssParserOptions::default()
             .allow_wrong_line_comments()
-            .allow_css_modules();
+            .allow_css_modules()
+            .allow_tailwind_directives();
 
         parse_css(text, options).into()
     }

crates/biome_css_formatter/tests/quick_test.rs

@@ -8,7 +8,7 @@ mod language {
     include!("language.rs");
 }
 
-// #[ignore]
+#[ignore]
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {

crates/biome_css_formatter/tests/specs/css/tailwind/long-apply.css

@@ -0,0 +1,3 @@
+.foo {
+	@apply text-blue-500 hover:text-blue-600 accent-red accent-blue accent-green text-sm text-md hover:underline md:grid;
+}