fix type detection of embedded content

Author: StarpTech

packages/prettyhtml-formatter/index.js

@@ -442,11 +442,12 @@ function prettierEmbeddedContent(node, level, indent, prettierOpts) {
   const isStyleTag = isElement(node, 'style')
   const isScriptTag = isElement(node, 'script')
   let content = toString(node)
+  let type = node.properties.type ? `type="${node.properties.type}"` : ''
 
   if (isScriptTag) {
-    content = '<script>' + content + '</script>'
+    content = `<script ${type}>${content}</script>`
   } else if (isStyleTag) {
-    content = '<style>' + content + '</style>'
+    content = `<style ${type}>${content}</style>`
   }
 
   let formattedText = prettier.format(
@@ -458,12 +459,12 @@ function prettierEmbeddedContent(node, level, indent, prettierOpts) {
 
   if (isScriptTag) {
     formattedText = formattedText
-      .replace(/\n*<\/script\s*>/g, '')
-      .replace(/<script\s*>\n*/g, '')
+      .replace(/\n*<\/script\s*>/, '')
+      .replace(/<script.*>\n*/, '')
   } else if (isStyleTag) {
     formattedText = formattedText
-      .replace(/\n*<\/style\s*>/g, '')
-      .replace(/<style\s*>\n*/g, '')
+      .replace(/\n*<\/style\s*>/, '')
+      .replace(/<style.*>\n*/, '')
   }
 
   node.children = [

packages/prettyhtml-formatter/test/fixtures/style-different-type/input.html

@@ -0,0 +1,9 @@
+<style type="scss">
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

packages/prettyhtml-formatter/test/fixtures/style-different-type/output.html

@@ -0,0 +1,9 @@
+<style type="scss">
+  $font-stack: Helvetica, sans-serif;
+  $primary-color: #333;
+
+  body {
+    font: 100% $font-stack;
+    color: $primary-color;
+  }
+</style>

packages/prettyhtml-formatter/test/fixtures/style/input.html

@@ -1,20 +1,10 @@
 <style type="text/x-scss">
 </style>
-<style type="text/x-scss">
-  $font-stack:    Helvetica, sans-serif;
-  $primary-color: #333;
-  body {
-    font: 100% $font-stack;
-    color: $primary-color;
-  }
-</style>
-<style lang="scss">
-  $font-stack:    Helvetica, sans-serif;
-  $primary-color: #333;
-  body {
-    font: 100% $font-stack;
-    color: $primary-color;
-  }
+<style>
+    body {
+        font: 100%  Helvetica, sans-serif;
+        color: #333;
+    }
 </style>
 
 <style>

packages/prettyhtml-formatter/test/fixtures/style/output.html

@@ -1,18 +1,8 @@
 <style type="text/x-scss"></style>
-<style type="text/x-scss">
-  $font-stack: Helvetica, sans-serif;
-  $primary-color: #333;
+<style>
   body {
-    font: 100% $font-stack;
-    color: $primary-color;
-  }
-</style>
-<style lang="scss">
-  $font-stack: Helvetica, sans-serif;
-  $primary-color: #333;
-  body {
-    font: 100% $font-stack;
-    color: $primary-color;
+    font: 100% Helvetica, sans-serif;
+    color: #333;
   }
 </style>