From 418dc7e0a7a30b57e1d7d9d10272e8f47eeb46fb Mon Sep 17 00:00:00 2001
From: Ffloriel <florielfedry@gmail.com>
Date: Sun, 24 Jan 2021 13:53:37 +0000
Subject: [PATCH] fix: attribute selector with spaces being removed

#392
---
 packages/purgecss/__tests__/attributes.test.ts       |  9 +++++++--
 .../test_examples/attributes/attribute_selector.css  | 12 ++++++++++--
 .../test_examples/attributes/attribute_selector.html |  1 +
 packages/purgecss/src/ExtractorResultSets.ts         |  5 ++++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/purgecss/__tests__/attributes.test.ts b/packages/purgecss/__tests__/attributes.test.ts
index 87bcf189..421605a7 100644
--- a/packages/purgecss/__tests__/attributes.test.ts
+++ b/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);
   });
 });
diff --git a/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css b/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css
index 57dc6dcf..5a3f5362 100644
--- a/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.html b/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.html
index 3ceee0a8..feb101ad 100644
--- a/packages/purgecss/__tests__/test_examples/attributes/attribute_selector.html
+++ b/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>
diff --git a/packages/purgecss/src/ExtractorResultSets.ts b/packages/purgecss/src/ExtractorResultSets.ts
index 65ae0e49..18e111a3 100644
--- a/packages/purgecss/src/ExtractorResultSets.ts
+++ b/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 {