fix: check for prop existence when removing rule

maizzle · Sep 22, 2022 · ee649d3 · ee649d3
1 parent eb435d6
commit ee649d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/transformers/removeInlinedSelectors.js b/src/transformers/removeInlinedSelectors.js
@@ -48,7 +48,7 @@ const plugin = () => tree => {
            * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
            */
           Object.keys(styleAttr).forEach(key => {
-            if (prop.includes(key)) {
+            if (prop && prop.includes(key)) {
               rule.remove()
               remove(classAttr, s => selector.includes(s))
             }

diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -386,7 +386,7 @@ test('markdown (disabled)', async t => {
   t.is(html, '> a quote')
 })
 
-test('remove inlined selectors', async t => {
+test.only('remove inlined selectors', async t => {
   const html = `<!DOCTYPE html>
   <html>
     <head>
@@ -395,7 +395,6 @@ test('remove inlined selectors', async t => {
           border: 0;
           vertical-align: middle
         }
-
         .hover-text-blue:hover {
           color: #00a8ff;
         }
@@ -412,6 +411,11 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -421,7 +425,7 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="remove keep ignore" style="color: red; display: inline">
+      <div 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>
@@ -441,6 +445,11 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -450,7 +459,7 @@ test('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="keep ignore" style="color: red; display: inline">
+      <div id="keepId" class="keep ignore 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 ignore" style="color: red; display: inline">text</div>