fixes #31 normalize css selectors

Author: George Griffiths

README.md

@@ -20,12 +20,17 @@ Both of the methods above accept a 2nd parameter, see section `Provide alternati
 
 ### CodeceptJS
 
-
 More details here: https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/plugins/codeceptjs
 
+### Puppeteer 
+
+There are some puppeteer examples available in the examples folder of this repository.
+
+[Puppeteer examples](https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/puppeteer)
+
 ### Playwright
 
-Update: as of Playwright v0.14.0 their CSS and text selectors work with shadow Dom our of the box, you don't need this library
+Update: as of Playwright v0.14.0 their CSS and text selectors work with shadow Dom our of the box, you don't need this library!
 
 Playwright works really nicely with this package.
 
@@ -44,13 +49,6 @@ const playwright = require('playwright');
 
 For a full example see: https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/playwright
 
-### Puppeteer 
-
-There are some puppeteer examples available in the examples folder of this repository.
-
-[Puppeteer examples](https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/puppeteer)
-
-
 ### Provide alternative node
 ```javascript
     // query from another node

package.json

@@ -1,6 +1,6 @@
 {
     "name": "query-selector-shadow-dom",
-    "version": "0.4.6",
+    "version": "0.5.0",
     "description": "use querySelector syntax to search for nodes inside of (nested) shadow roots",
     "main": "src/querySelectorDeep.js",
     "scripts": {

src/querySelectorDeep.js

@@ -26,6 +26,7 @@ export function querySelectorDeep(selector, root = document) {
 }
 
 function _querySelectorDeep(selector, findMany, root) {
+    selector = normalizeSelector(selector)
     let lightElement = root.querySelector(selector);
 
     if (document.head.createShadowRoot || document.head.attachShadow) {
@@ -150,4 +151,167 @@ function collectAllElementsDeep(selector = null, root) {
     findAllElements(root.querySelectorAll('*'));
 
     return selector ? allElements.filter(el => el.matches(selector)) : allElements;
-}
+}
+
+
+// normalize-selector-rev-02.js
+/*
+  author: kyle simpson (@getify)
+  original source: https://gist.github.com/getify/9679380
+
+  modified for tests by david kaye (@dfkaye)
+  21 march 2014
+
+  rev-02 incorporate kyle's changes 3/2/42014
+*/
+if (typeof require == 'function' && typeof module != 'undefined') {
+    // enable to re-use in a browser without require.js
+    module.exports = normalizeSelector;
+  }
+
+
+  function normalizeSelector(sel) {
+
+    // save unmatched text, if any
+    function saveUnmatched() {
+      if (unmatched) {
+        // whitespace needed after combinator?
+        if (tokens.length > 0 &&
+          /^[~+>]$/.test(tokens[tokens.length-1])
+        ) {
+          tokens.push(" ");
+        }
+
+        // save unmatched text
+        tokens.push(unmatched);
+      }
+    }
+
+    var tokens = [], match, unmatched, regex, state = [0],
+      next_match_idx = 0, prev_match_idx,
+      not_escaped_pattern = /(?:[^\\]|(?:^|[^\\])(?:\\\\)+)$/,
+      whitespace_pattern = /^\s+$/,
+      state_patterns = [
+        /\s+|\/\*|["'>~+\[\(]/g, // general
+        /\s+|\/\*|["'\[\]\(\)]/g, // [..] set
+        /\s+|\/\*|["'\[\]\(\)]/g, // (..) set
+        null, // string literal (placeholder)
+        /\*\//g // comment
+      ]
+    ;
+
+    sel = sel.trim();
+
+    while (true) {
+      unmatched = "";
+
+      regex = state_patterns[state[state.length-1]];
+
+      regex.lastIndex = next_match_idx;
+      match = regex.exec(sel);
+
+      // matched text to process?
+      if (match) {
+        prev_match_idx = next_match_idx;
+        next_match_idx = regex.lastIndex;
+
+        // collect the previous string chunk not matched before this token
+        if (prev_match_idx < next_match_idx - match[0].length) {
+          unmatched = sel.substring(prev_match_idx,next_match_idx - match[0].length);
+        }
+
+        // general, [ ] pair, ( ) pair?
+        if (state[state.length-1] < 3) {
+          saveUnmatched();
+
+          // starting a [ ] pair?
+          if (match[0] === "[") {
+            state.push(1);
+          }
+          // starting a ( ) pair?
+          else if (match[0] === "(") {
+            state.push(2);
+          }
+          // starting a string literal?
+          else if (/^["']$/.test(match[0])) {
+            state.push(3);
+            state_patterns[3] = new RegExp(match[0],"g");
+          }
+          // starting a comment?
+          else if (match[0] === "/*") {
+            state.push(4);
+          }
+          // ending a [ ] or ( ) pair?
+          else if (/^[\]\)]$/.test(match[0]) && state.length > 0) {
+            state.pop();
+          }
+          // handling whitespace or a combinator?
+          else if (/^(?:\s+|[~+>])$/.test(match[0])) {
+
+            // need to insert whitespace before?
+            if (tokens.length > 0 &&
+              !whitespace_pattern.test(tokens[tokens.length-1]) &&
+              state[state.length-1] === 0
+            ) {
+              // add normalized whitespace
+              tokens.push(" ");
+            }
+
+            // case-insensitive attribute selector CSS L4
+            if (state[state.length-1] === 1 &&
+                tokens.length === 5 &&
+                tokens[2].charAt(tokens[2].length-1) === '=') {
+                tokens[4] = " " + tokens[4];
+            }
+
+            // whitespace token we can skip?
+            if (whitespace_pattern.test(match[0])) {
+              continue;
+            }
+          }
+
+          // save matched text
+          tokens.push(match[0]);
+        }
+        // otherwise, string literal or comment
+        else {
+          // save unmatched text
+          tokens[tokens.length-1] += unmatched;
+
+          // unescaped terminator to string literal or comment?
+          if (not_escaped_pattern.test(tokens[tokens.length-1])) {
+            // comment terminator?
+            if (state[state.length-1] === 4) {
+              // ok to drop comment?
+              if (tokens.length < 2 ||
+                whitespace_pattern.test(tokens[tokens.length-2])
+              ) {
+                tokens.pop();
+              }
+              // otherwise, turn comment into whitespace
+              else {
+                tokens[tokens.length-1] = " ";
+              }
+
+              // handled already
+              match[0] = "";
+            }
+
+            state.pop();
+          }
+
+          // append matched text to existing token
+          tokens[tokens.length-1] += match[0];
+        }
+      }
+      // otherwise, end of processing (no more matches)
+      else {
+        unmatched = sel.substr(next_match_idx);
+        saveUnmatched();
+
+        break;
+      }
+    }
+
+    return tokens.join("").trim();
+  }

test/basic.spec.js

@@ -198,6 +198,34 @@ describe("Basic Suite", function() {
             expect(testComponents.length).toEqual(5);
         });
 
+        it('can handle spacing around attribute values', function() {
+            const testComponent = createTestComponent(parent, {
+                childClassName: 'header-1',
+                internalHTML: '<div class="header-2">Content</div>'
+            });
+            const test2 = createTestComponent(testComponent, {
+                childClassName: 'header-2'
+            });
+            test2.setAttribute('data-test', 'Hello, World')
+            testComponent.classList.add('header-1');
+            const testComponents = querySelectorAllDeep(`.header-1 [ data-test = "Hello, World" ], .header-2, .header-1`);
+            expect(testComponents.length).toEqual(5);
+        });
+
+        it('can handle spacing around attribute values with [ in attribute', function() {
+            const testComponent = createTestComponent(parent, {
+                childClassName: 'header-1',
+                internalHTML: '<div class="header-2">Content</div>'
+            });
+            const test2 = createTestComponent(testComponent, {
+                childClassName: 'header-2'
+            });
+            test2.setAttribute('data-braces-test', ' [ Hello, World ] ')
+            testComponent.classList.add('header-1');
+            const testComponents = querySelectorAllDeep(`.header-1 [ data-braces-test = " [ Hello, World ] " ], .header-2, .header-1`);
+            expect(testComponents.length).toEqual(5);
+        });
+
         it('can escaped comma in attribute values', function() {
             const testComponent = createTestComponent(parent, {
                 childClassName: 'header-1',