Format <style> containing mustaches

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

@@ -218,19 +218,113 @@ parsers: ["glimmer"]
 
 <style>{{foo}}</style>
 
-=====================================output=====================================
 <style>
-  a { color:
-  {{foo}}
+  .{{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 { color:
-  {{color}}; }
+  a {
+    {{mixin}};
+    color:    red;
+  }
+</style>
+
+<style>
+  .a { color:red }
+  {{#if debug}}
+    .b {color:red}
+        .c {color:red}
+  {{/if}}
+</style>
+
+=====================================output=====================================
+<style>
+  a {
+    color: {{foo}};
+  }
+</style>
+
+<style>
+  .a {
+    color: {{color}};
+  }
   {{#if debug}}.b { color: red; }{{/if}}
 </style>
 
-<style>{{foo}}</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>
 ================================================================================
 `;

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

@@ -10,3 +10,42 @@
 </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>