fix: node content handling in style tags

cossssmin · cossssmin · commit 30120ca22426 · 2022-05-19T14:21:18.000+03:00
diff --git a/lib/index.js b/lib/index.js
@@ -52,12 +52,14 @@ module.exports = (options = {}) => tree => {
 
   const process = node => {
     if (node.tag === 'style' && node.content) {
+      const content = Array.isArray(node.content) ? node.content.join('') : node.content
+
       node.content = postcss([
         postcssSafeCSS({
           replacements: options.replacements
         })
       ])
-        .process(node.content.join('').trim())
+        .process(content)
         .css
     }
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/test/expected/custom.html b/test/expected/custom.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo-w-2_5 {
+  <style>
+    .foo-w-2_5 {
       width: .625rem;
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo-w-2_5">
diff --git a/test/expected/empty-style.html b/test/expected/empty-style.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style></style>
+  <style> </style>
 </head>
 <body>
 </body>
diff --git a/test/expected/font-face.html b/test/expected/font-face.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo-w-3-5 {
+  <style>
+    .foo-w-3-5 {
       width: 60%;
     }
     @font-face {
@@ -12,7 +13,8 @@
     }
     .foo-italic {
       font-style: italic;
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo foo-open-sans foo-w-3-5">
diff --git a/test/expected/media-queries.html b/test/expected/media-queries.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo {
+  <style>
+    .foo {
       font-style: normal;
     }
     @media (max-width: 600px) {
@@ -17,7 +18,8 @@
       .sm-w-2_5 {
         width: .625rem;
       }
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo sm-italic sm-w-3-5 sm-w-50pc sm-w-2_5">
diff --git a/test/expected/multiple-style.html b/test/expected/multiple-style.html
@@ -1,18 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo-italic {
+  <style>
+    .foo-italic {
       font-style: italic;
     }
     .foo-w-3-5 {
       width: 60%;
-    }</style>
-  <style>.foo-w-50pc {
+    }
+  </style>
+  <style>
+    .foo-w-50pc {
       width: 50%;
     }
     .foo-w-2_5 {
       width: .625rem;
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo foo-italic foo-w-3-5 foo-w-50pc foo-w-2_5">
diff --git a/test/expected/override.html b/test/expected/override.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo__italic {
+  <style>
+    .foo__italic {
       font-style: italic;
     }
     .foo__w-3-5 {
@@ -12,7 +13,8 @@
     }
     .foo__w-2_5 {
       width: .625rem;
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo foo__italic foo__w-3-5 foo__w-50pc foo__w-2_5">
diff --git a/test/expected/sanity.html b/test/expected/sanity.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>/* A comment that includes a <tag> inside */
+  <style>
+    /* A comment that includes a <tag> inside */
     .foo-italic {
       font-style: italic; /* 1 */
     }
@@ -28,7 +29,8 @@
     }
     .foo-mt--40px {
       margin-top: -40px;
-    }</style>
+    }
+  </style>
 </head>
 <body>
   <div class="foo foo-italic foo-w-3-5 foo-w-50pc foo-w-2_5 foo-w-600px">
diff --git a/test/expected/style-only.html b/test/expected/style-only.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <style>.foo-italic {
+  <style>
+    .foo-italic {
       font-style: italic;
     }
     .foo-w-3-5 {
@@ -12,7 +13,8 @@
     }
     .foo-w-2_5 {
       width: .625rem;
-    }</style>
+    }
+  </style>
 </head>
 <body>
 </body>
diff --git a/test/test.js b/test/test.js
@@ -1,6 +1,6 @@
 const test = require('ava')
-const plugin = require('../lib')
 const posthtml = require('posthtml')
+const plugin = require('../lib/index.js')
 
 const path = require('path')
 const {readFileSync} = require('fs')
