fix: attribute selector with spaces being removed

#392

Author: Ffloriel

packages/purgecss/__tests__/attributes.test.ts

@@ -63,8 +63,13 @@ describe("attributes", () => {
 
   it("handles [attribute*=value]", () => {
     // keep used css
-    expect(purgedCSS.includes('a[title~="thin"]')).toBe(true);
+    expect(purgedCSS.includes('a[title*="thin"]')).toBe(true);
     // remove unused css
-    expect(purgedCSS.includes('a[title~="fat"]')).toBe(false);
+    expect(purgedCSS.includes('a[title*="fat"]')).toBe(false);
+  });
+
+  it("handles spaces in attribute selector", () => {
+    expect(purgedCSS.includes('[class*=" class2"]')).toBe(true);
+    expect(purgedCSS.includes('[class*="class1 class2 "]')).toBe(true);
   });
 });

packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css

@@ -66,10 +66,18 @@ a[href$="http"] {
 
 /* CSS [attribute*="value"] Selector */
 
-a[title~="thin"] {
+a[title*="thin"] {
   border: 5px solid yellow;
 }
 
-a[title~="fat"] {
+a[title*="fat"] {
   border: 5px solid yellow;
+}
+
+/* CSS [attribute*="value"] Selector with spaces */
+[class*=" class2"] {
+  color: green;
+}
+[class*="class1 class2 "] {
+  color: blue;
 }

packages/purgecss/__tests__/test_examples/attributes/attribute_selector.html

@@ -5,4 +5,5 @@
   <a href="statements.pdf" target="_blank">pdf</a>
   <a href="https://w3schools.com">go to website</a>
   <a title="thin-yeah" href="#">hello</a>
+  <div class="class1 class2 class3">hello</div>
 </html>

packages/purgecss/src/ExtractorResultSets.ts

@@ -65,7 +65,10 @@ class ExtractorResultSets {
   }
 
   hasAttrSubstr(substr: string): boolean {
-    return this.someAttrValue((value) => value.includes(substr));
+    const wordSubstr = substr.trim().split(" ");
+    return wordSubstr.every((word) =>
+      this.someAttrValue((value) => value.includes(word))
+    );
   }
 
   hasAttrValue(value: string): boolean {