diff --git a/src/language-handlebars/embed.js b/src/language-handlebars/embed.js index 84ff0a185..4d46e2cab 100644 --- a/src/language-handlebars/embed.js +++ b/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), ""]; - } - - 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, - "", - ]; } 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; diff --git a/src/language-handlebars/massage-ast/index.js b/src/language-handlebars/massage-ast/index.js index 232ba46d1..226439819 100644 --- a/src/language-handlebars/massage-ast/index.js +++ b/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 { diff --git a/src/language-handlebars/print/tag.js b/src/language-handlebars/print/tag.js deleted file mode 100644 index 63d86929f..000000000 --- a/src/language-handlebars/print/tag.js +++ /dev/null @@ -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 }; diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js index 10f76f202..f771f50ab 100644 --- a/src/language-handlebars/printer-glimmer.js +++ b/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( "!\"#%&'()*+,./;<=>@[\\]^`{|}~", diff --git a/src/language-handlebars/utilities.js b/src/language-handlebars/utilities.js index 67dd098fa..c1eea8eba 100644 --- a/src/language-handlebars/utilities.js +++ b/src/language-handlebars/utilities.js @@ -69,7 +69,6 @@ function hasPrettierIgnore(path) { export { hasPrettierIgnore, - isPlainTextElement, isPlainTextStyleOrScriptElement, isVoidElement, isWhitespaceNode, diff --git a/src/language-js/embed/css.js b/src/language-js/embed/css.js index ad81fa55d..baaa60b51 100644 --- a/src/language-js/embed/css.js +++ b/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 }; diff --git a/tests/format/handlebars/style-tag/__snapshots__/format.test.js.snap b/tests/format/handlebars/style-tag/__snapshots__/format.test.js.snap index 35a33b5d2..c9ec2a8cb 100644 --- a/tests/format/handlebars/style-tag/__snapshots__/format.test.js.snap +++ b/tests/format/handlebars/style-tag/__snapshots__/format.test.js.snap @@ -218,113 +218,19 @@ parsers: ["glimmer"] - - - - - - - - - - - - - - =====================================output===================================== - - - - - - - - - - - - - - - + ================================================================================ `; diff --git a/tests/format/handlebars/style-tag/with-mustache.hbs b/tests/format/handlebars/style-tag/with-mustache.hbs index 0972ba21b..c8b9b8506 100644 --- a/tests/format/handlebars/style-tag/with-mustache.hbs +++ b/tests/format/handlebars/style-tag/with-mustache.hbs @@ -10,42 +10,3 @@ - - - - - - - - - - - - - -