Handle sibling combinators

Author: winston0410

README.md

@@ -98,25 +98,27 @@ And Svelte will generate the following HTML and CSS(should be external styleshee
 
 This preprocess will transform rules with the following selectors:
 
-[X] Type Selector `h1`
+- [X] Type Selector `h1`
 
-[X] Id Selector `#foo`
+- [X] Id Selector `#foo`
 
-[X] Class Selector `.foo`
+- [X] Class Selector `.foo`
 
-[X] Attribute Selector `li[title]`
+- [X] Attribute Selector `li[title]`
 
-[X] Descendant combinator `.foo .bar` 
+- [X] Descendant combinator `.foo .bar` 
 
-[X] Child combinator `.foo>.bar` 
+- [X] Child combinator `.foo>.bar` 
 
-[ ] Adjacent sibling combinator `.foo+.bar` 
+- [X] Adjacent sibling combinator `.foo+.bar` 
 
-[ ] General sibling combinator `.foo~.bar` 
+- [X] General sibling combinator `.foo~.bar` 
 
-[X] Pseudo class `.foo:hover` 
+- [X] Pseudo class `.foo:hover` 
 
-[X] Pseudo selector `.foo::before` 
+- [X] Pseudo selector `.foo::before` 
+
+- [X] `:not()` selector `a:not(.hello)`
 
 ## Known limitations
 

src/transformer.js

@@ -32,26 +32,60 @@ const isTargetElement = (selectorNode, node, linker) => {
     }
     const combinator = isCombinator(selector);
     if (combinator) {
-      curNode = linker.getParent(curNode);
       selector = r.prev();
       matchCount++;
-      if (combinator === ">") {
-        //  prevent linker from providing more than one node for finding direct parent
-        linker.hide(curNode);
+      switch (combinator) {
+        case ">":
+          //  prevent linker from providing more than one node for finding direct parent
+          curNode = linker.getParent(curNode);
+          linker.hide(curNode);
+          break;
+
+        case "~": {
+          //  should check its siblings before it
+          const parent = linker.getParent(curNode);
+          const curNodeIndex = parent.children.findIndex((s) => s === curNode);
+          const sliced = parent.children.slice(0, curNodeIndex + 1);
+
+          for (const sibling of sliced) {
+            const matched = matchWithSelector(sibling, selector);
+            if (matched) {
+              matchCount++;
+            }
+          }
+          break;
+        }
+
+        case "+": {
+          const parent = linker.getParent(curNode);
+          const curNodeIndex = parent.children.findIndex((s) => s === curNode);
+          if (curNodeIndex > 0) {
+            curNode = parent.children[curNodeIndex - 1];
+          } else {
+            return false;
+          }
+          break;
+        }
+
+        case " ": {
+          curNode = linker.getParent(curNode);
+          break;
+        }
       }
     } else {
       const isMatch = matchWithSelector(curNode, selector);
       if (isMatch) {
         selector = r.prev();
         matchCount++;
-        if (r.length() === matchCount) {
-          found = true;
-          return found;
-        }
       } else {
         return false;
       }
     }
+
+    if (r.length() === matchCount) {
+      found = true;
+      return found;
+    }
   }
 
   return found;