fix(parse/css): parse tailwind @source inline(...)

.changeset/ten-ears-stand.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#7854](https://github.com/biomejs/biome/issues/7854): The CSS parser, with `tailwindDirectives` enabled, will now parse `@source inline("underline");`.

crates/biome_css_formatter/src/generated.rs

@@ -5822,6 +5822,44 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::TwSourceAtRule {
         )
     }
 }
+impl FormatRule<biome_css_syntax::TwSourceInline>
+    for crate::tailwind::auxiliary::source_inline::FormatTwSourceInline
+{
+    type Context = CssFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_css_syntax::TwSourceInline,
+        f: &mut CssFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_css_syntax::TwSourceInline>::fmt(self, node, f)
+    }
+}
+impl AsFormat<CssFormatContext> for biome_css_syntax::TwSourceInline {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::TwSourceInline,
+        crate::tailwind::auxiliary::source_inline::FormatTwSourceInline,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::tailwind::auxiliary::source_inline::FormatTwSourceInline::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::TwSourceInline {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::TwSourceInline,
+        crate::tailwind::auxiliary::source_inline::FormatTwSourceInline,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::tailwind::auxiliary::source_inline::FormatTwSourceInline::default(),
+        )
+    }
+}
 impl FormatRule<biome_css_syntax::TwThemeAtRule>
     for crate::tailwind::statements::theme_at_rule::FormatTwThemeAtRule
 {
@@ -9595,6 +9633,31 @@ impl IntoFormat<CssFormatContext> for biome_css_syntax::AnyTwCustomVariantSelect
         FormatOwnedWithRule :: new (self , crate :: tailwind :: any :: custom_variant_selector :: FormatAnyTwCustomVariantSelector :: default ())
     }
 }
+impl AsFormat<CssFormatContext> for biome_css_syntax::AnyTwSource {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_css_syntax::AnyTwSource,
+        crate::tailwind::any::source::FormatAnyTwSource,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::tailwind::any::source::FormatAnyTwSource::default(),
+        )
+    }
+}
+impl IntoFormat<CssFormatContext> for biome_css_syntax::AnyTwSource {
+    type Format = FormatOwnedWithRule<
+        biome_css_syntax::AnyTwSource,
+        crate::tailwind::any::source::FormatAnyTwSource,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::tailwind::any::source::FormatAnyTwSource::default(),
+        )
+    }
+}
 impl AsFormat<CssFormatContext> for biome_css_syntax::AnyTwUtilityName {
     type Format<'a> = FormatRefWithRule<
         'a,

crates/biome_css_formatter/src/tailwind/any/mod.rs

@@ -1,4 +1,5 @@
 //! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
 
 pub(crate) mod custom_variant_selector;
+pub(crate) mod source;
 pub(crate) mod utility_name;

crates/biome_css_formatter/src/tailwind/any/source.rs

@@ -0,0 +1,15 @@
+//! This is a generated file. Don't modify it by hand! Run 'cargo codegen formatter' to re-generate the file.
+
+use crate::prelude::*;
+use biome_css_syntax::AnyTwSource;
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatAnyTwSource;
+impl FormatRule<AnyTwSource> for FormatAnyTwSource {
+    type Context = CssFormatContext;
+    fn fmt(&self, node: &AnyTwSource, f: &mut CssFormatter) -> FormatResult<()> {
+        match node {
+            AnyTwSource::CssString(node) => node.format().fmt(f),
+            AnyTwSource::TwSourceInline(node) => node.format().fmt(f),
+        }
+    }
+}

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

@@ -2,4 +2,5 @@
 
 pub(crate) mod custom_variant_shorthand;
 pub(crate) mod functional_utility_name;
+pub(crate) mod source_inline;
 pub(crate) mod value_theme_reference;

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

@@ -0,0 +1,26 @@
+use crate::prelude::*;
+use biome_css_syntax::{TwSourceInline, TwSourceInlineFields};
+use biome_formatter::write;
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatTwSourceInline;
+impl FormatNodeRule<TwSourceInline> for FormatTwSourceInline {
+    fn fmt_fields(&self, node: &TwSourceInline, f: &mut CssFormatter) -> FormatResult<()> {
+        let TwSourceInlineFields {
+            inline_token,
+            l_paren_token,
+            content,
+            r_paren_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                inline_token.format(),
+                l_paren_token.format(),
+                &content.format(),
+                r_paren_token.format(),
+            ]
+        )
+    }
+}

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

