📝 HTML directive casing does not match prettier

[dyc3]

Environment information

playground

Configuration

No response

Playground link

https://biomejs.dev/playground/?quoteStyle=single&indentWidth=4&arrowParentheses=as-needed&files.main.html=PAAhAGQAbwBjAHQAeQBwAGUAIABIAFQATQBMAD4ACgA%3D

Code of Conduct

• [X] I agree to follow Biome's Code of Conduct

[dyc3]

Another case: https://biomejs.dev/playground/?quoteStyle=single&indentWidth=4&arrowParentheses=as-needed&files.main.html=PAAhAEQATwBDAFQAWQBQAEUAIABIAFQATQBMAD4ACgA%3D

[viraxslot]

@dyc3 Hi, I dug this issue a bit and I suppose it's the common problem for all HTML tags. Here's the example with <DIV></DIV>

https://biomejs.dev/playground/?quoteStyle=single&indentWidth=4&arrowParentheses=as-needed&files.main.html=PABEAEkAVgA%2BADwALwBEAEkAVgA%2BAA%3D%3D

Just exploring at the moment, not committing into the fix.

[shulaoda]

When the html directive in an HTML file is lowercase, Prettier outputs <!doctype>. Otherwise, it outputs <!DOCTYPE> in uppercase. See here

function printOpeningTagStartMarker(node) {
  switch (node.type) {
    case "ieConditionalComment":
    case "ieConditionalStartComment":
      return `<!--[if ${node.condition}`;
    case "ieConditionalEndComment":
      return "<!--<!";
    case "interpolation":
      return "{{";
    case "docType":
      return node.value === "html" ? "<!doctype" : "<!DOCTYPE";
    case "angularIcuExpression":
      return "{";
    case "element":
      if (node.condition) {
        return `<!--[if ${node.condition}]><!--><${node.rawName}`;
      }
    // fall through
    default:
      return `<${node.rawName}`;
  }
}

BTW, in the playground, if the doctype is not entirely uppercase or lowercase, Biome throws an format error, but Prettier doesn't.