@asamuzakjp/dom-selector 0.8.1 → 0.10.0

package/README.md

@@ -3,6 +3,7 @@
 [![build](https://github.com/asamuzaK/domSelector/actions/workflows/node.js.yml/badge.svg)](https://github.com/asamuzaK/domSelector/actions/workflows/node.js.yml)
 [![CodeQL](https://github.com/asamuzaK/domSelector/actions/workflows/codeql.yml/badge.svg)](https://github.com/asamuzaK/domSelector/actions/workflows/codeql.yml)
 [![npm (scoped)](https://img.shields.io/npm/v/@asamuzakjp/dom-selector)](https://www.npmjs.com/package/@asamuzakjp/dom-selector)
+
 <!--
 [![release](https://img.shields.io/github/v/release/asamuzaK/domSelector)](https://github.com/asamuzaK/domSelector/releases)
 -->
@@ -10,14 +11,12 @@
 Retrieve DOM node from the given CSS selector.
 **Experimental**
 
-
 ## Install
 
 ```console
 npm i @asamuzakjp/dom-selector
 ```
 
-
 ## Usage
 
 ```javascript
@@ -28,65 +27,65 @@ const {
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-#### Table of Contents
-
-- [matches][1]
-  - [Parameters][2]
-- [closest][3]
-  - [Parameters][4]
-- [querySelector][5]
-  - [Parameters][6]
-- [querySelectorAll][7]
-  - [Parameters][8]
-
-
-### matches(selector, node)
+### matches(selector, node, opt)
 
-Implementation of [Element.matches()][62].
+matches - [Element.matches()][64]
 
 #### Parameters
 
-- `selector` **[string][56]** CSS selector
-- `node` **[object][57]** Referenced Element node
+- `selector` **[string][59]** CSS selector
+- `node` **[object][60]** Element node
+- `opt` **[object][60]?** options
+  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
+  - `opt.jsdom` **[boolean][61]?** is jsdom
 
-Returns **[boolean][58]** Result
+Returns **[boolean][61]** result
 
 
-### closest(selector, node)
+### closest(selector, node, opt)
 
-Implementation of [Element.closest()][63].
+closest - [Element.closest()][65]
 
 #### Parameters
 
-- `selector` **[string][56]** CSS selector
-- `node` **[object][57]** Referenced Element node
+- `selector` **[string][59]** CSS selector
+- `node` **[object][60]** Element node
+- `opt` **[object][60]?** options
+  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
+  - `opt.jsdom` **[boolean][61]?** is jsdom
 
-Returns **[object][57]?** Matched node
+Returns **[object][60]?** matched node
 
 
-### querySelector(selector, refPoint)
+### querySelector(selector, refPoint, opt)
 
-Implementation of [Document.querySelector()][64], [Element.querySelector()][65].
+querySelector - [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
 
 #### Parameters
 
-- `selector` **[string][56]** CSS selector
-- `refPoint` **[object][57]** Reference point. Document or Element node
+- `selector` **[string][59]** CSS selector
+- `refPoint` **[object][60]** Document, DocumentFragment or Element node
+- `opt` **[object][60]?** options
+  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
+  - `opt.jsdom` **[boolean][61]?** is jsdom
 
-Returns **[object][57]?** Matched node
+Returns **[object][60]?** matched node
 
 
-### querySelectorAll(selector, refPoint)
+### querySelectorAll(selector, refPoint, opt)
 
-Implementation of [Document.querySelectorAll()][66], [Element.querySelectorAll()][67].
-**NOTE**: returns [Array][59], not [NodeList][61].
+querySelectorAll - [Document.querySelectorAll()][69], [Document.querySelectorAll()][70], [Element.querySelectorAll()][71]
+**NOTE**: returns Array, not NodeList
 
 #### Parameters
 
-- `selector` **[string][56]** CSS selector
-- `refPoint` **[object][57]** Reference point. Document or Element node
+- `selector` **[string][59]** CSS selector
+- `refPoint` **[object][60]** Document, DocumentFragment or Element node
+- `opt` **[object][60]?** options
+  - `opt.globalObject` **[object][60]?** global object, e.g. `window`, `globalThis`
+  - `opt.jsdom` **[boolean][61]?** is jsdom
 
-Returns **[Array][59]&lt;([object][57] \| [undefined][60])>** Array of matched nodes
+Returns **[Array][62]&lt;([object][60] \| [undefined][63])>** array of matched nodes
 
 
 ## Acknowledgments
@@ -105,15 +104,16 @@ The following resources have been of great help in the development of the DOM Se
 [6]: #parameters-2
 [7]: #queryselectorall
 [8]: #parameters-3
-[56]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[58]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
-[61]: https://developer.mozilla.org/docs/Web/API/NodeList
-[62]: https://developer.mozilla.org/docs/Web/API/Element/matches
-[63]: https://developer.mozilla.org/docs/Web/API/Element/closest
-[64]: https://developer.mozilla.org/docs/Web/API/Document/querySelector
-[65]: https://developer.mozilla.org/docs/Web/API/Element/querySelector
-[66]: https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll
-[67]: https://developer.mozilla.org/docs/Web/API/Element/querySelectorAll
+[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[61]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[62]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[63]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
+[64]: https://developer.mozilla.org/docs/Web/API/Element/matches
+[65]: https://developer.mozilla.org/docs/Web/API/Element/closest
+[66]: https://developer.mozilla.org/docs/Web/API/Document/querySelector
+[67]: https://developer.mozilla.org/docs/Web/API/DocumentFragment/querySelector
+[68]: https://developer.mozilla.org/docs/Web/API/Element/querySelector
+[69]: https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll
+[70]: https://developer.mozilla.org/docs/Web/API/DocumentFragment/querySelectorAll
+[71]: https://developer.mozilla.org/docs/Web/API/Element/querySelectorAll

package/package.json

@@ -19,7 +19,8 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "css-tree": "^2.3.1",
-    "domexception": "^4.0.0"
+    "domexception": "^4.0.0",
+    "is-potential-custom-element-name": "^1.0.1"
   },
   "devDependencies": {
     "@types/css-tree": "^2.3.1",
@@ -27,7 +28,7 @@
     "chai": "^4.3.7",
     "eslint": "^8.40.0",
     "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-jsdoc": "^44.2.3",
+    "eslint-plugin-jsdoc": "^44.2.4",
     "eslint-plugin-regexp": "^1.15.0",
     "eslint-plugin-unicorn": "^47.0.0",
     "jsdom": "^22.0.0",
@@ -41,5 +42,5 @@
     "test": "c8 --reporter=text mocha --exit test/**/*.test.js",
     "tsc": "npx tsc"
   },
-  "version": "0.8.1"
+  "version": "0.10.0"
 }

package/src/index.js

@@ -13,10 +13,13 @@ const { Matcher } = require('./js/matcher.js');
  * matches - Element.matches()
  * @param {string} selector - CSS selector
  * @param {object} node - Element node
+ * @param {object} [opt] - options
+ * @param {object} [opt.globalObject] - global object
+ * @param {boolean} [opt.jsdom] - is jsdom
  * @returns {boolean} - result
  */
-const matches = (selector, node) => {
-  const matcher = new Matcher(selector, node);
+const matches = (selector, node, opt) => {
+  const matcher = new Matcher(selector, node, opt);
   return matcher.matches();
 };
 
@@ -24,10 +27,13 @@ const matches = (selector, node) => {
  * closest - Element.closest()
  * @param {string} selector - CSS selector
  * @param {object} node - Element node
+ * @param {object} [opt] - options
+ * @param {object} [opt.globalObject] - global object
+ * @param {boolean} [opt.jsdom] - is jsdom
  * @returns {?object} - matched node
  */
-const closest = (selector, node) => {
-  const matcher = new Matcher(selector, node);
+const closest = (selector, node, opt) => {
+  const matcher = new Matcher(selector, node, opt);
   return matcher.closest();
 };
 
@@ -35,10 +41,13 @@ const closest = (selector, node) => {
  * querySelector - Document.querySelector(), Element.querySelector()
  * @param {string} selector - CSS selector
  * @param {object} refPoint - Document or Element node
+ * @param {object} [opt] - options
+ * @param {object} [opt.globalObject] - global object
+ * @param {boolean} [opt.jsdom] - is jsdom
  * @returns {?object} - matched node
  */
-const querySelector = (selector, refPoint) => {
-  const matcher = new Matcher(selector, refPoint);
+const querySelector = (selector, refPoint, opt) => {
+  const matcher = new Matcher(selector, refPoint, opt);
   return matcher.querySelector();
 };
 
@@ -47,10 +56,13 @@ const querySelector = (selector, refPoint) => {
  * NOTE: returns Array, not NodeList
  * @param {string} selector - CSS selector
  * @param {object} refPoint - Document or Element node
+ * @param {object} [opt] - options
+ * @param {object} [opt.globalObject] - global object
+ * @param {boolean} [opt.jsdom] - is jsdom
  * @returns {Array.<object|undefined>} - array of matched nodes
  */
-const querySelectorAll = (selector, refPoint) => {
-  const matcher = new Matcher(selector, refPoint);
+const querySelectorAll = (selector, refPoint, opt) => {
+  const matcher = new Matcher(selector, refPoint, opt);
   return matcher.querySelectorAll();
 };
 

package/src/js/matcher.js

@@ -4,6 +4,7 @@
 'use strict';
 
 /* import */
+const isCustomElementName = require('is-potential-custom-element-name');
 const DOMException = require('./domexception.js');
 const { generateCSS, parseSelector, walkAST } = require('./parser.js');
 
@@ -19,14 +20,51 @@ const FILTER_SHOW_ELEMENT = 1;
 const TEXT_NODE = 3;
 
 /* regexp */
-// FIXME: custom element name is not fully implemented
-// @see https://html.spec.whatwg.org/#valid-custom-element-name
-const HTML_CUSTOM_ELEMENT = /^[a-z][\d._a-z]*-[\d\-._a-z]*$/;
+const HEX_CAPTURE = /^([\da-f]{1,6}\s?)/i;
 const HTML_FORM_INPUT = /^(?:(?:inpu|selec)t|textarea)$/;
 const HTML_FORM_PARTS = /^(?:button|fieldset|opt(?:group|ion))$/;
 const HTML_INTERACT = /^d(?:etails|ialog)$/;
 const PSEUDO_FUNC = /^(?:(?:ha|i)s|not|where)$/;
 const PSEUDO_NTH = /^nth-(?:last-)?(?:child|of-type)$/;
+const REPLACE_CHAR = /[\0\uD800-\uDFFF]/g;
+const WHITESPACE = /^[\n\r\f]/;
+
+/**
+ * unescape selector
+ * @param {string} selector - CSS selector
+ * @returns {?string} - unescaped selector
+ */
+const unescapeSelector = (selector = '') => {
+  if (typeof selector === 'string' &&
+      selector.indexOf(String.fromCharCode(0x5c), 0) >= 0) {
+    const arr = selector.split('\\');
+    const l = arr.length;
+    for (let i = 0; i < l; i++) {
+      let item = arr[i];
+      if (i === l - 1 && item === '') {
+        item = '\uFFFD';
+      } else {
+        const hexExists = HEX_CAPTURE.exec(item);
+        if (hexExists) {
+          const [, hex] = hexExists;
+          let str;
+          try {
+            str = String.fromCodePoint(`0x${hex.trim()}`)
+              .replace(REPLACE_CHAR, '\uFFFD');
+          } catch (e) {
+            str = '\uFFFD';
+          }
+          item = item.replace(`${hex}`, str);
+        } else if (WHITESPACE.test(item)) {
+          item = '\\' + item;
+        }
+      }
+      arr[i] = item;
+    }
+    selector = arr.join('');
+  }
+  return selector;
+};
 
 /**
  * collect nth child
@@ -197,11 +235,12 @@ const matchAnPlusB = (nthName, ast = {}, node = {}) => {
         nth: {
           a,
           b,
-          name: identName
+          name: nthIdentName
         },
         selector: astSelector,
         type: astType
       } = ast;
+      const identName = unescapeSelector(nthIdentName);
       const { nodeType } = node;
       if (astType === NTH && nodeType === ELEMENT_NODE) {
         const anbMap = new Map();
@@ -267,7 +306,7 @@ const matchTypeSelector = (ast = {}, node = {}) => {
   const { localName, nodeType, ownerDocument, prefix } = node;
   let res;
   if (astType === TYPE_SELECTOR && nodeType === ELEMENT_NODE) {
-    let astName = ast.name;
+    let astName = unescapeSelector(ast.name);
     let astPrefix, astNodeName, nodePrefix, nodeName;
     if (/\|/.test(astName)) {
       [astPrefix, astNodeName] = astName.split('|');
@@ -304,12 +343,14 @@ const matchTypeSelector = (ast = {}, node = {}) => {
  * @returns {?object} - matched node
  */
 const matchClassSelector = (ast = {}, node = {}) => {
-  const { name: astName, type: astType } = ast;
+  const { type: astType } = ast;
   const { classList, nodeType } = node;
   let res;
-  if (astType === CLASS_SELECTOR && nodeType === ELEMENT_NODE &&
-      classList.contains(astName)) {
-    res = node;
+  if (astType === CLASS_SELECTOR && nodeType === ELEMENT_NODE) {
+    const astName = unescapeSelector(ast.name);
+    if (classList.contains(astName)) {
+      res = node;
+    }
   }
   return res || null;
 };
@@ -321,12 +362,14 @@ const matchClassSelector = (ast = {}, node = {}) => {
  * @returns {?object} - matched node
  */
 const matchIDSelector = (ast = {}, node = {}) => {
-  const { name: astName, type: astType } = ast;
+  const { type: astType } = ast;
   const { id, nodeType } = node;
   let res;
-  if (astType === ID_SELECTOR && nodeType === ELEMENT_NODE &&
-      astName === id) {
-    res = node;
+  if (astType === ID_SELECTOR && nodeType === ELEMENT_NODE) {
+    const astName = unescapeSelector(ast.name);
+    if (astName === id) {
+      res = node;
+    }
   }
   return res || null;
 };
@@ -346,10 +389,15 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
   let res;
   if (astType === ATTRIBUTE_SELECTOR && nodeType === ELEMENT_NODE &&
       attributes?.length) {
-    const { name: astAttrName } = astName;
-    const caseInsensitive = !(astFlags && /^s$/i.test(astFlags));
+    if (typeof astFlags === 'string' && !/^[is]$/i.test(astFlags)) {
+      throw new DOMException('invalid attribute selector', 'SyntaxError');
+    }
+    const caseInsensitive =
+      !(typeof astFlags === 'string' && /^s$/i.test(astFlags));
     const attrValues = [];
     const l = attributes.length;
+    let { name: astAttrName } = astName;
+    astAttrName = unescapeSelector(astAttrName);
     // namespaced
     if (/\|/.test(astAttrName)) {
       const [astAttrPrefix, astAttrLocalName] = astAttrName.split('|');
@@ -512,11 +560,12 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
  * @returns {?object} - matched node
  */
 const matchLanguagePseudoClass = (ast = {}, node = {}) => {
-  const { name: astName, type: astType } = ast;
+  const { type: astType } = ast;
   const { lang, nodeType } = node;
   let res;
   if (astType === IDENTIFIER && nodeType === ELEMENT_NODE) {
-    // TBD: what about deprecated xml:lang?
+    const astName = unescapeSelector(ast.name);
+    // TBD: what about xml:lang?
     if (astName === '') {
       if (node.getAttribute('lang') === '') {
         res = node;
@@ -574,10 +623,11 @@ const matchPseudoClassSelector = (
   node = {},
   refPoint = {}
 ) => {
-  const { children: astChildren, name: astName, type: astType } = ast;
+  const { children: astChildren, type: astType } = ast;
   const { localName, nodeType, ownerDocument, parentNode } = node;
   const matched = [];
   if (astType === PSEUDO_CLASS_SELECTOR && nodeType === ELEMENT_NODE) {
+    const astName = unescapeSelector(ast.name);
     if (Array.isArray(astChildren)) {
       const [astChildAst] = astChildren;
       // :nth-child(), :nth-last-child(), nth-of-type(), :nth-last-of-type()
@@ -601,8 +651,8 @@ const matchPseudoClassSelector = (
           case 'current':
           case 'nth-col':
           case 'nth-last-col':
-            console.warn(`Unsupported pseudo-class ${astName}`);
-            break;
+            throw new DOMException(`Unsupported pseudo-class ${astName}`,
+              'NotSupportedError');
           default:
             throw new DOMException(`Unknown pseudo-class ${astName}`,
               'SyntaxError');
@@ -688,7 +738,7 @@ const matchPseudoClassSelector = (
         case 'disabled':
           if ((HTML_FORM_INPUT.test(localName) ||
                HTML_FORM_PARTS.test(localName) ||
-               HTML_CUSTOM_ELEMENT.test(localName)) &&
+               isCustomElementName(localName)) &&
               node.hasAttribute('disabled')) {
             matched.push(node);
           }
@@ -696,7 +746,7 @@ const matchPseudoClassSelector = (
         case 'enabled':
           if ((HTML_FORM_INPUT.test(localName) ||
                HTML_FORM_PARTS.test(localName) ||
-               HTML_CUSTOM_ELEMENT.test(localName)) &&
+               isCustomElementName(localName)) &&
               !node.hasAttribute('disabled')) {
             matched.push(node);
           }
@@ -731,7 +781,8 @@ const matchPseudoClassSelector = (
             }
             // FIXME:
             if (isMultiple) {
-              console.warn(`Unsupported pseudo-class ${astName}`);
+              throw new DOMException(`Unsupported pseudo-class ${astName}`,
+                'NotSupportedError');
             } else {
               const firstOpt = parentNode.firstElementChild;
               const defaultOpt = [];
@@ -757,7 +808,8 @@ const matchPseudoClassSelector = (
                        node.getAttribute('type') === 'submit')) ||
                      (/^input$/.test(localName) && node.hasAttribute('type') &&
                       /^(?:image|submit)$/.test(node.getAttribute('type')))) {
-            console.warn(`Unsupported pseudo-class ${astName}`);
+            throw new DOMException(`Unsupported pseudo-class ${astName}`,
+              'NotSupportedError');
           }
           break;
         case 'required':
@@ -866,8 +918,8 @@ const matchPseudoClassSelector = (
         case 'user-valid':
         case 'valid':
         case 'volume-locked':
-          console.warn(`Unsupported pseudo-class ${astName}`);
-          break;
+          throw new DOMException(`Unsupported pseudo-class ${astName}`,
+            'NotSupportedError');
         default:
           throw new DOMException(`Unknown pseudo-class ${astName}`,
             'SyntaxError');
@@ -886,17 +938,22 @@ class Matcher {
   #document;
   #node;
   #selector;
+  #warn;
 
   /**
    * construct
    * @param {string} selector - CSS selector
    * @param {object} refPoint - reference point
+   * @param {object} [opt] - options
+   * @param {object} [opt.warn] - console warn
    */
-  constructor(selector, refPoint) {
+  constructor(selector, refPoint, opt = {}) {
+    const { warn } = opt;
     this.#ast = parseSelector(selector);
     this.#document = refPoint?.ownerDocument ?? refPoint;
     this.#node = refPoint;
     this.#selector = selector;
+    this.#warn = !!warn;
   }
 
   /**
@@ -1075,7 +1132,7 @@ class Matcher {
     const ast = walkAST(branch);
     let res;
     if (ast.length) {
-      const { name: branchName } = branch;
+      const branchName = unescapeSelector(branch.name);
       switch (branchName) {
         // :has()
         case 'has': {
@@ -1096,7 +1153,7 @@ class Matcher {
               itemLeaves.push(item, firstItem);
             }
             if (firstItem.type === PSEUDO_CLASS_SELECTOR &&
-                firstItem.name === 'has') {
+                unescapeSelector(firstItem.name) === 'has') {
               matched = false;
               break;
             }
@@ -1122,7 +1179,8 @@ class Matcher {
             const [item, ...items] = astItem;
             // NOTE: according to MDN, :not() can not contain :not()
             // but spec says nothing about that?
-            if (item.type === PSEUDO_CLASS_SELECTOR && item.name === 'not') {
+            if (item.type === PSEUDO_CLASS_SELECTOR &&
+                unescapeSelector(item.name) === 'not') {
               matched = true;
               break;
             }
@@ -1176,7 +1234,7 @@ class Matcher {
     if (Array.isArray(children) && children.length) {
       const [firstChild] = children;
       if (firstChild.type === PSEUDO_CLASS_SELECTOR &&
-          PSEUDO_FUNC.test(firstChild.name) &&
+          PSEUDO_FUNC.test(unescapeSelector(firstChild.name)) &&
           node.nodeType === ELEMENT_NODE) {
         const iteratorLeaf = {
           name: '*',
@@ -1195,7 +1253,7 @@ class Matcher {
         let iteratorLeaf;
         if (firstChild.type === COMBINATOR ||
             (firstChild.type === PSEUDO_CLASS_SELECTOR &&
-             PSEUDO_NTH.test(firstChild.name))) {
+             PSEUDO_NTH.test(unescapeSelector(firstChild.name)))) {
           iteratorLeaf = {
             name: '*',
             type: TYPE_SELECTOR
@@ -1211,7 +1269,8 @@ class Matcher {
             if (items.length) {
               if (items.length === 1) {
                 const item = items.shift();
-                const { name: itemName, type: itemType } = item;
+                const { type: itemType } = item;
+                const itemName = unescapeSelector(item.name);
                 if (itemType === PSEUDO_CLASS_SELECTOR &&
                     PSEUDO_FUNC.test(itemName)) {
                   nextNode = this._matchLogicalPseudoFunc(item, nextNode);
@@ -1228,7 +1287,8 @@ class Matcher {
               } else {
                 do {
                   const item = items.shift();
-                  const { name: itemName, type: itemType } = item;
+                  const { type: itemType } = item;
+                  const itemName = unescapeSelector(item.name);
                   if (itemType === PSEUDO_CLASS_SELECTOR &&
                       PSEUDO_FUNC.test(itemName)) {
                     nextNode = this._matchLogicalPseudoFunc(item, nextNode);
@@ -1239,9 +1299,9 @@ class Matcher {
                       const [nextItem] = items;
                       if (nextItem.type === COMBINATOR ||
                           (nextItem.type === PSEUDO_CLASS_SELECTOR &&
-                           PSEUDO_NTH.test(nextItem.name)) ||
+                           PSEUDO_NTH.test(unescapeSelector(nextItem.name))) ||
                           (nextItem.type === PSEUDO_CLASS_SELECTOR &&
-                           PSEUDO_FUNC.test(nextItem.name))) {
+                           PSEUDO_FUNC.test(unescapeSelector(nextItem.name)))) {
                         break;
                       } else {
                         leaves.push(items.shift());
@@ -1255,7 +1315,7 @@ class Matcher {
                         const [i] = items;
                         for (const j of arr) {
                           if (i.type === PSEUDO_CLASS_SELECTOR &&
-                              PSEUDO_FUNC.test(i.name)) {
+                              PSEUDO_FUNC.test(unescapeSelector(i.name))) {
                             if (this._matchLogicalPseudoFunc(i, j)) {
                               matched.push(j);
                             }
@@ -1321,7 +1381,7 @@ class Matcher {
         }
         break;
       case PSEUDO_CLASS_SELECTOR:
-        if (!PSEUDO_FUNC.test(name)) {
+        if (!PSEUDO_FUNC.test(unescapeSelector(name))) {
           const arr = matchPseudoClassSelector(ast, node, this.#node);
           if (arr.length) {
             matched.push(...arr);
@@ -1343,8 +1403,19 @@ class Matcher {
    * @returns {boolean} - matched node
    */
   matches() {
-    const arr = this._match(this.#ast, this.#document);
-    const res = arr.length && arr.includes(this.#node);
+    let res;
+    try {
+      const arr = this._match(this.#ast, this.#document);
+      res = arr.length && arr.includes(this.#node);
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'NotSupportedError') {
+        if (this.#warn) {
+          console.warn(e.message);
+        }
+      } else {
+        throw e;
+      }
+    }
     return !!res;
   }
 
@@ -1353,15 +1424,25 @@ class Matcher {
    * @returns {?object} - matched node
    */
   closest() {
-    const arr = this._match(this.#ast, this.#document);
-    let node = this.#node;
     let res;
-    while (node) {
-      if (arr.includes(node)) {
-        res = node;
-        break;
+    try {
+      const arr = this._match(this.#ast, this.#document);
+      let node = this.#node;
+      while (node) {
+        if (arr.includes(node)) {
+          res = node;
+          break;
+        }
+        node = node.parentNode;
+      }
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'NotSupportedError') {
+        if (this.#warn) {
+          console.warn(e.message);
+        }
+      } else {
+        throw e;
       }
-      node = node.parentNode;
     }
     return res || null;
   }
@@ -1371,14 +1452,25 @@ class Matcher {
    * @returns {?object} - matched node
    */
   querySelector() {
-    const arr = this._match(this.#ast, this.#node);
-    if (arr.length) {
-      const i = arr.findIndex(node => node === this.#node);
-      if (i >= 0) {
-        arr.splice(i, 1);
+    let res;
+    try {
+      const arr = this._match(this.#ast, this.#node);
+      if (arr.length) {
+        const i = arr.findIndex(node => node === this.#node);
+        if (i >= 0) {
+          arr.splice(i, 1);
+        }
+      }
+      [res] = arr;
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'NotSupportedError') {
+        if (this.#warn) {
+          console.warn(e.message);
+        }
+      } else {
+        throw e;
       }
     }
-    const [res] = arr;
     return res || null;
   }
 
@@ -1388,14 +1480,27 @@ class Matcher {
    * @returns {Array.<object|undefined>} - collection of matched nodes
    */
   querySelectorAll() {
-    const arr = this._match(this.#ast, this.#node);
-    if (arr.length) {
-      const i = arr.findIndex(node => node === this.#node);
-      if (i >= 0) {
-        arr.splice(i, 1);
+    const res = [];
+    try {
+      const arr = this._match(this.#ast, this.#node);
+      if (arr.length) {
+        const i = arr.findIndex(node => node === this.#node);
+        if (i >= 0) {
+          arr.splice(i, 1);
+        }
+      }
+      const a = new Set(arr);
+      res.push(...a);
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'NotSupportedError') {
+        if (this.#warn) {
+          console.warn(e.message);
+        }
+      } else {
+        throw e;
       }
     }
-    return [...new Set(arr)];
+    return res;
   }
 };
 
@@ -1409,5 +1514,6 @@ module.exports = {
   matchIDSelector,
   matchLanguagePseudoClass,
   matchPseudoClassSelector,
-  matchTypeSelector
+  matchTypeSelector,
+  unescapeSelector
 };

package/src/js/parser.js

@@ -5,27 +5,45 @@
 
 /* import */
 const { generate, parse, toPlainObject, walk } = require('css-tree');
-const { SELECTOR } = require('./constant.js');
 const DOMException = require('./domexception.js');
 
 /* constants */
+const { SELECTOR } = require('./constant.js');
 const TYPE_FROM = 8;
 const TYPE_TO = -1;
 
+/**
+ * preprocess
+ * @see https://drafts.csswg.org/css-syntax-3/#input-preprocessing
+ * @param {...*} args - arguments
+ * @returns {string} - filtered selector string
+ */
+const preprocess = (...args) => {
+  if (!args.length) {
+    throw new TypeError('1 argument required, but only 0 present');
+  }
+  let [selector] = args;
+  if (typeof selector !== 'string') {
+    if (selector === undefined || selector === null) {
+      selector = Object.prototype.toString.call(selector)
+        .slice(TYPE_FROM, TYPE_TO).toLowerCase();
+    } else {
+      throw new DOMException(`invalid selector ${selector}`, 'SyntaxError');
+    }
+  }
+  return selector.replace(/\f|\r\n?/g, '\n')
+    .replace(/[\0\uD800-\uDFFF]/g, '\uFFFD').trim();
+};
+
 /**
  * create AST from CSS selector
  * @param {string} selector - CSS selector
  * @returns {object} - AST
  */
 const parseSelector = selector => {
-  if (selector === undefined || selector === null) {
-    selector = Object.prototype.toString.call(selector)
-      .slice(TYPE_FROM, TYPE_TO).toLowerCase();
-  }
+  selector = preprocess(selector);
   // invalid selectors
-  if (typeof selector !== 'string' || selector === '' ||
-      selector.startsWith('>') || selector.endsWith(',') ||
-      selector.includes('= ')) {
+  if (selector === '' || /^\s*>/.test(selector) || /,\s*$/.test(selector)) {
     throw new DOMException(`invalid selector ${selector}`, 'SyntaxError');
   }
   let res;
@@ -70,5 +88,6 @@ const walkAST = (ast = {}) => {
 module.exports = {
   generateCSS: generate,
   parseSelector,
+  preprocess,
   walkAST
 };

package/types/index.d.ts

@@ -1,4 +1,16 @@
-export function closest(selector: string, node: object): object | null;
-export function matches(selector: string, node: object): boolean;
-export function querySelector(selector: string, refPoint: object): object | null;
-export function querySelectorAll(selector: string, refPoint: object): Array<object | undefined>;
+export function closest(selector: string, node: object, opt?: {
+    globalObject?: object;
+    jsdom?: boolean;
+}): object | null;
+export function matches(selector: string, node: object, opt?: {
+    globalObject?: object;
+    jsdom?: boolean;
+}): boolean;
+export function querySelector(selector: string, refPoint: object, opt?: {
+    globalObject?: object;
+    jsdom?: boolean;
+}): object | null;
+export function querySelectorAll(selector: string, refPoint: object, opt?: {
+    globalObject?: object;
+    jsdom?: boolean;
+}): Array<object | undefined>;

package/types/js/matcher.d.ts

@@ -1,5 +1,7 @@
 export class Matcher {
-    constructor(selector: string, refPoint: object);
+    constructor(selector: string, refPoint: object, opt?: {
+        warn?: object;
+    });
     _createIterator(ast?: object, root?: object): object;
     _parseAST(ast: object, node: object): Array<object | undefined>;
     _matchAdjacentLeaves(leaves: Array<object>, node: object): object | null;
@@ -32,3 +34,4 @@ export function matchIDSelector(ast?: object, node?: object): object | null;
 export function matchLanguagePseudoClass(ast?: object, node?: object): object | null;
 export function matchPseudoClassSelector(ast?: object, node?: object, refPoint?: object): Array<object | undefined>;
 export function matchTypeSelector(ast?: object, node?: object): object | null;
+export function unescapeSelector(selector?: string): string | null;

package/types/js/parser.d.ts

@@ -1,4 +1,5 @@
 import { generate } from "css-tree";
 export function parseSelector(selector: string): object;
+export function preprocess(...args: any[]): string;
 export function walkAST(ast?: object): Array<object | undefined>;
 export { generate as generateCSS };