@@ -8,14 +8,14 @@ impl FormatNodeRule<TwSourceAtRule> for FormatTwSourceAtRule {
         let TwSourceAtRuleFields {
             source_token,
             not_token,
-            path,
+            source,
             semicolon_token,
         } = node.as_fields();
 
         write!(f, [source_token.format(), space()])?;
         if let Some(not_token) = not_token {
             write!(f, [not_token.format(), space()])?;
         }
-        write!(f, [path.format(), semicolon_token.format()])
+        write!(f, [source.format(), semicolon_token.format()])
     }
 }

crates/biome_css_formatter/tests/specs/css/tailwind/source-inline.css

@@ -0,0 +1,2 @@
+@source inline("underline font-bold text-center");
+@source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");

crates/biome_css_formatter/tests/specs/css/tailwind/source-inline.css.snap

@@ -0,0 +1,56 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: css/tailwind/source-inline.css
+---
+# Input
+
+```css
+@source inline("underline font-bold text-center");
+@source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+@source inline("underline font-bold text-center");
+@source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");
+```
+
+# Lines exceeding max width of 80 characters
+```
+    2: @source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");
+```
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Quote style: Double Quotes
+-----
+
+```css
+@source inline("underline font-bold text-center");
+@source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");
+```
+
+# Lines exceeding max width of 80 characters
+```
+    2: @source inline("underline font-bold text-center bg-blue-500 hover:bg-blue-700 text-white font-large py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-300 ease-in-out");
+```

crates/biome_css_parser/src/lexer/mod.rs

@@ -940,6 +940,7 @@ impl<'src> CssLexer<'src> {
             b"config" => CONFIG_KW,
             b"plugin" => PLUGIN_KW,
             b"slot" => SLOT_KW,
+            b"inline" => INLINE_KW,
             _ => IDENT,
         }
     }

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

@@ -3,7 +3,9 @@ use crate::parser::CssParser;
 use crate::syntax::block::{
     parse_declaration_block, parse_declaration_or_rule_list_block, parse_rule_block,
 };
-use crate::syntax::parse_error::{expected_identifier, expected_selector, expected_string};
+use crate::syntax::parse_error::{
+    expected_identifier, expected_selector, expected_string, expected_tw_source,
+};
 use crate::syntax::selector::parse_selector;
 use crate::syntax::{is_at_identifier, parse_identifier, parse_regular_identifier, parse_string};
 use biome_css_syntax::CssSyntaxKind::{self, *};
@@ -228,12 +230,30 @@ pub(crate) fn parse_source_at_rule(p: &mut CssParser) -> ParsedSyntax {
     if p.at(T![not]) {
         p.bump(T![not]);
     }
-    parse_string(p).or_add_diagnostic(p, expected_string);
+    if p.at(T![inline]) {
+        parse_source_inline(p).or_add_diagnostic(p, expected_tw_source);
+    } else {
+        parse_string(p).or_add_diagnostic(p, expected_tw_source);
+    }
     p.expect(T![;]);
 
     Present(m.complete(p, TW_SOURCE_AT_RULE))
 }
 
+pub(crate) fn parse_source_inline(p: &mut CssParser) -> ParsedSyntax {
+    if !p.at(T![inline]) {
+        return Absent;
+    }
+
+    let m = p.start();
+    p.expect(T![inline]);
+    p.expect(T!['(']);
+    parse_string(p).or_add_diagnostic(p, expected_string);
+    p.expect(T![')']);
+
+    Present(m.complete(p, TW_SOURCE_INLINE))
+}
+
 // @reference "../../app.css";
 pub(crate) fn parse_reference_at_rule(p: &mut CssParser) -> ParsedSyntax {
     if !p.at(T![reference]) {

crates/biome_css_parser/src/syntax/parse_error.rs

@@ -239,3 +239,7 @@ pub(crate) fn tailwind_disabled(p: &CssParser, range: TextRange) -> ParseDiagnos
             "Enable "<Emphasis>"`tailwindDirectives`"</Emphasis>" in the css parser options, or remove this if you are not using Tailwind CSS."
         })
 }
+
+pub(crate) fn expected_tw_source(p: &CssParser, range: TextRange) -> ParseDiagnostic {
+    expected_any(&["string literal", "inline(\"...\")"], range, p)
+}

crates/biome_css_parser/tests/css_test_suite/error/tailwind/when-enabled/source.css

@@ -0,0 +1,2 @@
+@source ;
+@source not ;