feat: preserve PascalCase tag names in HTML converter (#138)

Shinigami92 · web-flow · commit 5a77749eebdf · 2026-04-06T16:41:52.000Z
diff --git a/src/converter/emitter.rs b/src/converter/emitter.rs
@@ -1,21 +1,62 @@
+use std::collections::HashMap;
+
 use html5ever::tendril::StrTendril;
 use markup5ever_rcdom::{Handle, NodeData, RcDom};
 
 use crate::common::is_void_element;
 
 const INDENT_SIZE: usize = 2;
 
+/// Build a mapping from lowercased tag names to their original PascalCase form.
+/// html5ever lowercases all tags per HTML5 spec, but Vue/Angular use PascalCase
+/// components that we want to preserve.
+fn build_case_map(original_html: &str) -> HashMap<String, String> {
+    let mut map = HashMap::new();
+    let bytes = original_html.as_bytes();
+    let mut i = 0;
+
+    while i < bytes.len() {
+        if bytes[i] == b'<' && i + 1 < bytes.len() && bytes[i + 1].is_ascii_alphabetic() {
+            // Found a tag opening — extract the tag name
+            let start = i + 1;
+            let mut end = start;
+            while end < bytes.len()
+                && (bytes[end].is_ascii_alphanumeric() || bytes[end] == b'-' || bytes[end] == b'_')
+            {
+                end += 1;
+            }
+            let tag = &original_html[start..end];
+            // Only store if it has uppercase characters (PascalCase)
+            if tag.chars().any(|c| c.is_ascii_uppercase()) {
+                let lower = tag.to_ascii_lowercase();
+                map.entry(lower).or_insert_with(|| tag.to_string());
+            }
+            i = end;
+        } else {
+            i += 1;
+        }
+    }
+
+    map
+}
+
+/// Resolve a tag name to its original casing if it was PascalCase in the source.
+fn resolve_tag_case<'a>(tag: &'a str, case_map: &'a HashMap<String, String>) -> &'a str {
+    case_map.get(tag).map(|s| s.as_str()).unwrap_or(tag)
+}
+
 /// Emit HSML source from an html5ever DOM.
 pub fn emit(dom: &RcDom, original_html: &str) -> String {
     let mut output = String::new();
     let lower_html = original_html.to_ascii_lowercase();
+    let case_map = build_case_map(original_html);
 
     // html5ever wraps content in <html><head><body> for document parsing.
     // We need to find the meaningful content nodes.
     let nodes = find_content_nodes(&dom.document, &lower_html);
 
     for node in &nodes {
-        emit_node(node, 0, &lower_html, &mut output);
+        emit_node(node, 0, &lower_html, &case_map, &mut output);
     }
 
     if !output.is_empty() && !output.ends_with('\n') {
@@ -142,10 +183,10 @@ fn has_mixed_content(node: &Handle) -> bool {
 }
 
 /// Serialize a node's children back to raw HTML (for mixed content).
-fn serialize_inner_html(node: &Handle) -> String {
+fn serialize_inner_html(node: &Handle, case_map: &HashMap<String, String>) -> String {
     let mut html = String::new();
     for child in &effective_children(node) {
-        serialize_node_to_html(child, &mut html, false);
+        serialize_node_to_html(child, &mut html, false, case_map);
     }
     html
 }
@@ -206,7 +247,12 @@ fn escape_hsml_attr(key: &str, value: &str) -> String {
     }
 }
 
-fn serialize_node_to_html(node: &Handle, output: &mut String, in_raw_text: bool) {
+fn serialize_node_to_html(
+    node: &Handle,
+    output: &mut String,
+    in_raw_text: bool,
+    case_map: &HashMap<String, String>,
+) {
     match &node.data {
         NodeData::Text { contents } => {
             if in_raw_text {
@@ -216,8 +262,9 @@ fn serialize_node_to_html(node: &Handle, output: &mut String, in_raw_text: bool)
             }
         }
         NodeData::Element { name, attrs, .. } => {
-            let tag = name.local.as_ref();
-            let is_raw = matches!(tag, "script" | "style");
+            let lower_tag = name.local.as_ref();
+            let tag = resolve_tag_case(lower_tag, case_map);
+            let is_raw = matches!(lower_tag, "script" | "style");
             output.push('<');
             output.push_str(tag);
             for attr in attrs.borrow().iter() {
@@ -227,12 +274,12 @@ fn serialize_node_to_html(node: &Handle, output: &mut String, in_raw_text: bool)
                 output.push_str(&escape_html_attr(&attr.value));
                 output.push('"');
             }
-            if is_void_element(tag) {
+            if is_void_element(lower_tag) {
                 output.push_str(" />");
             } else {
                 output.push('>');
                 for child in &effective_children(node) {
-                    serialize_node_to_html(child, output, is_raw);
+                    serialize_node_to_html(child, output, is_raw, case_map);
                 }
                 output.push_str("</");
                 output.push_str(tag);
@@ -248,18 +295,26 @@ fn serialize_node_to_html(node: &Handle, output: &mut String, in_raw_text: bool)
     }
 }
 
-fn emit_node(node: &Handle, depth: usize, lower_html: &str, output: &mut String) {
+fn emit_node(
+    node: &Handle,
+    depth: usize,
+    lower_html: &str,
+    case_map: &HashMap<String, String>,
+    output: &mut String,
+) {
     match &node.data {
         NodeData::Doctype { name, .. } => {
             output.push_str(&format!("doctype {name}\n"));
         }
         NodeData::Element { name, attrs, .. } => {
+            let tag = resolve_tag_case(&name.local, case_map);
             emit_element(
                 node,
-                &name.local,
+                tag,
                 &attrs.borrow(),
                 depth,
                 lower_html,
+                case_map,
                 output,
             );
         }
@@ -284,6 +339,7 @@ fn emit_element(
     attrs: &[html5ever::interface::Attribute],
     depth: usize,
     lower_html: &str,
+    case_map: &HashMap<String, String>,
     output: &mut String,
 ) {
     let indent = " ".repeat(depth * INDENT_SIZE);
@@ -412,7 +468,7 @@ fn emit_element(
 
         let raw = if has_non_text {
             // Has nested elements/comments — serialize as raw HTML to preserve markup
-            serialize_inner_html(node)
+            serialize_inner_html(node, case_map)
         } else {
             // Text-only — collect raw text content
             significant_children
@@ -437,7 +493,7 @@ fn emit_element(
 
     // Check for mixed content
     if has_mixed_content(node) {
-        let inner = serialize_inner_html(node);
+        let inner = serialize_inner_html(node, case_map);
         let trimmed = inner.trim();
         if trimmed.contains('\n') {
             // Multi-line mixed content → text block
@@ -489,7 +545,7 @@ fn emit_element(
     output.push_str(&format!("{indent}{line}\n"));
     for child in significant_children {
         if !is_synthesized_empty_element(child, lower_html) {
-            emit_node(child, depth + 1, lower_html, output);
+            emit_node(child, depth + 1, lower_html, case_map, output);
         }
     }
 }
diff --git a/src/converter/tests/convert.rs b/src/converter/tests/convert.rs
@@ -133,6 +133,69 @@ fn it_should_handle_normal_id_and_class() {
     );
 }
 
+// --- PascalCase tag preservation ---
+
+#[test]
+fn it_should_preserve_pascal_case_vue_components() {
+    assert_eq!(
+        conv(r#"<PwaInstallPrompt class="xl:hidden"></PwaInstallPrompt>"#),
+        "PwaInstallPrompt.xl:hidden\n"
+    );
+}
+
+#[test]
+fn it_should_preserve_multiple_pascal_case_components() {
+    assert_eq!(
+        conv(
+            r#"<div><NavUser v-if="show"></NavUser><NavUserSkeleton v-else></NavUserSkeleton></div>"#
+        ),
+        r#"div
+  NavUser(v-if="show")
+  NavUserSkeleton(v-else)
+"#
+    );
+}
+
+#[test]
+fn it_should_preserve_pascal_case_in_mixed_content() {
+    assert_eq!(
+        conv(r#"<p>Hello <MyBadge>World</MyBadge> more</p>"#),
+        "p Hello <MyBadge>World</MyBadge> more\n"
+    );
+}
+
+// --- Kebab-case custom elements ---
+
+#[test]
+fn it_should_preserve_kebab_case_custom_elements() {
+    assert_eq!(
+        conv(r#"<my-component class="active"></my-component>"#),
+        "my-component.active\n"
+    );
+}
+
+#[test]
+fn it_should_preserve_kebab_case_web_components() {
+    assert_eq!(
+        conv(r#"<pwa-install-prompt class="xl:hidden"></pwa-install-prompt>"#),
+        "pwa-install-prompt.xl:hidden\n"
+    );
+}
+
+#[test]
+fn it_should_not_confuse_kebab_case_with_pascal_case() {
+    // Both forms in the same document — each preserved as written
+    assert_eq!(
+        conv(
+            r#"<div><PwaBadge class="lg:hidden"></PwaBadge><pwa-badge class="xl:hidden"></pwa-badge></div>"#
+        ),
+        r#"div
+  PwaBadge.lg:hidden
+  pwa-badge.xl:hidden
+"#
+    );
+}
+
 // --- Vue/Angular syntax ---
 
 #[test]
@@ -491,7 +554,6 @@ figure.md:flex.bg-slate-100.rounded-xl.p-8.md:p-0.dark:bg-slate-800/10
 
 #[test]
 fn it_should_convert_complex_vue_html() {
-    // TODO @Shinigami92 2026-04-06: PascalCase tags are currently not supported by html5ever
     let html = r#"<div ref="container" :class="containerClass">
   <div
     class="sticky top-0 z-20"
@@ -521,14 +583,14 @@ fn it_should_convert_complex_vue_html() {
       </div>
       <div class="px-3" flex="~ items-center shrink-0 gap-x-2">
         <slot name="actions"></slot>
-        <pwa-badge class="xl:hidden"></pwa-badge>
-        <nav-user v-if="isHydrated"></nav-user>
-        <nav-user-skeleton v-else></nav-user-skeleton>
+        <PwaBadge class="xl:hidden"></PwaBadge>
+        <NavUser v-if="isHydrated"></NavUser>
+        <NavUserSkeleton v-else></NavUserSkeleton>
       </div>
     </div>
     <slot name="header"><div hidden></div></slot>
   </div>
-  <pwa-install-prompt class="xl:hidden"></pwa-install-prompt>
+  <PwaInstallPrompt class="xl:hidden"></PwaInstallPrompt>
   <div
     class="m-auto"
     :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'"
@@ -558,12 +620,12 @@ fn it_should_convert_complex_vue_html() {
         .sm:hidden.h-7.w-1px
       .px-3(flex="~ items-center shrink-0 gap-x-2")
         slot(name="actions")
-        pwa-badge.xl:hidden
-        nav-user(v-if="isHydrated")
-        nav-user-skeleton(v-else)
+        PwaBadge.xl:hidden
+        NavUser(v-if="isHydrated")
+        NavUserSkeleton(v-else)
     slot(name="header")
       div(hidden)
-  pwa-install-prompt.xl:hidden
+  PwaInstallPrompt.xl:hidden
   .m-auto(:class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'")
     .h-6(hidden, :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }")
     slot
