Repository: maizzle/framework
Pull request #759 (2022-09-22 15:40:37)

fix: removing inlined css


Patch:
diff --git a/src/transformers/index.js b/src/transformers/index.js
index 9c7464e..c6444eb 100644
--- a/src/transformers/index.js
+++ b/src/transformers/index.js
@@ -26,8 +26,8 @@ exports.process = async (html, config) => {
   html = await attributeToStyle(html, config)
   html = await inline(html, config)
   html = await shorthandInlineCSS(html, config)
-  html = await removeInlinedClasses(html, config)
   html = await removeUnusedCSS(html, config)
+  html = await removeInlinedClasses(html, config)
   html = await removeInlineSizes(html, config)
   html = await removeInlineBgColor(html, config)
   html = await removeAttributes(html, config)
diff --git a/src/transformers/removeInlinedSelectors.js b/src/transformers/removeInlinedSelectors.js
index 43f4424..f5d36e2 100644
--- 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))
             }


Test patch:
diff --git a/test/test-transformers.js b/test/test-transformers.js
index 5aee0b3..81a4dff 100644
--- a/test/test-transformers.js
+++ b/test/test-transformers.js
@@ -395,7 +395,6 @@ test('remove inlined selectors', async t => {
           border: 0;
           vertical-align: middle
         }
-
         .hover-text-blue:hover {
           color: #00a8ff;
         }
@@ -412,6 +411,15 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
+        .ignore {
+          display: inline-block;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -421,7 +429,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 +449,11 @@ test('remove inlined selectors', async t => {
 
         #keepId {float:none}
 
+        .foo-class {
+          /* COMMENT */
+          color: red;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -450,10 +463,10 @@ 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 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>
+        <div id="keepId" class="keep" style="color: red; display: inline">text</div>
       </div>
     </body>
   </html>`