Allow : in attributes

Author: emilos

index.js

@@ -338,7 +338,7 @@ const ALIASES = {
 }
 
 // Pre-compiled regex for better performance
-const KEY_VALIDATION_REGEX = /^[a-zA-Z0-9\-_]+$/
+const KEY_VALIDATION_REGEX = /^[a-zA-Z0-9\-_:]+$/
 const isKeyValid = (key) => KEY_VALIDATION_REGEX.test(key)
 
 const attributes = (options) => {

test/tags/attributes/index.js

@@ -6,6 +6,18 @@ module.exports = () => {
     Div(null, "No attrs"),
     Div(undefined, "No attrs 2"),
     // Test style with invalid key
-    Div({ style: { 'invalid-key!': 'value', color: 'red' } }, "Invalid style key"),
+    Div(
+      { style: { "invalid-key!": "value", color: "red" } },
+      "Invalid style key",
+    ),
+    // Test namespaced attributes with colons
+    Div({ "xml:lang": "en", "data-test": "value" }, "Namespaced attributes"),
+    Div({ "xmlns:xlink": "http://www.w3.org/1999/xlink" }, "XML namespace"),
+    Div({ "xlink:href": "#icon" }, "XLink attribute"),
+    // Test that invalid characters are still filtered
+    Div(
+      { "invalid@attr": "value", "valid-attr": "ok", "invalid!key": "no" },
+      "Invalid chars filtered",
+    ),
   ]
 }

test/tags/attributes/index.test.js

@@ -15,3 +15,44 @@ test("attributes: filters invalid style keys", async () => {
   assert(html.includes("color:red"))
   assert(!html.includes("invalid-key!"))
 })
+
+test("attributes: accepts namespaced attributes with colons", async () => {
+  const { template } = await compile(__dirname)
+  const html = template()
+  // Test xml:lang namespace
+  assert(html.includes('xml:lang="en"'), "Should include xml:lang attribute")
+  // Test xmlns:xlink namespace declaration
+  assert(
+    html.includes('xmlns:xlink="http://www.w3.org/1999/xlink"'),
+    "Should include xmlns:xlink attribute",
+  )
+  // Test xlink:href attribute
+  assert(
+    html.includes('xlink:href="#icon"'),
+    "Should include xlink:href attribute",
+  )
+  // Verify data attributes still work
+  assert(
+    html.includes('data-test="value"'),
+    "Should include data-test attribute",
+  )
+})
+
+test("attributes: filters out invalid characters while allowing colons", async () => {
+  const { template } = await compile(__dirname)
+  const html = template()
+  // Valid attributes with hyphens should be included
+  assert(
+    html.includes('valid-attr="ok"'),
+    "Should include valid-attr attribute",
+  )
+  // Invalid attributes with @ and ! should be filtered
+  assert(
+    !html.includes("invalid@attr"),
+    "Should not include attributes with @ character",
+  )
+  assert(
+    !html.includes("invalid!key"),
+    "Should not include attributes with ! character",
+  )
+})