refactor: remove inlined selectors transformer

maizzle · Oct 9, 2022 · 4824329 · 4824329
1 parent 6f5a149
commit 4824329
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/src/transformers/removeInlinedSelectors.js b/src/transformers/removeInlinedSelectors.js
@@ -10,10 +10,10 @@ module.exports = async (html, config = {}) => {
   }
 
   const posthtmlOptions = get(config, 'build.posthtml.options', {})
-  return posthtml([plugin()]).process(html, posthtmlOptions).then(result => result.html)
+  return posthtml([plugin(posthtmlOptions)]).process(html, posthtmlOptions).then(result => result.html)
 }
 
-const plugin = () => tree => {
+const plugin = posthtmlOptions => tree => {
   const process = node => {
     // For each style tag...
     if (node.tag === 'style') {
@@ -57,6 +57,13 @@ const plugin = () => tree => {
 
             n.attrs = parsedAttrs.compose()
 
+            // Fix issue with .compose() automatically quoting attributes with no values
+            Object.entries(n.attrs).forEach(([name, value]) => {
+              if (value === '' && get(posthtmlOptions, 'recognizeNoValueAttribute') === true) {
+                n.attrs[name] = true
+              }
+            })
+
             return n
           })
         } catch {}

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -427,15 +427,15 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="remove keep ignore foo-class" style="color: red; display: inline">
+      <div no-value id="keepId" class="remove keep ignore foo-class" style="color: red; display: inline">
         <h1 class="m-0 mb-4 mt-0 hover-text-blue" style="margin: 0 0 16px;">Title</h1>
         <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
         <div id="keepId" class="remove keep ignore" style="color: red; display: inline">text</div>
       </div>
     </body>
   </html>`
 
-  const expected = `<!DOCTYPE html>
+  const expectedWithOptions = `<!DOCTYPE html>
   <html>
     <head>
       <style>
@@ -461,17 +461,30 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="keep foo-class" style="color: red; display: inline">
+      <div no-value id="keepId" class="keep foo-class" style="color: red; display: inline">
         <h1 class="hover-text-blue" style="margin: 0 0 16px">Title</h1>
         <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
         <div id="keepId" class="keep" style="color: red; display: inline">text</div>
       </div>
     </body>
   </html>`
 
-  const result = await Maizzle.removeInlinedClasses(html)
+  const withPostHTMLOptions = await Maizzle.removeInlinedClasses(html, {
+    build: {
+      posthtml: {
+        options: {
+          recognizeNoValueAttribute: true
+        }
+      }
+    }
+  })
+
+  const basic = await Maizzle.removeInlinedClasses(html)
 
-  t.is(result, expected)
+  const expectedBasic = expectedWithOptions.replace('no-value', 'no-value=""')
+
+  t.is(withPostHTMLOptions, expectedWithOptions)
+  t.is(basic, expectedBasic)
 })
 
 test('remove inlined selectors (disabled)', async t => {