From d7c81164da55a09ef4333abb5195da2fe2e1ba62 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 17 Mar 2025 14:54:37 +0100
Subject: [PATCH] =?UTF-8?q?Pre=20process=20`<template=20lang=3D"=E2=80=A6"?=
 =?UTF-8?q?>`=20in=20Vue=20files=20(#17252)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <adam.wathan@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 Cargo.lock                                    | 14 ++----
 crates/oxide/Cargo.toml                       |  1 +
 .../oxide/src/extractor/pre_processors/mod.rs |  2 +
 .../oxide/src/extractor/pre_processors/vue.rs | 46 +++++++++++++++++++
 crates/oxide/src/lib.rs                       |  1 +
 6 files changed, 56 insertions(+), 9 deletions(-)
 create mode 100644 crates/oxide/src/extractor/pre_processors/vue.rs

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99ab5eb4c..2c6c8892b 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/Cargo.lock b/Cargo.lock
index 87fdc0539..21f0b3a13 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -410,13 +410,14 @@ dependencies = [
 
 [[package]]
 name = "regex"
-version = "1.8.3"
+version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81ca098a9821bd52d6b24fd8b10bd081f47d39c22778cafaa75a2857a62c6390"
+checksum = "b544ef1b4eac5dc2db33ea63606ae9ffcfac26c1416a2806ae0bf5f56b201191"
 dependencies = [
  "aho-corasick",
  "memchr",
- "regex-syntax 0.7.2",
+ "regex-automata 0.4.8",
+ "regex-syntax 0.8.5",
 ]
 
 [[package]]
@@ -445,12 +446,6 @@ version = "0.6.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
 
-[[package]]
-name = "regex-syntax"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "436b050e76ed2903236f032a59761c1eb99e1b0aead2c257922771dab1fc8c78"
-
 [[package]]
 name = "regex-syntax"
 version = "0.8.5"
@@ -548,6 +543,7 @@ dependencies = [
  "ignore",
  "log",
  "rayon",
+ "regex",
  "rustc-hash",
  "tempfile",
  "tracing",
diff --git a/crates/oxide/Cargo.toml b/crates/oxide/Cargo.toml
index 1b2d42d52..eb8b6156c 100644
--- a/crates/oxide/Cargo.toml
+++ b/crates/oxide/Cargo.toml
@@ -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"
diff --git a/crates/oxide/src/extractor/pre_processors/mod.rs b/crates/oxide/src/extractor/pre_processors/mod.rs
index 53a41abd9..4609f10b9 100644
--- a/crates/oxide/src/extractor/pre_processors/mod.rs
+++ b/crates/oxide/src/extractor/pre_processors/mod.rs
@@ -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::*;
diff --git a/crates/oxide/src/extractor/pre_processors/vue.rs b/crates/oxide/src/extractor/pre_processors/vue.rs
new file mode 100644
index 000000000..15440bb86
--- /dev/null
+++ b/crates/oxide/src/extractor/pre_processors/vue.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"]);
+    }
+}
diff --git a/crates/oxide/src/lib.rs b/crates/oxide/src/lib.rs
index 35ee57e81..9088763c3 100644
--- a/crates/oxide/src/lib.rs
+++ b/crates/oxide/src/lib.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(),
     }
 }