diff --git a/changelog_unreleased/html/19709.md b/changelog_unreleased/html/19709.md new file mode 100644 index 000000000..1bf004d1e --- /dev/null +++ b/changelog_unreleased/html/19709.md @@ -0,0 +1,16 @@ +#### Fix attribute name normalization (#19709 by @fisker) + + +```html + + +
+ + + +
+ + + +
+``` diff --git a/jest.config.js b/jest.config.js index 31a6ab04b..3eba6e1e9 100644 --- a/jest.config.js +++ b/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) { diff --git a/src/language-html/parse/postprocess.js b/src/language-html/parse/postprocess.js index 77134d1f3..bf1418f38 100644 --- a/src/language-html/parse/postprocess.js +++ b/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)), ); } } diff --git a/tests/format/html/attributes/lowercase/__snapshots__/format.test.js.snap b/tests/format/html/attributes/lowercase/__snapshots__/format.test.js.snap new file mode 100644 index 000000000..721afd9b7 --- /dev/null +++ b/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====================================== +
+ Tag with attributes +
+ + Tag without attributes + + + Non-html element + +=====================================output===================================== +
+ Tag with attributes +
+ + Tag without attributes + + + Non-html element + + +================================================================================ +`; diff --git a/tests/format/html/attributes/lowercase/format.test.js b/tests/format/html/attributes/lowercase/format.test.js new file mode 100644 index 000000000..a2070c659 --- /dev/null +++ b/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 + + <${tagWithoutAttribute} + CLASS="should print as lowercase" + UNKNOWN="should print as UPPERCASE" + > + Tag without attributes + + + Non-html element + + `, + ], + }, + ["html"], +);