Detect classes in Ruby percent literals using angle brackets or custom delimiters (#20387)

## Summary

Fixes #20386.

Ruby lets you close a `%w`/`%W` literal with any non-alphanumeric
character, but the pre-processor only recognized `[`, `(`, `{`, `#` and
a space. So `%w<bg-green-400>` and `%w|bg-blue-400|` were skipped and
the classes inside them never made it into the output.

The boundary lookup now maps `<` to `>` alongside the other paired
delimiters, and falls back to treating any other non-alphanumeric,
non-whitespace character as its own closing delimiter.

## Test plan

Added pre-processor and extraction cases for `%w<…>`, `%w|…|`, `%w:…:`
and `%w!…!` in `crates/oxide/src/extractor/pre_processors/ruby.rs`. They
fail on `main` and pass with this change.

```
cargo test -p tailwindcss-oxide
```

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

Author: lazerg

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Canonicalization: convert arbitrary breakpoint and container query variants to named equivalents (e.g. `max-[64rem]` → `max-lg`) ([#20380](https://github.com/tailwindlabs/tailwindcss/pull/20380))
 - Prevent `@tailwindcss/vite` from crashing on every edit under Vite's experimental `bundledDev` mode ([#20379](https://github.com/tailwindlabs/tailwindcss/pull/20379))
 - Ensure `@tailwindcss/oxide` falls back to WASM on platforms without native bindings ([#20383](https://github.com/tailwindlabs/tailwindcss/pull/20383))
+- Detect classes in Ruby percent literals using angle brackets or custom delimiters (e.g. `%w<flex>`, `%w|flex|`), including in Slim and Haml templates ([#20387](https://github.com/tailwindlabs/tailwindcss/pull/20387))
 
 ## [4.3.3] - 2026-07-16
 

crates/oxide/src/extractor/bracket_stack.rs

@@ -25,6 +25,7 @@ impl BracketStack {
                 b'(' => b')',
                 b'[' => b']',
                 b'{' => b'}',
+                b'<' => b'>',
                 _ => std::hint::unreachable_unchecked(),
             };
         }

crates/oxide/src/extractor/pre_processors/haml.rs

@@ -203,6 +203,81 @@ impl PreProcessor for Haml {
                     }
                 }
 
+                // Handle Ruby syntax with `%w[]` arrays embedded in Haml attribute hashes. E.g.:
+                //
+                // ```haml
+                // %div{class: %w[bg-blue-500 w-10 h-10]}
+                // ```
+                //
+                // A `%` that follows a value is not a percent literal. E.g.: the `50%w` in
+                // `hit rate 50%w.`
+                b'%' if matches!(cursor.next(), b'w' | b'W')
+                    && !cursor.prev().is_ascii_alphanumeric()
+                    && !matches!(cursor.prev(), b'_' | b')' | b']' | b'}') =>
+                {
+                    // Boundary characters
+                    let (open, close) = match cursor.input.get(cursor.pos + 2) {
+                        Some(b'[') => (b'[', b']'),
+                        Some(b'(') => (b'(', b')'),
+                        Some(b'{') => (b'{', b'}'),
+                        Some(b'<') => (b'<', b'>'),
+
+                        // Any other ASCII punctuation can be used as a custom delimiter
+                        Some(&c) if c.is_ascii_punctuation() => (c, c),
+
+                        // Everything else is not a valid delimiter
+                        _ => {
+                            cursor.advance();
+                            continue;
+                        }
+                    };
+
+                    result[cursor.pos] = b' '; // Replace `%`
+                    cursor.advance();
+                    result[cursor.pos] = b' '; // Replace `w`
+                    cursor.advance();
+                    result[cursor.pos] = b' '; // Replace the opening delimiter
+                    cursor.advance();
+
+                    // Paired delimiters can be nested as long as they are balanced. E.g.:
+                    // `%w[foo[bar]baz]` produces a flat array.
+                    let mut depth = 1_usize;
+
+                    while cursor.pos < len {
+                        match cursor.curr() {
+                            // Skip escaped characters, unless the backslash is the delimiter
+                            // itself
+                            b'\\' if close != b'\\' => {
+                                // Use backslash to embed spaces in the strings.
+                                if cursor.next() == b' ' {
+                                    result[cursor.pos] = b' ';
+                                }
+
+                                cursor.advance();
+                            }
+
+                            // Start of a nested delimiter pair
+                            c if c == open && open != close => depth += 1,
+
+                            // Closing delimiter
+                            c if c == close => {
+                                depth -= 1;
+
+                                // End of the literal, replace the closing delimiter with a space
+                                if depth == 0 {
+                                    result[cursor.pos] = b' ';
+                                    break;
+                                }
+                            }
+
+                            // Everything else is valid content
+                            _ => {}
+                        }
+
+                        cursor.advance();
+                    }
+                }
+
                 // Replace following characters with spaces if they are not inside of brackets
                 b'#' | b'=' if bracket_stack.is_empty() => {
                     result[cursor.pos] = b' ';
@@ -424,6 +499,81 @@ mod tests {
         );
     }
 
+    // https://github.com/tailwindlabs/tailwindcss/issues/20386
+    #[test]
+    fn test_embedded_ruby_percent_w_delimiters() {
+        for (input, expected) in [
+            // %w[…] in an attribute hash
+            (
+                "%div{class: %w[flex px-2.5]}",
+                "%div class:    flex px-2.5  ",
+            ),
+            // %w<…>
+            (
+                "%div{class: %w<flex px-2.5>}",
+                "%div class:    flex px-2.5  ",
+            ),
+            // Nested `<…>` does not end the literal
+            (
+                "%div{class: %w<flex <nested> px-2.5>}",
+                "%div class:    flex <nested> px-2.5  ",
+            ),
+            // Custom delimiters
+            (
+                "%div{class: %w|flex px-2.5|}",
+                "%div class:    flex px-2.5  ",
+            ),
+            (
+                "%div{class: %W!flex px-2.5!}",
+                "%div class:    flex px-2.5  ",
+            ),
+            (
+                "%div{class: %w#text-sm leading-6#}",
+                "%div class:    text-sm leading-6  ",
+            ),
+            (
+                "%div{class: %w=italic tracking-wide=}",
+                "%div class:    italic tracking-wide  ",
+            ),
+            // Nested paired delimiters stay balanced inside the literal
+            (
+                "%div{class: %w[content-['[hello]'] p-4]}",
+                "%div class:    content-['[hello]'] p-4  ",
+            ),
+            // Escaped spaces embed a space in a single array element
+            (
+                r#"%div{class: %w[foo\ bar baz-1]}"#,
+                r#"%div class:    foo  bar baz-1  "#,
+            ),
+            // A `%` that follows a value is not a percent literal
+            ("%p hit rate 50%w.", "%p hit rate 50%w "),
+        ] {
+            Haml::test(input, expected);
+        }
+
+        let input = r#"
+            %div{class: %w[bg-blue-500 w-10 h-10]}
+            %div{class: %w<flex px-2.5>}
+            %div{class: %w|underline font-bold|}
+            - classes = %w<mt-4 grid>
+        "#;
+
+        Haml::test_extract_contains(
+            input,
+            vec![
+                "bg-blue-500",
+                "w-10",
+                "h-10",
+                "flex",
+                "px-2.5",
+                "underline",
+                "font-bold",
+                "mt-4",
+                "grid",
+            ],
+        );
+    }
+
     // https://github.com/tailwindlabs/tailwindcss/pull/17051#issuecomment-2711181352
     #[test]
     fn test_haml_full_file_17051() {

crates/oxide/src/extractor/pre_processors/ruby.rs

@@ -158,15 +158,29 @@ impl PreProcessor for Ruby {
                 continue;
             }
 
+            // A `%` that follows a value is a modulo operation, not a percent literal. E.g.: the
+            // `50%w` in `hit rate 50%w.`
+            if cursor.prev().is_ascii_alphanumeric()
+                || matches!(cursor.prev(), b'_' | b')' | b']' | b'}')
+            {
+                cursor.advance();
+                continue;
+            }
+
             cursor.advance_twice();
 
             // Boundary character
             let boundary = match cursor.curr() {
                 b'[' => b']',
                 b'(' => b')',
                 b'{' => b'}',
-                b'#' => b'#',
+                b'<' => b'>',
                 b' ' => b'\n',
+
+                // Any other ASCII punctuation can be used as a custom delimiter
+                c if c.is_ascii_punctuation() => c,
+
+                // Everything else is not a valid delimiter
                 _ => {
                     cursor.advance();
                     continue;
@@ -183,8 +197,8 @@ impl PreProcessor for Ruby {
 
             while cursor.pos < len {
                 match cursor.curr() {
-                    // Skip escaped characters
-                    b'\\' => {
+                    // Skip escaped characters, unless the backslash is the delimiter itself
+                    b'\\' if boundary != b'\\' => {
                         // Use backslash to embed spaces in the strings.
                         if cursor.next() == b' ' {
                             result[cursor.pos] = b' ';
@@ -198,6 +212,11 @@ impl PreProcessor for Ruby {
                         bracket_stack.push(cursor.curr());
                     }
 
+                    // Start of a nested `<…>`, which Ruby allows inside a `%w<…>` literal
+                    b'<' if boundary == b'>' => {
+                        bracket_stack.push(cursor.curr());
+                    }
+
                     // End of a nested bracket
                     b']' | b')' | b'}' if !bracket_stack.is_empty() => {
                         if !bracket_stack.pop(cursor.curr()) {
@@ -206,6 +225,14 @@ impl PreProcessor for Ruby {
                         }
                     }
 
+                    // End of a nested `<…>`
+                    b'>' if boundary == b'>' && !bracket_stack.is_empty() => {
+                        if !bracket_stack.pop(cursor.curr()) {
+                            // Unbalanced
+                            cursor.advance();
+                        }
+                    }
+
                     // End of the pattern, replace the boundary character with a space
                     _ if cursor.curr() == boundary => {
                         if boundary != b'\n' {
@@ -253,6 +280,24 @@ mod tests {
                 "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
                 "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
             ),
+            // %w<…>
+            ("%w<flex px-2.5>", "%w flex px-2.5 "),
+            (
+                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
+                "%w flex data-[state=pending]:bg-(--my-color) flex-col ",
+            ),
+            // Nested `<…>` does not end the literal
+            ("%w<flex <nested> px-2.5>", "%w flex <nested> px-2.5 "),
+            // %w|…|, %w:…:, %w!…!
+            ("%w|flex px-2.5|", "%w flex px-2.5 "),
+            ("%w:flex px-2.5:", "%w flex px-2.5 "),
+            ("%w!flex px-2.5!", "%w flex px-2.5 "),
+            (r#"%w\flex px-2.5\"#, r#"%w flex px-2.5 "#),
+            // A `%` that follows a value is a modulo operation, not a percent literal
+            (
+                "hit rate 50%w.\n%w[flex px-2.5]",
+                "hit rate 50%w.\n%w flex px-2.5 ",
+            ),
 
             // %w …\n
             ("%w flex px-2.5\n", "%w flex px-2.5\n"),
@@ -330,6 +375,20 @@ mod tests {
                 "%w(flex data-[state=pending]:bg-(--my-color) flex-col)",
                 vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
             ),
+            // %w<…>
+            ("%w<flex px-2.5>", vec!["flex", "px-2.5"]),
+            ("%w<px-2.5 flex>", vec!["flex", "px-2.5"]),
+            ("%w<2xl:flex>", vec!["2xl:flex"]),
+            (
+                "%w<flex data-[state=pending]:bg-(--my-color) flex-col>",
+                vec!["flex", "data-[state=pending]:bg-(--my-color)", "flex-col"],
+            ),
+            // Nested `<…>` does not end the literal
+            ("%w<flex <nested> px-2.5>", vec!["flex", "px-2.5"]),
+            // %w|…|, %w:…:, %w!…!
+            ("%w|flex px-2.5|", vec!["flex", "px-2.5"]),
+            ("%w:flex px-2.5:", vec!["flex", "px-2.5"]),
+            ("%w!flex px-2.5!", vec!["flex", "px-2.5"]),
 
             (
               "# test\n# test\n# {ActiveRecord::Base#save!}[rdoc-ref:Persistence#save!]\n%w[flex px-2.5]",