Revert "Format <style> containing mustaches"

This reverts commit 05b8f7a0a8, which was pushed to main by mistake.

src/language-handlebars/embed.js

@@ -1,8 +1,4 @@
-import { indent, replaceEndOfLine, softline } from "../document/index.js";
-import { replacePlaceholders } from "../language-js/embed/css.js";
-import { locEnd, locStart } from "./loc.js";
-import { printStartingTag } from "./print/tag.js";
-import { isPlainTextElement } from "./utilities.js";
+import { isPlainTextStyleOrScriptElement } from "./utilities.js";
 
 function getAttribute(node, name) {
   return node.attributes.find(
@@ -33,61 +29,16 @@ function getScriptTextToDocOptions(node) {
   }
 }
 
-function isEmbedCss(node) {
-  if (node.type !== "ElementNode" || node.tag !== "style") {
-    return false;
-  }
-
+function getStyleTextToDocOptions(node) {
   const langAttribute = getAttribute(node, "lang");
-  return !langAttribute || getTextValue(langAttribute) === "css";
-}
-
-async function printEmbedCss(textToDoc, print, path, options) {
-  const { node } = path;
-
-  let text = "";
-  const mustacheDocs = [];
-  for (const child of node.children) {
-    if (child.type === "TextNode") {
-      text += child.chars;
-      continue;
-    }
-
-    text += `@prettier-placeholder-${mustacheDocs.length}-id`;
-    mustacheDocs.push(
-      replaceEndOfLine(
-        options.originalText.slice(locStart(child), locEnd(child)),
-      ),
-    );
+  if (!langAttribute || getTextValue(langAttribute) === "css") {
+    return { parser: "css" };
   }
-
-  if (!text.trim()) {
-    return [printStartingTag(path, options, print), "</style>"];
-  }
-
-  const doc = await textToDoc(text, { parser: "css" });
-  const contentDoc = replacePlaceholders(doc, mustacheDocs);
-
-  /* c8 ignore next 3 */
-  if (!contentDoc) {
-    throw new Error("Couldn't insert all the mustaches");
-  }
-
-  return [
-    printStartingTag(path, options, print),
-    indent([softline, contentDoc]),
-    softline,
-    "</style>",
-  ];
 }
 
 function embed(path /* , options*/) {
   const { node } = path;
 
-  if (isEmbedCss(node)) {
-    return printEmbedCss;
-  }
-
   if (node.type !== "TextNode") {
     return;
   }
@@ -95,14 +46,15 @@ function embed(path /* , options*/) {
   const { parent } = path;
 
   if (!(
-    isPlainTextElement(parent) &&
-    parent.tag === "script" &&
-    parent.children[0] === node
+    isPlainTextStyleOrScriptElement(parent) && parent.children[0] === node
   )) {
     return;
   }
 
-  const textToDocOptions = getScriptTextToDocOptions(parent);
+  const textToDocOptions =
+    parent.tag === "style"
+      ? getStyleTextToDocOptions(parent)
+      : getScriptTextToDocOptions(parent);
 
   if (!textToDocOptions) {
     return;

src/language-handlebars/massage-ast/index.js

@@ -1,5 +1,5 @@
 import htmlWhitespace from "../../utilities/html-whitespace.js";
-import { isPlainTextElement } from "../utilities.js";
+import { isPlainTextStyleOrScriptElement } from "../utilities.js";
 
 function massageAstNode(original, cloned, parent) {
   // (Glimmer/HTML) ignore TextNode
@@ -11,10 +11,8 @@ function massageAstNode(original, cloned, parent) {
 
     // CSS/JS will be formatted
     if (
-      (parent.type === "ElementNode" && parent.tag === "style") ||
-      (isPlainTextElement(parent) &&
-        parent.tag === "script" &&
-        parent.children[0] === original)
+      isPlainTextStyleOrScriptElement(parent) &&
+      parent.children[0] === original
     ) {
       cloned.chars = "";
     } else {

src/language-handlebars/print/tag.js

@@ -1,58 +0,0 @@
-import {
-  group,
-  ifBreak,
-  indent,
-  line,
-  softline,
-} from "../../document/index.js";
-import isNonEmptyArray from "../../utilities/is-non-empty-array.js";
-import { locStart } from "../loc.js";
-import { isVoidElement } from "../utilities.js";
-
-/* ElementNode print helpers */
-
-function sortByLoc(a, b) {
-  return locStart(a) - locStart(b);
-}
-
-function printStartingTag(path, options, print) {
-  const { node } = path;
-
-  const types = ["attributes", "modifiers", "comments"].filter((property) =>
-    isNonEmptyArray(node[property]),
-  );
-  const attributes = types.flatMap((type) => node[type]).sort(sortByLoc);
-
-  for (const attributeType of types) {
-    path.each(({ node }) => {
-      const index = attributes.indexOf(node);
-      attributes[index] = [line, print()];
-    }, attributeType);
-  }
-
-  if (isNonEmptyArray(node.blockParams)) {
-    attributes.push(line, printBlockParams(node));
-  }
-
-  return [
-    options.htmlWhitespaceSensitivity === "ignore" &&
-    path.previous?.type === "ElementNode"
-      ? softline
-      : "",
-    group(["<", node.tag, indent(attributes), printStartingTagEndMarker(node)]),
-  ];
-}
-
-function printStartingTagEndMarker(node) {
-  if (isVoidElement(node)) {
-    return ifBreak([softline, "/>"], [" />", softline]);
-  }
-
-  return ifBreak([softline, ">"], ">");
-}
-
-function printBlockParams(node) {
-  return ["as |", node.blockParams.join(" "), "|"];
-}
-
-export { printBlockParams, printStartingTag };

src/language-handlebars/printer-glimmer.js

@@ -3,6 +3,7 @@ import {
   fill,
   group,
   hardline,
+  ifBreak,
   indent,
   join,
   line,
@@ -17,7 +18,6 @@ import embed from "./embed.js";
 import getVisitorKeys from "./get-visitor-keys.js";
 import { locEnd, locStart } from "./loc.js";
 import { massageAstNode } from "./massage-ast/index.js";
-import { printBlockParams, printStartingTag } from "./print/tag.js";
 import {
   hasPrettierIgnore,
   isPlainTextStyleOrScriptElement,
@@ -48,7 +48,12 @@ function print(path, options, print) {
       const isWhitespaceSensitive =
         options.htmlWhitespaceSensitivity !== "ignore";
 
-      const startingTag = printStartingTag(path, options, print);
+      const startingTag = [
+        !isWhitespaceSensitive && path.previous?.type === "ElementNode"
+          ? softline
+          : "",
+        group([printStartingTag(path, print)]),
+      ];
 
       if (isVoidElement(node)) {
         return [startingTag];
@@ -419,6 +424,42 @@ function print(path, options, print) {
   }
 }
 
+/* ElementNode print helpers */
+
+function sortByLoc(a, b) {
+  return locStart(a) - locStart(b);
+}
+
+function printStartingTag(path, print) {
+  const { node } = path;
+
+  const types = ["attributes", "modifiers", "comments"].filter((property) =>
+    isNonEmptyArray(node[property]),
+  );
+  const attributes = types.flatMap((type) => node[type]).sort(sortByLoc);
+
+  for (const attributeType of types) {
+    path.each(({ node }) => {
+      const index = attributes.indexOf(node);
+      attributes[index] = [line, print()];
+    }, attributeType);
+  }
+
+  if (isNonEmptyArray(node.blockParams)) {
+    attributes.push(line, printBlockParams(node));
+  }
+
+  return ["<", node.tag, indent(attributes), printStartingTagEndMarker(node)];
+}
+
+function printStartingTagEndMarker(node) {
+  if (isVoidElement(node)) {
+    return ifBreak([softline, "/>"], [" />", softline]);
+  }
+
+  return ifBreak([softline, ">"], ">");
+}
+
 /* MustacheStatement print helpers */
 
 function printOpeningMustache(node) {
@@ -760,6 +801,10 @@ function printParams(path, print) {
   return join(line, parts);
 }
 
+function printBlockParams(node) {
+  return ["as |", node.blockParams.join(" "), "|"];
+}
+
 // https://handlebarsjs.com/guide/expressions.html#literal-segments
 const PATH_EXPRESSION_FORBIDDEN_CHARACTERS = new Set(
   "!\"#%&'()*+,./;<=>@[\\]^`{|}~",

src/language-handlebars/utilities.js

@@ -69,7 +69,6 @@ function hasPrettierIgnore(path) {
 
 export {
   hasPrettierIgnore,
-  isPlainTextElement,
   isPlainTextStyleOrScriptElement,
   isVoidElement,
   isWhitespaceNode,

src/language-js/embed/css.js

@@ -171,4 +171,4 @@ const isEmbedCss = (path /* , options*/) =>
   isCssProp(path) ||
   isAngularComponentStyles(path);
 
-export { isEmbedCss, printEmbedCss, replacePlaceholders };
+export { isEmbedCss, printEmbedCss };

tests/format/handlebars/style-tag/__snapshots__/format.test.js.snap

@@ -218,113 +218,19 @@ parsers: ["glimmer"]
 
 <style>{{foo}}</style>
 
-<style>
-  .{{className}} { width:{{width}}px;background:url({{url}}) }
-</style>
-
-<style>
-  a::after { content:   "{{content}}" }
-</style>
-
-<style>
-  /* {{comment}} */
-  a { color:red }
-</style>
-
-<style>
-  @media (max-width: {{breakpoint}}px) { a { color: red } }
-</style>
-
-<style>
-  a {
-    {{mixin}}
-    color:    red;
-  }
-</style>
-
-<style>
-  a {
-    {{mixin}};
-    color:    red;
-  }
-</style>
-
-<style>
-  .a { color:red }
-  {{#if debug}}
-    .b {color:red}
-        .c {color:red}
-  {{/if}}
-</style>
-
 =====================================output=====================================
 <style>
-  a {
-    color: {{foo}};
+  a { color:
+  {{foo}}
   }
 </style>
 
 <style>
-  .a {
-    color: {{color}};
-  }
+  .a { color:
+  {{color}}; }
   {{#if debug}}.b { color: red; }{{/if}}
 </style>
 
-<style>
-  {{foo}}
-</style>
-
-<style>
-  .{{className}} {
-    width: {{width}}px;
-    background: url({{url}});
-  }
-</style>
-
-<style>
-  a::after {
-    content: "{{content}}";
-  }
-</style>
-
-<style>
-  /* {{comment}} */
-  a {
-    color: red;
-  }
-</style>
-
-<style>
-  @media (max-width: {{breakpoint}}px) {
-    a {
-      color: red;
-    }
-  }
-</style>
-
-<style>
-  a {
-    {{mixin}}
-    color:    red;
-  }
-</style>
-
-<style>
-  a {
-    {{mixin}};
-    color: red;
-  }
-</style>
-
-<style>
-  .a {
-    color: red;
-  }
-  {{#if debug}}
-    .b {color:red}
-        .c {color:red}
-  {{/if}}
-</style>
+<style>{{foo}}</style>
 ================================================================================
 `;

tests/format/handlebars/style-tag/with-mustache.hbs

@@ -10,42 +10,3 @@
 </style>
 
 <style>{{foo}}</style>
-
-<style>
-  .{{className}} { width:{{width}}px;background:url({{url}}) }
-</style>
-
-<style>
-  a::after { content:   "{{content}}" }
-</style>
-
-<style>
-  /* {{comment}} */
-  a { color:red }
-</style>
-
-<style>
-  @media (max-width: {{breakpoint}}px) { a { color: red } }
-</style>
-
-<style>
-  a {
-    {{mixin}}
-    color:    red;
-  }
-</style>
-
-<style>
-  a {
-    {{mixin}};
-    color:    red;
-  }
-</style>
-
-<style>
-  .a { color:red }
-  {{#if debug}}
-    .b {color:red}
-        .c {color:red}
-  {{/if}}
-</style>