Fix HTML attribute name normalization (#19709)

changelog_unreleased/html/19709.md

@@ -0,0 +1,16 @@
+#### Fix attribute name normalization (#19709 by @fisker)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<span CLASS="foo"></span>
+<div CLASS="foo"></div>
+
+<!-- Prettier stable -->
+<span CLASS="foo"></span>
+<div class="foo"></div>
+
+<!-- Prettier main -->
+<span class="foo"></span>
+<div class="foo"></div>
+```

jest.config.js

@@ -61,7 +61,10 @@ if (TEST_RUNTIME === "browser") {
 
 if (nodejsMajorVersion <= 18) {
   // Uses import attributes and `Array#toSorted()`
-  testPathIgnorePatterns.push("tests/integration/__tests__/help-options.js");
+  testPathIgnorePatterns.push(
+    "tests/integration/__tests__/help-options.js",
+    "tests/format/html/attributes/lowercase/format.test.js",
+  );
 }
 
 if (nodejsMajorVersion <= 14) {

src/language-html/parse/postprocess.js

@@ -241,9 +241,9 @@ function normalizeName(node, parseOptions) {
           attr.name = lowerCaseIf(
             attr.name,
             (lowerCasedAttrName) =>
-              ELEMENT_ATTRIBUTES.has(node.name) &&
+              HTML_TAGS.has(node.name) &&
               (GLOBAL_ATTRIBUTES.has(lowerCasedAttrName) ||
-                ELEMENT_ATTRIBUTES.get(node.name).has(lowerCasedAttrName)),
+                ELEMENT_ATTRIBUTES.get(node.name)?.has(lowerCasedAttrName)),
           );
         }
       }

tests/format/html/attributes/lowercase/__snapshots__/format.test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`snippet: #0 format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div
+  CLASS="should print as lowercase"
+  UNKNOWN="should print as UPPERCASE"
+>
+  Tag with attributes
+</div>
+<span
+  CLASS="should print as lowercase"
+  UNKNOWN="should print as UPPERCASE"
+>
+  Tag without attributes
+</span>
+<unknown
+  CLASS="should print as UPPERCASE"
+  UNKNOWN="should print as UPPERCASE"
+>
+  Non-html element
+</unknown>
+=====================================output=====================================
+<div class="should print as lowercase" UNKNOWN="should print as UPPERCASE">
+  Tag with attributes
+</div>
+<span class="should print as lowercase" UNKNOWN="should print as UPPERCASE">
+  Tag without attributes
+</span>
+<unknown CLASS="should print as UPPERCASE" UNKNOWN="should print as UPPERCASE">
+  Non-html element
+</unknown>
+
+================================================================================
+`;

tests/format/html/attributes/lowercase/format.test.js

@@ -0,0 +1,39 @@
+import { elementAttributes } from "@prettier/html-attributes";
+import { htmlTags } from "@prettier/html-tags";
+import { outdent } from "outdent";
+
+const tagWithAttribute = elementAttributes.div
+  ? "div"
+  : htmlTags.find((tag) => elementAttributes[tag]);
+const tagWithoutAttribute = !elementAttributes.span
+  ? "span"
+  : htmlTags.find((tag) => !elementAttributes[tag]);
+
+runFormatTest(
+  {
+    importMeta: import.meta,
+    snippets: [
+      outdent`
+        <${tagWithAttribute}
+          CLASS="should print as lowercase"
+          UNKNOWN="should print as UPPERCASE"
+        >
+          Tag with attributes
+        </${tagWithAttribute}>
+        <${tagWithoutAttribute}
+          CLASS="should print as lowercase"
+          UNKNOWN="should print as UPPERCASE"
+        >
+          Tag without attributes
+        </${tagWithoutAttribute}>
+        <unknown
+          CLASS="should print as UPPERCASE"
+          UNKNOWN="should print as UPPERCASE"
+        >
+          Non-html element
+        </unknown>
+      `,
+    ],
+  },
+  ["html"],
+);