fix: preserve media and pseudos when removing inlined css

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

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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/test/test-transformers.js b/test/test-transformers.js
@@ -416,6 +416,10 @@ test.only('remove inlined selectors', async t => {
           color: red;
         }
 
+        .ignore {
+          display: inline-block;
+        }
+
         @media (max-width: 600px) {
           .ignore {color: blue}
         }
@@ -459,10 +463,10 @@ test.only('remove inlined selectors', async t => {
       </style>
     </head>
     <body>
-      <div id="keepId" class="keep ignore foo-class" 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>`