Merge pull request #279 from hokify/fix/whitelist

fix(whitelist): allow whitelisting of attributes

Author: Ffloriel

packages/purgecss/__tests__/test_examples/whitelist/whitelist.css

@@ -20,4 +20,8 @@ button {
 
 .nav-red {
   background-color: red;
-}
+}
+
+.random[data-v-test] {
+  color: green;
+}

packages/purgecss/__tests__/whitelist.test.ts

@@ -9,12 +9,16 @@ describe("whitelist", () => {
       content: [`${root}whitelist/whitelist.html`],
       css: [`${root}whitelist/whitelist.css`],
       whitelist: ["random", "h1", "yep", "button"],
-      whitelistPatterns: [/nav-/]
+      whitelistPatterns: [/nav-/, /data-v-.*/]
     });
     purgedCSS = resultsPurge[0].css;
     done();
   });
 
+  it("finds attr", () => {
+    expect(purgedCSS.includes("[data-v-test]")).toBe(true);
+  });
+
   it("finds random class", () => {
     expect(purgedCSS.includes(".random")).toBe(true);
   });

packages/purgecss/src/index.ts

@@ -705,21 +705,22 @@ class PurgeCSS {
     if (isInPseudoClass(selector)) return true;
 
     let isPresent = false;
+
     for (const nodeSelector of selector.nodes) {
+      const val =
+        (nodeSelector.type === "attribute" && nodeSelector.attribute) ||
+        nodeSelector.value;
+
       // if the selector is whitelisted with children
       // returns true to keep all children selectors
-      if (
-        nodeSelector.value &&
-        this.isSelectorWhitelistedChildren(nodeSelector.value)
-      ) {
+      if (val && this.isSelectorWhitelistedChildren(val)) {
         return true;
       }
 
       // The selector is found in the internal and user-defined whitelist
       if (
-        nodeSelector.value &&
-        (CSS_WHITELIST.includes(nodeSelector.value) ||
-          this.isSelectorWhitelisted(nodeSelector.value))
+        val &&
+        (CSS_WHITELIST.includes(val) || this.isSelectorWhitelisted(val))
       ) {
         isPresent = true;
         continue;
@@ -730,10 +731,11 @@ class PurgeCSS {
           // `value` is a dynamic attribute, highly used in input element
           // the choice is to always leave `value` as it can change based on the user
           // idem for `checked`, `selected`
-          isPresent =
-            ["value", "checked", "selected"].includes(nodeSelector.attribute)
-              ? true
-              : isAttributeFound(nodeSelector, selectorsFromExtractor);
+          isPresent = ["value", "checked", "selected"].includes(
+            nodeSelector.attribute
+          )
+            ? true
+            : isAttributeFound(nodeSelector, selectorsFromExtractor);
           break;
         case "class":
           isPresent = isClassFound(nodeSelector, selectorsFromExtractor);
@@ -747,9 +749,12 @@ class PurgeCSS {
         default:
           break;
       }
+
       // selector is not in whitelist children or in whitelist
       // and it has not been found as an attribute/class/identifier/tag
-      if (!isPresent) return false;
+      if (!isPresent) {
+        return false;
+      }
     }
     return isPresent;
   }