From 2995898db74dcc23221f7742080f7317158031cb Mon Sep 17 00:00:00 2001
From: cuishuang <imcusg@gmail.com>
Date: Thu, 10 Sep 2026 09:54:21 +0800
Subject: [PATCH] Support formatted Vue Pug template tags

---
 .../oxide/src/extractor/pre_processors/vue.rs | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/crates/oxide/src/extractor/pre_processors/vue.rs b/crates/oxide/src/extractor/pre_processors/vue.rs
index ae037435c..f45da7adb 100644
--- a/crates/oxide/src/extractor/pre_processors/vue.rs
+++ b/crates/oxide/src/extractor/pre_processors/vue.rs
@@ -5,7 +5,10 @@ use regex::Regex;
 use std::sync;
 
 static TEMPLATE_REGEX: sync::LazyLock<Regex> = sync::LazyLock::new(|| {
-    Regex::new(r#"<template lang=['"]([^"']*)['"]>([\s\S]*)<\/template>"#).unwrap()
+    Regex::new(
+        r#"<template\s+(?:[^>]*\s+)?lang\s*=\s*(?:"([^"]*)"|'([^']*)')[^>]*>([\s\S]*)<\/template>"#,
+    )
+    .unwrap()
 });
 
 #[derive(Debug, Default)]
@@ -17,10 +20,16 @@ impl PreProcessor for Vue {
 
         // Only process template tags if content is valid UTF-8
         if let Ok(content_as_str) = std::str::from_utf8(content) {
-            for (_, [lang, body]) in TEMPLATE_REGEX
-                .captures_iter(content_as_str)
-                .map(|c| c.extract())
-            {
+            for captures in TEMPLATE_REGEX.captures_iter(content_as_str) {
+                let lang = captures
+                    .get(1)
+                    .or_else(|| captures.get(2))
+                    .expect("template lang capture should exist")
+                    .as_str();
+                let body = captures
+                    .get(3)
+                    .expect("template body capture should exist")
+                    .as_str();
                 let replaced = pre_process_input(body.as_bytes().to_vec(), lang);
                 result = result.replace(body, replaced);
             }
@@ -46,6 +55,38 @@ mod tests {
         Vue::test_extract_contains(input, vec!["bg-neutral-900", "text-red-500"]);
     }
 
+    #[test]
+    fn test_vue_template_pug_with_attributes_and_whitespace() {
+        for input in [
+            r#"
+                <template data-test="true" lang="pug">
+                .bg-neutral-900.text-red-500 This is a test.
+                </template>
+            "#,
+            r#"
+                <template
+                    lang = 'pug'
+                    data-test="true"
+                >
+                .bg-neutral-900.text-red-500 This is a test.
+                </template>
+            "#,
+        ] {
+            Vue::test_extract_contains(input, vec!["bg-neutral-900", "text-red-500"]);
+        }
+    }
+
+    #[test]
+    fn test_vue_template_does_not_treat_data_lang_as_lang() {
+        let input = r#"
+            <template data-lang="pug">
+            .bg-neutral-900.text-red-500 This is a test.
+            </template>
+        "#;
+
+        Vue::test(input, input);
+    }
+
     #[test]
     fn test_invalid_utf8_does_not_panic() {
         // Invalid UTF-8 sequence: 0x80 is a continuation byte without a leading byte