Pre process <template lang="…"> in Vue files (#17252)

This PR fixes an issue where `<template lang="…">…</template>` in Vue
files should be handled as-if it's the language specified in the `lang`
attribute.

To do this, we added a new Vue pre processor and run the content through
the same pre processor logic as we do for other languages.

Fixes: #17211

# Test plan

1. Added a test to verify this works
2. Existing tests still work

Visually verified against the reproduction in the issue:

| Before | After |
| --- | --- |
| <img width="1273" alt="image"
src="https://github.com/user-attachments/assets/d1accdeb-97cf-48ef-83fb-978832b3e599"
/> | <img width="1273" alt="image"
src="https://github.com/user-attachments/assets/ab7ec19c-b6c4-43be-8845-096ff4e58808"
/> |

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix incorrect angle in `-bg-conic-*` utilities ([#17174](https://github.com/tailwindlabs/tailwindcss/pull/17174))
 - Fix `border-[12px_4px]` being interpreted as a `border-color` instead of a `border-width` ([#17248](https://github.com/tailwindlabs/tailwindcss/pull/17248))
 - Use the `oklab(…)` function when applying opacity to `currentColor` to work around a crash in Safari 16.4 and 16.5 ([#17247](https://github.com/tailwindlabs/tailwindcss/pull/17247))
+- Pre-process `<template lang="…">` in Vue files ([#17252](https://github.com/tailwindlabs/tailwindcss/pull/17252))
 
 ## [4.0.14] - 2025-03-13
 

Cargo.lock

@@ -18,6 +18,7 @@ dunce = "1.0.5"
 bexpand = "1.2.0"
 fast-glob = "0.4.3"
 classification-macros = { path = "../classification-macros" }
+regex = "1.11.1"
 
 [dev-dependencies]
 tempfile = "3.13.0"

crates/oxide/Cargo.toml

@@ -7,6 +7,7 @@ pub mod razor;
 pub mod ruby;
 pub mod slim;
 pub mod svelte;
+pub mod vue;
 
 pub use clojure::*;
 pub use haml::*;
@@ -17,3 +18,4 @@ pub use razor::*;
 pub use ruby::*;
 pub use slim::*;
 pub use svelte::*;
+pub use vue::*;

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

@@ -0,0 +1,46 @@
+use crate::extractor::pre_processors::pre_processor::PreProcessor;
+use crate::pre_process_input;
+use bstr::ByteSlice;
+use regex::Regex;
+use std::sync;
+
+static TEMPLATE_REGEX: sync::LazyLock<Regex> = sync::LazyLock::new(|| {
+    Regex::new(r#"<template lang=['"]([^"']*)['"]>([\s\S]*)<\/template>"#).unwrap()
+});
+
+#[derive(Debug, Default)]
+pub struct Vue;
+
+impl PreProcessor for Vue {
+    fn process(&self, content: &[u8]) -> Vec<u8> {
+        let mut result = content.to_vec();
+
+        let content_as_str = std::str::from_utf8(content).unwrap();
+        for (_, [lang, body]) in TEMPLATE_REGEX
+            .captures_iter(content_as_str)
+            .map(|c| c.extract())
+        {
+            let replaced = pre_process_input(body.as_bytes(), lang);
+            result = result.replace(body, replaced);
+        }
+
+        result
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::Vue;
+    use crate::extractor::pre_processors::pre_processor::PreProcessor;
+
+    #[test]
+    fn test_vue_template_pug() {
+        let input = r#"
+            <template lang="pug">
+            .bg-neutral-900.text-red-500 This is a test.
+            </template>
+        "#;
+
+        Vue::test_extract_contains(input, vec!["bg-neutral-900", "text-red-500"]);
+    }
+}

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

@@ -476,6 +476,7 @@ pub fn pre_process_input(content: &[u8], extension: &str) -> Vec<u8> {
         "rb" | "erb" => Ruby.process(content),
         "slim" => Slim.process(content),
         "svelte" => Svelte.process(content),
+        "vue" => Vue.process(content),
         _ => content.to_vec(),
     }
 }