Fix use of sibling-related CSS syntax at prefix position

Related discussion:
- https://www.reddit.com/r/uBlockOrigin/comments/c6iem5/

docs/tests/procedural-cosmetic-filters.html

@@ -163,8 +163,8 @@
     </div>
 
 <div id="a17" class="tile">
-    <div class="pass"><div class="fail"></div><a></a><b></b></div>
+    <div class="pass"><div class="fail"></div><a><b></b></a></div>
-    <code>#pcf #a17 .fail:has(~ b)</code>
+    <code>#pcf #a17 .fail:has(~ a:has(b))</code>
     </div>
 
 </div>

docs/tests/procedural-html-filters.html

@@ -128,16 +128,16 @@
     <code>^#phf #a11 .pass > a:has(b) + .fail:has(b)</code>
     </div>
 
-</div>
-
 <div id="a12" class="tile">
     <div class="pass"><div class="fail"></div><a></a><b></b></div>
     <code>^#phf #a12 .fail:has(+ a)</code>
     </div>
 
 <div id="a13" class="tile">
-    <div class="pass"><div class="fail"></div><a></a><b></b></div>
+    <div class="pass"><div class="fail"></div><a><b></b></a></div>
-    <code>^#phf #a13 .fail:has(~ b)</code>
+    <code>^#phf #a13 .fail:has(~ a:has(b))</code>
+    </div>
+
 </div>
 
 <script>

src/js/contentscript.js

@@ -660,11 +660,9 @@ vAPI.DOMFilterer = (function() {
         }
         prime(input) {
             const root = input || document;
-            if ( this.selector !== '' ) {
+            if ( this.selector === '' ) { return [ root ]; }
             return root.querySelectorAll(this.selector);
         }
-            return [ root ];
-        }
         exec(input) {
             let nodes = this.prime(input);
             for ( const task of this.tasks ) {

src/js/html-filtering.js

@@ -169,11 +169,9 @@
         }
         prime(input) {
             const root = input || docRegister;
-            if ( this.selector !== '' ) {
+            if ( this.selector === '' ) { return [ root ]; }
             return root.querySelectorAll(this.selector);
         }
-            return [ root ];
-        }
         exec(input) {
             if ( this.invalid ) { return []; }
             let nodes = this.prime(input);

src/js/static-ext-filtering.js

@@ -68,9 +68,9 @@
         parsed.suffix = '';
     };
 
-    const isValidCSSSelector = (function() {
+    const isValidCSSSelector = (( ) => {
-        var div = document.createElement('div'),
+        const div = document.createElement('div');
-            matchesFn;
+        let matchesFn;
         // Keep in mind:
         //   https://github.com/gorhill/uBlock/issues/693
         //   https://github.com/gorhill/uBlock/issues/1955
@@ -95,11 +95,11 @@
         }
         // Quick regex-based validation -- most cosmetic filters are of the
         // simple form and in such case a regex is much faster.
-        var reSimple = /^[#.][\w-]+$/;
+        const reSimple = /^[#.][\w-]+$/;
-        return function(s) {
+        return s => {
             if ( reSimple.test(s) ) { return true; }
             try {
-                matchesFn(s + ', ' + s + ':not(#foo)');
+                matchesFn(`${s}, ${s}:not(#foo)`);
             } catch (ex) {
                 return false;
             }
@@ -152,7 +152,7 @@
         return hostnames;
     };
 
-    const compileProceduralSelector = (function() {
+    const compileProceduralSelector = (( ) => {
         const reProceduralOperator = new RegExp([
             '^(?:',
                 [
@@ -178,8 +178,9 @@
 
         const reEatBackslashes = /\\([()])/g;
         const reEscapeRegex = /[.*+?^${}()|[\]\\]/g;
-        const reNeedScope = /^\s*[+>~]/;
+        const reNeedScope = /^\s*>/;
-        const reIsDanglingSelector = /(?:[+>~]\s*|\s+)$/;
+        const reIsDanglingSelector = /[+>~\s]\s*$/;
+        const reIsSiblingSelector = /^\s*[+~]/;
 
         const regexToRawValue = new Map();
         let lastProceduralSelector = '',
@@ -228,7 +229,7 @@
             // https://github.com/AdguardTeam/ExtendedCss/issues/31#issuecomment-302391277
             //   Prepend `:scope ` if needed.
             if ( reNeedScope.test(s) ) {
-                s = ':scope ' + s;
+                s = `:scope ${s}`;
             }
             return compile(s);
         };
@@ -367,7 +368,7 @@
             return raw.join('');
         };
 
-        const compile = function(raw) {
+        const compile = function(raw, root = false) {
             if ( raw === '' ) { return; }
             let prefix = '',
                 tasks = [];
@@ -436,16 +437,31 @@
             // At least one task found: nothing should be left to parse.
             if ( tasks.length === 0 ) {
                 prefix = raw;
-                tasks = undefined;
             } else if ( opPrefixBeg < n ) {
                 const spath = compileSpathExpression(raw.slice(opPrefixBeg));
                 if ( spath === undefined ) { return; }
                 tasks.push([ ':spath', spath ]);
             }
             // https://github.com/NanoAdblocker/NanoCore/issues/1#issuecomment-354394894
+            // https://www.reddit.com/r/uBlockOrigin/comments/c6iem5/
+            //   Convert sibling-selector prefix into :spath operator, but
+            //   only if context is not the root.
             if ( prefix !== '' ) {
                 if ( reIsDanglingSelector.test(prefix) ) { prefix += '*'; }
-                if ( isValidCSSSelector(prefix) === false ) { return; }
+                if ( isValidCSSSelector(prefix) === false ) {
+                    if (
+                        root ||
+                        reIsSiblingSelector.test(prefix) === false ||
+                        compileSpathExpression(prefix) === undefined
+                    ) {
+                        return;
+                    }
+                    tasks.unshift([ ':spath', prefix ]);
+                    prefix = '';
+                }
+            }
+            if ( tasks.length === 0 ) {
+                tasks = undefined;
             }
             return { selector: prefix, tasks: tasks };
         };
@@ -455,7 +471,7 @@
                 return lastProceduralSelectorCompiled;
             }
             lastProceduralSelector = raw;
-            let compiled = compile(raw);
+            let compiled = compile(raw, true);
             if ( compiled !== undefined ) {
                 compiled.raw = decompile(compiled);
                 compiled = JSON.stringify(compiled);
@@ -717,8 +733,8 @@
             }
 
             // Procedural selector?
-            let compiled;
+            const compiled = compileProceduralSelector(raw);
-            if ( (compiled = compileProceduralSelector(raw)) ) {
+            if ( compiled !== undefined ) {
                 return compiled;
             }
         };