fix: remove empty style tags

maizzle · Oct 12, 2022 · aae4813 · aae4813
1 parent c2af961
commit aae4813
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/src/transformers/removeInlinedSelectors.js b/src/transformers/removeInlinedSelectors.js
@@ -71,7 +71,12 @@ const plugin = posthtmlOptions => tree => {
         } catch {}
       })
 
-      node.content = root.toString()
+      node.content = root.toString().trim()
+
+      // Remove <style> tag if it ends up empty after processing
+      if (node.content.length === 0) {
+        node.tag = false
+      }
     }
 
     return node

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -495,11 +495,10 @@ test('remove inlined selectors', async t => {
     </body>
   </html>`
 
-  const expectedWithOptions = `<!DOCTYPE html>
+  const expectedHTML = `<!DOCTYPE html>
   <html>
     <head>
-      <style>
-        .hover-text-blue:hover {
+      <style>.hover-text-blue:hover {
           color: #00a8ff;
         }
 
@@ -514,11 +513,8 @@ test('remove inlined selectors', async t => {
 
         @media (max-width: 600px) {
           .ignore {color: blue}
-        }
-      </style>
-      <style>
-        .keep {margin: 0}
-      </style>
+        }</style>
+      <style>.keep {margin: 0}</style>
     </head>
     <body>
       <div no-value id="keepId" class="keep foo-class" style="color: red; display: inline">
@@ -529,6 +525,30 @@ test('remove inlined selectors', async t => {
     </body>
   </html>`
 
+  const html2 = `<!DOCTYPE html>
+  <html>
+    <head><style>
+        img {
+          border: 0;
+          vertical-align: middle
+        }
+      </style></head>
+    <body>
+      <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
+    </body>
+  </html>`
+
+  const expectedNoEmptyStyleTags = `<!DOCTYPE html>
+  <html>
+    <head></head>
+    <body>
+      <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
+    </body>
+  </html>`
+
+  const basic = await Maizzle.removeInlinedClasses(html)
+  const noEmptyStyle = await Maizzle.removeInlinedClasses(html2)
+
   const withPostHTMLOptions = await Maizzle.removeInlinedClasses(html, {
     build: {
       posthtml: {
@@ -539,10 +559,9 @@ test('remove inlined selectors', async t => {
     }
   })
 
-  const basic = await Maizzle.removeInlinedClasses(html)
-
-  t.is(withPostHTMLOptions, expectedWithOptions)
-  t.is(basic, expectedWithOptions)
+  t.is(basic, expectedHTML)
+  t.is(withPostHTMLOptions, expectedHTML)
+  t.is(noEmptyStyle, expectedNoEmptyStyleTags)
 })
 
 test('remove inlined selectors (disabled)', async t => {