test: fails to preserve known selectors

it should preserve selectors used for email client targeting
maizzle · Sep 28, 2024 · 20eb507 · 20eb507
1 parent e9fb327
commit 20eb507
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/test/transformers/inlineCSS.test.js b/test/transformers/inlineCSS.test.js
@@ -13,14 +13,17 @@ const css = `
   @media (max-width: 600px) {
     .sm\\:text-center {text-align: center}
   }
+  u + .body .gmail\\:hidden {
+    display: none;
+  }
 `
 
 const html = `
   <style>${css}</style>
   <p class="bar">test</p>
   <table class="w-1 h-1 sm:text-center bg-custom">
     <tr>
-      <td class="foo bar h-1">test</td>
+      <td class="foo bar h-1 gmail:hidden">test</td>
     </tr>
   </table>`
 
@@ -47,11 +50,12 @@ describe.concurrent('Inline CSS', () => {
         @media (max-width: 600px) {
           .sm\\:text-center {text-align: center}
         }
+        u + .body .gmail\\:hidden { display: none; }
       </style>
       <p style="cursor: pointer; margin: 0">test</p>
       <table class="sm:text-center" style="width: 4px; height: 4px; background-image: url('https://picsum.photos/600/400')">
         <tr>
-          <td style="height: 4px; color: red; cursor: pointer; margin: 0">test</td>
+          <td class="gmail:hidden" style="height: 4px; color: red; cursor: pointer; margin: 0">test</td>
         </tr>
       </table>`))
   })
@@ -72,11 +76,12 @@ describe.concurrent('Inline CSS', () => {
       @media (max-width: 600px) {
         .sm\\:text-center {text-align: center}
       }
+      u + .body .gmail\\:hidden { display: none; }
     </style>
       <p class="bar" style="cursor: pointer; margin: 0">test</p>
       <table class="w-1 h-1 sm:text-center bg-custom" style="width: 4px; height: 4px; background-image: url('https://picsum.photos/600/400')">
         <tr>
-          <td class="foo bar h-1" style="height: 4px; color: red; cursor: pointer; margin: 0">test</td>
+          <td class="foo bar h-1 gmail:hidden" style="height: 4px; color: red; cursor: pointer; margin: 0">test</td>
         </tr>
       </table>`))
   })
@@ -144,11 +149,12 @@ describe.concurrent('Inline CSS', () => {
         @media (max-width: 600px) {
           .sm-text-center {text-align: center}
         }
+        u + .body .gmail-hidden { display: none; }
       </style>
       <p style="cursor: pointer">test</p>
       <table class="sm-text-center" style="width: 4px; height: 4px; background-image: url('https://picsum.photos/600/400')">
         <tr>
-          <td style="height: 4px; color: red; cursor: pointer">test</td>
+          <td class="gmail-hidden" style="height: 4px; color: red; cursor: pointer">test</td>
         </tr>
       </table>`))
   })