Fix mustache quotes inside attribute (#10419) (#11524)

* Fix mustache quotes inside attribute (#10419)

* Add changelog (#10419)

* Update changelog (#10419)

* Updated tests

* Updated tests

* Opimize performance

* Don't format changlog

* Remove additional example

changelog_unreleased/handlebars/11524.md

@@ -0,0 +1,14 @@
+#### Uses the opposite quote type for quotes inside mustache statements in attributes (#11524 by @bmaehr)
+
+<!-- prettier-ignore -->
+```hbs
+{{!-- Input --}}
+<div title="{{t 'login.username.description'}}" />
+
+{{!-- Prettier main --}}
+<div title="{{t 'login.username.description'}}" />
+
+{{!-- Prettier stable --}}
+<div title="{{t "login.username.description"}}" />
+
+```

src/language-handlebars/printer-glimmer.js

@@ -399,6 +399,10 @@ function print(path, options, print) {
       return ["<!--", node.value, "-->"];
     }
     case "StringLiteral": {
+      if (needsOppositeQuote(path)) {
+        const printFavoriteQuote = !options.singleQuote ? "'" : '"';
+        return printStringLiteral(node.value, printFavoriteQuote);
+      }
       return printStringLiteral(node.value, favoriteQuote);
     }
     case "NumberLiteral": {
@@ -709,6 +713,23 @@ function printStringLiteral(stringLiteral, favoriteQuote) {
   return [quote, stringLiteral.replace(regex, `\\${quote}`), quote];
 }
 
+function needsOppositeQuote(path) {
+  let index = 0;
+  let parentNode = path.getParentNode(index);
+  while (parentNode && isNodeOfSomeType(parentNode, ["SubExpression"])) {
+    index++;
+    parentNode = path.getParentNode(index);
+  }
+  if (
+    parentNode &&
+    isNodeOfSomeType(path.getParentNode(index + 1), ["ConcatStatement"]) &&
+    isNodeOfSomeType(path.getParentNode(index + 2), ["AttrNode"])
+  ) {
+    return true;
+  }
+  return false;
+}
+
 /* SubExpression print helpers */
 
 function printSubExpressionPathAndParams(path, print) {

tests/format/handlebars/concat-statement/__snapshots__/jsfmt.spec.js.snap

@@ -141,7 +141,7 @@ singleQuote: true
 >Link</a>
 <button
   class='uk-padding-remove uk-button uk-button-default uk-button-small uk-width-1-{{intl.locales.length}}
-    {{if (contains locale intl.locale) 'uk-button-primary'}}'
+    {{if (contains locale intl.locale) "uk-button-primary"}}'
 >
   test
 </button>
@@ -173,7 +173,7 @@ printWidth: 80
 >Link</a>
 <button
   class="uk-padding-remove uk-button uk-button-default uk-button-small uk-width-1-{{intl.locales.length}}
-    {{if (contains locale intl.locale) "uk-button-primary"}}"
+    {{if (contains locale intl.locale) 'uk-button-primary'}}"
 >
   test
 </button>

tests/format/handlebars/mustache-statement/__snapshots__/jsfmt.spec.js.snap

@@ -110,11 +110,11 @@ singleQuote: true
 
 <div
   class='a-first-class
-    {{if this.optionOne 'optionOne'}}
-    {{if this.optionTwo 'optionTwo'}}
-    {{if this.optionThree 'optionThree'}}
-    {{if this.optionFour 'optionFour'}}
-    {{if this.optionFive 'optionFive'}}
+    {{if this.optionOne "optionOne"}}
+    {{if this.optionTwo "optionTwo"}}
+    {{if this.optionThree "optionThree"}}
+    {{if this.optionFour "optionFour"}}
+    {{if this.optionFive "optionFive"}}
     {{this.class}}'
   ...attributes
 >
@@ -122,11 +122,11 @@ singleQuote: true
 
 <div
   class='a-first-class
-    {{if this.optionOne 'optionOne'}}
-    {{if this.optionTwo 'optionTwo'}}
-    {{if this.optionThree 'optionThree'}}
-    {{if this.optionFour 'optionFour'}}
-    {{if this.optionFive 'optionFive'}}
+    {{if this.optionOne "optionOne"}}
+    {{if this.optionTwo "optionTwo"}}
+    {{if this.optionThree "optionThree"}}
+    {{if this.optionFour "optionFour"}}
+    {{if this.optionFive "optionFive"}}
     {{this.class}}'
   ...attributes
 >
@@ -271,11 +271,11 @@ printWidth: 80
 
 <div
   class="a-first-class
-    {{if this.optionOne "optionOne"}}
-    {{if this.optionTwo "optionTwo"}}
-    {{if this.optionThree "optionThree"}}
-    {{if this.optionFour "optionFour"}}
-    {{if this.optionFive "optionFive"}}
+    {{if this.optionOne 'optionOne'}}
+    {{if this.optionTwo 'optionTwo'}}
+    {{if this.optionThree 'optionThree'}}
+    {{if this.optionFour 'optionFour'}}
+    {{if this.optionFive 'optionFive'}}
     {{this.class}}"
   ...attributes
 >
@@ -283,11 +283,11 @@ printWidth: 80
 
 <div
   class="a-first-class
-    {{if this.optionOne "optionOne"}}
-    {{if this.optionTwo "optionTwo"}}
-    {{if this.optionThree "optionThree"}}
-    {{if this.optionFour "optionFour"}}
-    {{if this.optionFive "optionFive"}}
+    {{if this.optionOne 'optionOne'}}
+    {{if this.optionTwo 'optionTwo'}}
+    {{if this.optionThree 'optionThree'}}
+    {{if this.optionFour 'optionFour'}}
+    {{if this.optionFive 'optionFive'}}
     {{this.class}}"
   ...attributes
 >
@@ -562,8 +562,8 @@ foo{{/if}}
 <li
   class='{{if
       showAsCarousel
-      'career-interests__pill--slide-item'
-      'career-interests__pill'
+      "career-interests__pill--slide-item"
+      "career-interests__pill"
     }}
     '
 ></li>
@@ -650,8 +650,8 @@ foo{{/if}}
 <li
   class="{{if
       showAsCarousel
-      "career-interests__pill--slide-item"
-      "career-interests__pill"
+      'career-interests__pill--slide-item'
+      'career-interests__pill'
     }}
     "
 ></li>

tests/format/handlebars/single-quote-option/__snapshots__/jsfmt.spec.js.snap

@@ -80,6 +80,9 @@ singleQuote: false
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
+<div title="{{t 'my.title'}}" />
+<div title='{{t "my.title"}}' />
+
 <a href="/{{url}}/{{url}}"></a>
 <a href='/{{url}}/{{url}}'></a>
 
@@ -88,31 +91,42 @@ singleQuote: false
 <button class='padding width-{{locales.length}} {{if (has locale) "uk-button-primary"}}'></button>
 <button class='padding width-{{locales.length}} {{if (has locale) 'uk-button-primary'}}'></button>
 
+<div class="padding {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}} baz" />
+
 =====================================output=====================================
 <div title="My title"></div>
 <div title="My title"></div>
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
+<div title="{{t 'my.title'}}"></div>
+<div title="{{t 'my.title'}}"></div>
+
 <a href="/{{url}}/{{url}}"></a>
 <a href="/{{url}}/{{url}}"></a>
 
 <button
   class="padding width-{{locales.length}}
-    {{if (has locale) "uk-button-primary"}}"
+    {{if (has locale) 'uk-button-primary'}}"
 ></button>
 <button
   class="padding width-{{locales.length}}
-    {{if (has locale) "uk-button-primary"}}"
+    {{if (has locale) 'uk-button-primary'}}"
 ></button>
 <button
   class="padding width-{{locales.length}}
-    {{if (has locale) "uk-button-primary"}}"
+    {{if (has locale) 'uk-button-primary'}}"
 ></button>
 <button
   class="padding width-{{locales.length}}
-    {{if (has locale) "uk-button-primary"}}"
+    {{if (has locale) 'uk-button-primary'}}"
 ></button>
+
+<div
+  class="padding
+    {{if foo (if fooAgain 'bar' (if fooAgainAgain 'bar' 'foo'))}}
+    baz"
+></div>
 ================================================================================
 `;
 
@@ -128,6 +142,9 @@ singleQuote: true
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
+<div title="{{t 'my.title'}}" />
+<div title='{{t "my.title"}}' />
+
 <a href="/{{url}}/{{url}}"></a>
 <a href='/{{url}}/{{url}}'></a>
 
@@ -136,31 +153,42 @@ singleQuote: true
 <button class='padding width-{{locales.length}} {{if (has locale) "uk-button-primary"}}'></button>
 <button class='padding width-{{locales.length}} {{if (has locale) 'uk-button-primary'}}'></button>
 
+<div class="padding {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}} baz" />
+
 =====================================output=====================================
 <div title='My title'></div>
 <div title='My title'></div>
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
+<div title='{{t "my.title"}}'></div>
+<div title='{{t "my.title"}}'></div>
+
 <a href='/{{url}}/{{url}}'></a>
 <a href='/{{url}}/{{url}}'></a>
 
 <button
   class='padding width-{{locales.length}}
-    {{if (has locale) 'uk-button-primary'}}'
+    {{if (has locale) "uk-button-primary"}}'
 ></button>
 <button
   class='padding width-{{locales.length}}
-    {{if (has locale) 'uk-button-primary'}}'
+    {{if (has locale) "uk-button-primary"}}'
 ></button>
 <button
   class='padding width-{{locales.length}}
-    {{if (has locale) 'uk-button-primary'}}'
+    {{if (has locale) "uk-button-primary"}}'
 ></button>
 <button
   class='padding width-{{locales.length}}
-    {{if (has locale) 'uk-button-primary'}}'
+    {{if (has locale) "uk-button-primary"}}'
 ></button>
+
+<div
+  class='padding
+    {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}}
+    baz'
+></div>
 ================================================================================
 `;
 

tests/format/handlebars/single-quote-option/attributes.hbs

@@ -3,6 +3,9 @@
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
+<div title="{{t 'my.title'}}" />
+<div title='{{t "my.title"}}' />
+
 <a href="/{{url}}/{{url}}"></a>
 <a href='/{{url}}/{{url}}'></a>
 
@@ -10,3 +13,5 @@
 <button class="padding width-{{locales.length}} {{if (has locale) 'uk-button-primary'}}"></button>
 <button class='padding width-{{locales.length}} {{if (has locale) "uk-button-primary"}}'></button>
 <button class='padding width-{{locales.length}} {{if (has locale) 'uk-button-primary'}}'></button>
+
+<div class="padding {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}} baz" />