fix(parse/css): skip tailwind syntax in @import

.changeset/deep-areas-feel.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#7920](https://github.com/biomejs/biome/issues/7920): The CSS parser, with Tailwind directives enabled, will no longer error when you use things like `prefix(tw)` in `@import` at rules.

crates/biome_css_formatter/src/css/statements/import_at_rule.rs

@@ -18,7 +18,7 @@ impl FormatNodeRule<CssImportAtRule> for FormatCssImportAtRule {
         write!(f, [import_token.format(), space()])?;
 
         // Determine if there are any modifiers present.
-        let has_any_modifiers = layer.is_some() || supports.is_some() || media.len() > 0;
+        let has_any_modifiers = layer.is_some() || supports.is_some() || !media.is_empty();
 
         if has_any_modifiers {
             // If there are, we need to group them together and try to fill them.

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

@@ -3,6 +3,7 @@ use crate::syntax::at_rule::layer::LayerNameList;
 use crate::syntax::at_rule::media::MediaQueryList;
 use crate::syntax::at_rule::supports::error::expected_any_supports_condition;
 use crate::syntax::at_rule::supports::parse_any_supports_condition;
+use crate::syntax::util::skip_possible_tailwind_syntax;
 use crate::syntax::value::url::{is_at_url_function, parse_url_function};
 use crate::syntax::{is_at_declaration, is_at_string, parse_declaration, parse_string};
 use biome_css_syntax::CssSyntaxKind::*;
@@ -44,19 +45,25 @@ pub(crate) fn parse_import_at_rule(p: &mut CssParser) -> ParsedSyntax {
         CSS_BOGUS_AT_RULE
     };
 
+    skip_possible_tailwind_syntax(p);
+
     //  An optional cascade layer name, or for an anonymous layer.
     if is_at_import_named_layer(p) {
         parse_import_named_layer(p).ok();
     } else if is_at_import_anonymous_layer(p) {
         parse_import_anonymous_layer(p).ok();
     }
 
+    skip_possible_tailwind_syntax(p);
+
     if is_at_import_supports(p) {
         // An optional supports condition, we don't have an error here
         // is_at_import_supports validates the supports condition
         parse_import_supports(p).ok();
     }
 
+    skip_possible_tailwind_syntax(p);
+
     MediaQueryList::new(T![;]).parse_list(p);
 
     p.expect(T![;]);

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

@@ -2,6 +2,7 @@ use super::parse_error::expected_media_query;
 use crate::parser::CssParser;
 use crate::syntax::at_rule::feature::parse_any_query_feature;
 use crate::syntax::block::parse_conditional_block;
+use crate::syntax::util::skip_possible_tailwind_syntax;
 use crate::syntax::{
     is_at_identifier, is_at_metavariable, is_nth_at_identifier, parse_metavariable,
     parse_regular_identifier,
@@ -66,7 +67,11 @@ impl ParseSeparatedList for MediaQueryList {
     const LIST_KIND: Self::Kind = CSS_MEDIA_QUERY_LIST;
 
     fn parse_element(&mut self, p: &mut Self::Parser<'_>) -> ParsedSyntax {
-        parse_any_media_query(p)
+        let parsed = parse_any_media_query(p);
+        if parsed.is_present() {
+            skip_possible_tailwind_syntax(p);
+        }
+        parsed
     }
 
     fn is_at_list_end(&self, p: &mut Self::Parser<'_>) -> bool {

crates/biome_css_parser/src/syntax/mod.rs

@@ -4,6 +4,7 @@ mod css_modules;
 mod parse_error;
 mod property;
 mod selector;
+mod util;
 mod value;
 
 use crate::lexer::CssLexContext;

crates/biome_css_parser/src/syntax/util.rs

@@ -0,0 +1,32 @@
+use biome_css_syntax::CssSyntaxKind::*;
+use biome_css_syntax::T;
+use biome_parser::Parser;
+use biome_parser::SyntaxFeature;
+use biome_parser::token_set;
+
+use crate::parser::CssParser;
+use crate::syntax::CssSyntaxFeatures;
+
+/// Skips possible Tailwind CSS specific syntax in the `@import` rule that we don't know how to handle yet.
+///
+/// See: https://github.com/biomejs/biome/issues/7920
+pub(crate) fn skip_possible_tailwind_syntax(p: &mut CssParser) {
+    if CssSyntaxFeatures::Tailwind.is_supported(p)
+        && p.at_ts(token_set![IDENT, T![source], T![theme], T![important]])
+    {
+        if p.cur_text() == "prefix" || p.cur_text() == "source" || p.cur_text() == "theme" {
+            p.parse_as_skipped_trivia_tokens(skip_tailwind_function_clause)
+        } else if p.cur_text() == "important" {
+            p.parse_as_skipped_trivia_tokens(|p| p.bump_any());
+        }
+    }
+}
+
+fn skip_tailwind_function_clause(p: &mut CssParser) {
+    while !(p.at(EOF) || p.at(T![')'])) {
+        p.bump_any();
+    }
+    if p.at(T![')']) {
+        p.bump_any(); // consume ')'
+    }
+}

crates/biome_css_parser/tests/css_test_suite/ok/at_rule/at_rule_import.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_css_parser/tests/spec_test.rs
 expression: snapshot
 ---
-
 ## Input
 
 ```css
@@ -6804,5 +6803,3 @@ CssRoot {
   2: EOF@6505..6506 "" [Newline("\n")] []
 
 ```
-
-

crates/biome_css_parser/tests/css_test_suite/ok/tailwind/tw-import.css

@@ -0,0 +1,6 @@
+@import "tailwindcss/theme.css" layer(theme) supports(display: flex) screen prefix(tw);
+@import "tailwindcss/theme.css" layer(theme) prefix(tw);
+@import "tailwindcss/utilities.css" prefix(tw) layer(utilities);
+@import "tailwindcss" source("../src");
+@import "tailwindcss/utilities.css" layer(utilities) important;
+@import "tailwindcss/theme.css" layer(theme) theme(static);