Merge pull request #1469 from maizzle/fix-pseudos

Ensure pseudo-classes preserved when inlining CSS

Author: cossssmin

src/transformers/inline.js

@@ -142,15 +142,18 @@ export async function inline(html = '', options = {}) {
 
     // For each rule in the CSS block we're parsing
     root.walkRules(rule => {
+      // Create a set of selectors
       const { selector } = rule
 
-      selectors.add({
-        name: selector,
-        prop: get(rule.nodes[0], 'prop')
-      })
-
+      // Add the selector to the set as long as it's not a pseudo selector
+      if (!/(^|[^\\])::?[\w-]+/.test(selector)) {
+        selectors.add({
+          name: selector,
+          prop: get(rule.nodes[0], 'prop')
+        })
+      }
       // Preserve pseudo selectors
-      if ([':hover', ':active', ':focus', ':visited', ':link', ':before', ':after'].some(i => selector.includes(i))) {
+      else {
         options.safelist.add(selector)
       }
 

test/transformers/inlineCSS.test.js

@@ -214,4 +214,29 @@ describe.concurrent('Inline CSS', () => {
       <style> </style>
       <p style="background-image: url('data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=')">test</p>`))
   })
+
+  test('Works with pseudo-classes', async () => {
+    expect(
+      cleanString(
+        await inlineCSS(`
+          <style>
+            li::marker {color: blue}
+
+            ul > li {
+              color: red;
+            }
+          </style>
+          <ul>
+            <li>test</li>
+          </ul>`,
+        )
+      )
+    ).toBe(cleanString(`
+      <style>
+        li::marker {color: blue}
+      </style>
+      <ul>
+        <li style="color: red">test</li>
+      </ul>`))
+  })
 })