Handle :not() pseudo selector

README.md

@@ -120,8 +120,6 @@ This preprocess currently doesn't handle the following selectors:
 
 - multiple pseudo selectors (e.g. `.foo:active .bar:hover`)
 
-- `:not` pseudo class
-
 ## FAQ
 
 ### No hash for classname?

src/helper.js

@@ -139,10 +139,10 @@ export const assembleRules = (cache) => {
   for (const mediaQuery in cache) {
     for (const pseudo in cache[mediaQuery]) {
       for (const property in cache[mediaQuery][pseudo]) {
-        const className =
-          cache[mediaQuery][pseudo][property] +
-          (pseudo !== "none" ? pseudo : "");
-        let rule = `:global(.${className}){${property}}`;
+        const className = cache[mediaQuery][pseudo][property];
+        let rule = `:global(.${className}${
+          pseudo === "none" || pseudo === ":not" ? "" : pseudo
+        }){${property}}`;
         if (mediaQuery !== "none") {
           rule = `${mediaQuery}{${rule}}`;
         }
@@ -185,7 +185,11 @@ export const matchWithSelector = (element, selector) => {
     }
     case "PseudoClassSelector": {
       //  Not handle :not at the moment
-      return selector.name !== "not";
+      if (selector.name === "not") {
+        return !matchWithSelector(element, selector.children[0].children[0]);
+      } else {
+        return true;
+      }
     }
   }
 

src/transformer.js

@@ -34,23 +34,23 @@ const isTargetElement = (selectorNode, node, linker) => {
     if (combinator) {
       curNode = linker.getParent(curNode);
       selector = r.prev();
-      matchCount ++
+      matchCount++;
       if (combinator === ">") {
         //  prevent linker from providing more than one node for finding direct parent
         linker.hide(curNode);
       }
     } else {
       const isMatch = matchWithSelector(curNode, selector);
-      console.log(isMatch, curNode, selector)
+      console.log(combinator, isMatch, curNode, selector);
       if (isMatch) {
         selector = r.prev();
         matchCount++;
         if (r.length() === matchCount) {
           found = true;
-          return found
+          return found;
         }
       } else {
-        curNode = linker.getParent(curNode);
+        return false;
       }
     }
   }

test/issue2.spec.js

@@ -3,7 +3,7 @@ import createTokenizer from "../src/tokenizer";
 import { getProxiedObject } from "../src/helper";
 import { parse } from "svelte/compiler";
 import path from "path";
-import wrappedPreprocessor from './wrapper.js'
+import wrappedPreprocessor from "./wrapper.js";
 
 describe("when given a rule with descendant combinator", function () {
   const code = `
@@ -275,3 +275,27 @@ describe("when given a rule with attribute selector", function () {
     );
   });
 });
+
+describe("when given a rule with :not pseudo selector", function () {
+  it("should transform the html correctly", function () {
+    const code = `
+<style>
+:not(.hello){
+  color: #ff3e00;
+}
+</style><p></p><p class="world"></p>`;
+
+    const filename = "/src/routes/index.svelte";
+
+    const result = wrappedPreprocessor(code, filename).code;
+
+    expect(result.replace(/\s/g, "")).toBe(
+      `<style>
+        :global(.a){
+          color: #ff3e00;
+        }
+      </style><p class="a"></p><p class="a"></p>
+`.replace(/\s/g, "")
+    );
+  });
+});