bugfix: Classes that contain :is or :where in their names are no …

…longer unintentionally purged (#1187)

* add failing tests

* check if pseudo classes are empty

packages/purgecss/__tests__/pseudo-class.test.ts

@@ -107,6 +107,9 @@ describe(":where pseudo class", () => {
     const resultsPurge = await new PurgeCSS().purge({
       content: [`${ROOT_TEST_EXAMPLES}pseudo-class/where.html`],
       css: [`${ROOT_TEST_EXAMPLES}pseudo-class/where.css`],
+      safelist: {
+        standard: ["[&:where(.a)]:text-black"],
+      }
     });
     purgedCSS = resultsPurge[0].css;
   });
@@ -115,6 +118,7 @@ describe(":where pseudo class", () => {
     expect(purgedCSS.includes(".unused")).toBe(false);
     expect(purgedCSS.includes(".root :where(.a) .c {")).toBe(true);
     expect(purgedCSS.includes(".root:where(.a) .c {")).toBe(true);
+    expect(purgedCSS.includes(".\\[\\&\\:where\\(\\.a\\)\\]\\:text-black:where(.a) {")).toBe(true);
   });
 });
 
@@ -124,6 +128,9 @@ describe(":is pseudo class", () => {
     const resultsPurge = await new PurgeCSS().purge({
       content: [`${ROOT_TEST_EXAMPLES}pseudo-class/is.html`],
       css: [`${ROOT_TEST_EXAMPLES}pseudo-class/is.css`],
+      safelist: {
+        standard: ["[&:is(.a)]:text-black"]
+      }
     });
     purgedCSS = resultsPurge[0].css;
   });
@@ -132,5 +139,6 @@ describe(":is pseudo class", () => {
     expect(purgedCSS.includes(".unused")).toBe(false);
     expect(purgedCSS.includes(".root :is(.a) .c {")).toBe(true);
     expect(purgedCSS.includes(".root:is(.a) .c {")).toBe(true);
+    expect(purgedCSS.includes(".\\[\\&\\:is\\(\\.a\\)\\]\\:text-black:is(.a) {")).toBe(true);
   });
 });

packages/purgecss/__tests__/test_examples/pseudo-class/is.css

@@ -21,4 +21,8 @@
 .root :is(.unused) .c,
 .root :is(.a, .b) .c :is(.unused, .unused2) {
   display: flex;
+}
+
+.\[\&\:is\(\.a\)\]\:text-black:is(.a) {
+  color: black;
 }

packages/purgecss/__tests__/test_examples/pseudo-class/where.css

@@ -21,4 +21,8 @@
 .root :where(.unused) .c,
 .root :where(.a, .b) .c :where(.unused, .unused2) {
   display: flex;
+}
+
+.\[\&\:where\(\.a\)\]\:text-black:where(.a) {
+  color: black;
 }

packages/purgecss/src/index.ts

@@ -553,16 +553,23 @@ class PurgeCSS {
         }
       });
 
+      // removes selectors containing empty :where and :is
       selectorsParsed.walk((selector) => {
         if (selector.type !== "selector") {
           return;
         }
 
         if (
           selector.toString() &&
-          /(:where$)|(:is$)|(:where[^(])|(:is[^(])/.test(selector.toString())
+          /(:where)|(:is)/.test(selector.toString())
         ) {
-          selector.remove();
+          selector.walk((node) => {
+            if (node.type !== "pseudo") return;
+            if (node.value !== ":where" && node.value !== ":is") return;
+            if (node.nodes.length === 0) {
+              selector.remove();
+            }
+          });
         }
       });
     }).processSync(node.selector);