fix: improve handling of class names with unusual whitespace (#1111)

src/tovnode.ts

@@ -19,8 +19,8 @@ export function toVNode(node: Node, domApi?: DOMAPI): VNode {
   let text: string;
   if (api.isElement(node)) {
     const id = node.id ? "#" + node.id : "";
-    const cn = node.getAttribute("class");
-    const c = cn ? "." + cn.split(" ").join(".") : "";
+    const cn = node.getAttribute("class")?.match(/[^\t\r\n\f ]+/g);
+    const c = cn ? "." + cn.join(".") : "";
     const sel = api.tagName(node).toLowerCase() + id + c;
     const attrs: any = {};
     const dataset: Record<string, string> = {};

test/unit/core.ts

@@ -591,7 +591,17 @@ describe("snabbdom", () => {
         assert.deepEqual(children[0].data, { dataset: { env: "xyz" } });
         assert.strictEqual(children[1].text, "Foobar");
       });
-
+      it("handles class names correctly", () => {
+        for (const [cl, sel] of [
+          ["  one\ttwo  three\nfour  \t", ".one.two.three.four"],
+          ["  \t \n ", ""]
+        ] as const) {
+          const el = document.createElement("a");
+          el.className = cl;
+          const node = toVNode(el);
+          assert.deepEqual(node, { ...node, sel: `a${sel}` });
+        }
+      });
       it("can parsing dataset and attrs", () => {
         const onlyAttrs = document.createElement("div");
         onlyAttrs.setAttribute("foo", "bar");