Test attribute selector

winston0410 · Aug 24, 2021 · c7d8f8c · c7d8f8c
1 parent 2e285de
commit c7d8f8c
Show file tree

Hide file tree

Showing 5 changed files with 190 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 # glory-svelte-preprocess
 
-A svelte preprocess for safely minimizing CSS class footprint for unbeliveable performance gain. :rocket: :rocket: :rocket:
+A svelte preprocess minimize CSS class footprint with statical analysis for unbeliveable performance gain. :rocket: :rocket: :rocket:
+
+## Disclaimers
+
+Although this preprocess has been tested extensively, this is not stable yet and expect a bug or two given the complexity of the whole process. Do open an issue and let me know if something go south, and I will try to fix as fast as I can.
 
 ## tldr;
 

diff --git a/src/helper.js b/src/helper.js
@@ -210,27 +210,32 @@ export const matchWithSelector = (element, selector) => {
     case "AttributeSelector": {
       const attr = getAttribute(element, selector.name.name);
       const attrValue = attr.value[0];
+      const unquoted = selector.value.value.replace(/(^["']|["']$)/g, "");
       switch (selector.matcher) {
         case "=": {
-          return (
-            attrValue.raw === selector.value.value.replace(/(^["']|["']$)/g, "")
-          );
+          return attrValue.raw === unquoted;
         }
 
-        //  TODO: Unhandled
+        //  TODO: Fix as it will match hyphen as well
         case "~=": {
+          return new RegExp(`\\b${unquoted}\\b`).test(attrValue.raw)
         }
 
+        //  TODO: Fix as it will match hyphen as well
         case "|=": {
+          return new RegExp(`\\b${unquoted}\\b`).test(attrValue.raw)
         }
 
         case "^=": {
+          return attrValue.raw.startsWith(unquoted);
         }
 
         case "$=": {
+          return attrValue.raw.endsWith(unquoted);
         }
 
         case "*=": {
+          return attrValue.raw.includes(unquoted);
         }
 
         default: {

diff --git a/src/transformer.js b/src/transformer.js
@@ -41,7 +41,6 @@ const isTargetElement = (selectorNode, node, linker) => {
       }
     } else {
       const isMatch = matchWithSelector(curNode, selector);
-      console.log(combinator, isMatch, curNode, selector);
       if (isMatch) {
         selector = r.prev();
         matchCount++;

diff --git a/test/issue2.spec.js b/test/issue2.spec.js
@@ -249,33 +249,6 @@ describe("when given a rule with pseudo element", function () {
   });
 });
 
-describe("when given a rule with attribute selector", function () {
-  it("should add class to the correct tag", function () {
-    const code = `
-<style>
-[href="https://example.org"]{
-  color: #ff3e00;
-}
-</style><div><a href="https://example.org"></a></div>`;
-
-    const filename = "/src/routes/index.svelte";
-
-    const result = wrappedPreprocessor(code, filename).code;
-
-    expect(result.replace(/\s/g, "")).toBe(
-      `<style>
-        :global(.a){
-          color: #ff3e00;
-        }
-      </style>
-      <div>
-          <a href="https://example.org" class="a"></a>
-      </div>
-`.replace(/\s/g, "")
-    );
-  });
-});
-
 describe("when given a rule with :not pseudo selector", function () {
   it("should transform the html correctly", function () {
     const code = `

diff --git a/test/issue3.spec.js b/test/issue3.spec.js
@@ -0,0 +1,176 @@
+import wrappedPreprocessor from "./wrapper.js";
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of =", function () {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[href="https://example.org"]{
+  color: #ff3e00;
+}
+</style><div><a href="https://example.org"></a></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+          <a href="https://example.org" class="a"></a>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of ^=", () => {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[title^="hello"]{
+  color: #ff3e00;
+}
+</style><div><div><img title="hello world" /></div></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+            <div><img title="hello world" class="a" /></div>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of $=", () => {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[href$="org"]{
+  color: #ff3e00;
+}
+</style><div><a href="https://example.org"></a><a href="http://hello.org"></a></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+          <a href="https://example.org" class="a"></a>
+          <a href="http://hello.org" class="a"></a>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of *=", () => {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[title*="bar"]{
+  color: #ff3e00;
+}
+</style><div><img title="hellobarworld" /></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+            <img title="hellobarworld" class="a"/>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of ~=", () => {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[title~="bar"]{
+  color: #ff3e00;
+}
+</style><div><img title="hello bar world" /></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+            <img title="hello bar world" class="a"/>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});
+
+describe("when given a rule with attribute selector", function () {
+  describe("when given a matcher of |=", () => {
+    it("should add class to the correct tag", function () {
+      const code = `
+<style>
+[title|="friend"]{
+  color: #ff3e00;
+}
+</style><div><img title="foo-friend-bar" /></div>`;
+
+      const filename = "/src/routes/index.svelte";
+
+      const result = wrappedPreprocessor(code, filename).code;
+
+      expect(result.replace(/\s/g, "")).toBe(
+        `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style>
+      <div>
+            <img title="foo-friend-bar" class="a"/>
+      </div>
+`.replace(/\s/g, "")
+      );
+    });
+  });
+});