Ensure classes between > and < are properly extracted (#17094)

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
This commit is contained in:
Robin Malfait 2025-03-10 11:28:08 +01:00 committed by GitHub
parent 7005ad7e00
commit bc5a8c3683
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 0 deletions

View File

@ -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

View File

@ -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]

View File

@ -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() {