From bc5a8c3683624fcaa9067158bca12f51b592b6e1 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 10 Mar 2025 11:28:08 +0100
Subject: [PATCH] Ensure classes between `>` and `<` are properly extracted
 (#17094)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes an issue where candidates inside `>…<` were not always
correctly extracted. This happens in XML-like languages where the
classes are inside of these boundaries.

E.g.:
```html
<!-- Fluid template language -->
<f:variable name="bgStyle">
  <f:switch expression="{data.layout}">
    <f:case value="0">from-blue-900 to-cyan-200</f:case>
    <!--              ^^^^^^^^^^^^^^^^^^^^^^^^^      -->
    <f:case value="1">from-cyan-600 to-teal-200</f:case>
    <f:defaultCase>from-blue-300 to-cyan-100</f:defaultCase>
  </f:switch>
</f:variable>
```


Fixes: https://github.com/tailwindlabs/tailwindcss/issues/17088

# Test plan

1. Added a new test
2. Existing tests pass
---
 CHANGELOG.md                           |  1 +
 crates/oxide/src/extractor/boundary.rs | 12 ++++++++++++
 crates/oxide/src/extractor/mod.rs      | 26 ++++++++++++++++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b4190422..b34f6f3e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix `haml` pre-processing ([#17051](https://github.com/tailwindlabs/tailwindcss/pull/17051))
+- Ensure classes between `>` and `<` are properly extracted ([#17094](https://github.com/tailwindlabs/tailwindcss/pull/17094))
 
 ## [4.0.12] - 2025-03-07
 
diff --git a/crates/oxide/src/extractor/boundary.rs b/crates/oxide/src/extractor/boundary.rs
index 4e0f22089..78f9d3184 100644
--- a/crates/oxide/src/extractor/boundary.rs
+++ b/crates/oxide/src/extractor/boundary.rs
@@ -73,6 +73,12 @@ enum Class {
     //                         ^
     // ```
     #[bytes(b'}')]
+    // XML-like languages where classes are inside the tag, e.g.:
+    // ```
+    // <f:case value="0">from-blue-900 to-cyan-200</f:case>
+    //                  ^
+    // ```
+    #[bytes(b'>')]
     Before,
 
     // Clojure and Angular like languages, e.g.:
@@ -109,6 +115,12 @@ enum Class {
     // In this case there is some JavaScript embedded in an string in PHP and some of the quotes
     // need to be escaped.
     #[bytes(b'\\')]
+    // XML-like languages where classes are inside the tag, e.g.:
+    // ```
+    // <f:case value="0">from-blue-900 to-cyan-200</f:case>
+    //                                            ^
+    // ```
+    #[bytes(b'<')]
     After,
 
     #[fallback]
diff --git a/crates/oxide/src/extractor/mod.rs b/crates/oxide/src/extractor/mod.rs
index 5a9de6922..b7114f9c0 100644
--- a/crates/oxide/src/extractor/mod.rs
+++ b/crates/oxide/src/extractor/mod.rs
@@ -922,6 +922,32 @@ mod tests {
         }
     }
 
+    // https://github.com/tailwindlabs/tailwindcss/issues/17088
+    #[test]
+    fn test_fluid_template_syntax() {
+        let input = r#"
+            <f:variable name="bgStyle">
+              <f:switch expression="{data.layout}">
+                <f:case value="0">from-blue-900 to-cyan-200</f:case>
+                <f:case value="1">from-cyan-600 to-teal-200</f:case>
+                <f:defaultCase>from-blue-300 to-cyan-100</f:defaultCase>
+              </f:switch>
+            </f:variable>
+        "#;
+
+        assert_extract_candidates_contains(
+            input,
+            vec![
+                "from-blue-900",
+                "to-cyan-200",
+                "from-cyan-600",
+                "to-teal-200",
+                "from-blue-300",
+                "to-cyan-100",
+            ],
+        );
+    }
+
     // https://github.com/tailwindlabs/tailwindcss/issues/16982
     #[test]
     fn test_arbitrary_container_queries_syntax() {