Format script content inside HTML tag with colon

prettier · Mar 31, 2020 · 68092c9 · 68092c9
1 parent 4e133e1
commit 68092c9
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 2 deletions.
diff --git a/changelog_unreleased/html/pr-7916.md b/changelog_unreleased/html/pr-7916.md
@@ -0,0 +1,34 @@
+#### Format `script` and `style` content inside HTML tag with colon ([#7916](https://github.com/prettier/prettier/pull/7916) by [@fisker](https://github.com/fisker))
+
+<!-- prettier-ignore -->
+```html
+<!--Input-->
+<with:colon>
+<script>function foo(){      return 1}</script>
+<style>a         {color:         #f00}</style>
+</with:colon>
+
+<!--Prettier stable-->
+<with:colon>
+  <script>
+    function foo(){ return 1}
+  </script>
+  <style>
+    a {color: #f00}
+  </style>
+</with:colon>
+
+<!--Prettier master-->
+<with:colon>
+  <script>
+    function foo() {
+      return 1;
+    }
+  </script>
+  <style>
+    a {
+      color: #f00;
+    }
+  </style>
+</with:colon>
+```
diff --git a/src/language-html/utils.js b/src/language-html/utils.js
@@ -135,7 +135,9 @@ function isScriptLikeTag(node) {
     node.type === "element" &&
     (node.fullName === "script" ||
       node.fullName === "style" ||
-      node.fullName === "svg:style")
+      node.fullName === "svg:style" ||
+      (isUnknownNamespace(node) &&
+        (node.name === "script" || node.fullName === "style")))
   );
 }
 

diff --git a/tests/html_basics/__snapshots__/jsfmt.spec.js.snap b/tests/html_basics/__snapshots__/jsfmt.spec.js.snap
@@ -623,6 +623,21 @@ e-wrap </html:textarea>
   </script>
   </with:colon>
 
+<!-- script like -->
+<with:colon>
+<style>.a{color:#f00}</style>
+  <SCRIPT>
+  const func = function() { console.log('Hello, there');}
+  </SCRIPT>
+<STYLE>.A{COLOR:#F00}</STYLE>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+<svg><style>.a{color:#f00}</style></svg>
+<svg><style>.a{color:#f00}</style></svg>
+</with:colon>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+
 =====================================output=====================================
 <!-- unknown tag with colon -->
 <div>
@@ -832,9 +847,52 @@ e-wrap </textarea
     </h1>
   </div>
   <script>
-    const func = function() { console.log('Hello, there');}
+    const func = function () {
+      console.log("Hello, there");
+    };
   </script>
 </with:colon>
 
+<!-- script like -->
+<with:colon>
+  <style>
+    .a{color:#f00}
+  </style>
+  <script>
+    const func = function () {
+      console.log("Hello, there");
+    };
+  </script>
+  <style>
+    .A{COLOR:#F00}
+  </style>
+  <html:script
+    >const func = function() { console.log('Hello, there');}</html:script
+  >
+  <html:style
+    >.a{color:#f00}</html:style
+  >
+  <svg>
+    <style>
+      .a {
+        color: #f00;
+      }
+    </style>
+  </svg>
+  <svg>
+    <style>
+      .a {
+        color: #f00;
+      }
+    </style>
+  </svg>
+</with:colon>
+<html:script
+  >const func = function() { console.log('Hello, there');}</html:script
+>
+<html:style
+  >.a{color:#f00}</html:style
+>
+
 ================================================================================
 `;
diff --git a/tests/html_basics/with-colon.html b/tests/html_basics/with-colon.html
@@ -110,3 +110,18 @@
   const func = function() { console.log('Hello, there');}
   </script>
   </with:colon>
+
+<!-- script like -->
+<with:colon>
+<style>.a{color:#f00}</style>
+  <SCRIPT>
+  const func = function() { console.log('Hello, there');}
+  </SCRIPT>
+<STYLE>.A{COLOR:#F00}</STYLE>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>
+<svg><style>.a{color:#f00}</style></svg>
+<svg><style>.a{color:#f00}</style></svg>
+</with:colon>
+<html:script>const func = function() { console.log('Hello, there');}</html:script>
+<html:style>.a{color:#f00}</html:style>