@asamuzakjp/dom-selector 0.13.5 → 0.15.1

package/README.md

@@ -29,52 +29,49 @@ const {
 
 ### matches(selector, node, opt)
 
-matches - [Element.matches()][64]
+matches - same functionality as [Element.matches()][64]
 
 #### Parameters
 
 - `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
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[boolean][61]** result
 
 
 ### closest(selector, node, opt)
 
-closest - [Element.closest()][65]
+closest - same functionality as [Element.closest()][65]
 
 #### Parameters
 
 - `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
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[object][60]?** matched node
 
 
 ### querySelector(selector, refPoint, opt)
 
-querySelector - [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
+querySelector - same functionality as [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
 
 #### Parameters
 
 - `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
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[object][60]?** matched node
 
 
 ### querySelectorAll(selector, refPoint, opt)
 
-querySelectorAll - [Document.querySelectorAll()][69], [Document.querySelectorAll()][70], [Element.querySelectorAll()][71]
+querySelectorAll - same functionality as [Document.querySelectorAll()][69], [Document.querySelectorAll()][70], [Element.querySelectorAll()][71]
 **NOTE**: returns Array, not NodeList
 
 #### Parameters
@@ -82,8 +79,7 @@ querySelectorAll - [Document.querySelectorAll()][69], [Document.querySelectorAll
 - `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
+  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
 
 Returns **[Array][62]<([object][60] \| [undefined][63])>** array of matched nodes
 

package/package.json

@@ -42,5 +42,5 @@
     "test": "c8 --reporter=text mocha --exit test/**/*.test.js",
     "tsc": "npx tsc"
   },
-  "version": "0.13.5"
+  "version": "0.15.1"
 }

package/src/index.js

@@ -14,8 +14,7 @@ const { Matcher } = require('./js/matcher.js');
  * @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
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {boolean} - result
  */
 const matches = (selector, node, opt) => {
@@ -28,8 +27,7 @@ const matches = (selector, node, opt) => {
  * @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
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {?object} - matched node
  */
 const closest = (selector, node, opt) => {
@@ -42,8 +40,7 @@ const closest = (selector, node, opt) => {
  * @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
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {?object} - matched node
  */
 const querySelector = (selector, refPoint, opt) => {
@@ -57,8 +54,7 @@ const querySelector = (selector, refPoint, opt) => {
  * @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
+ * @param {object} [opt.warn] - console warn e.g. unsupported pseudo-class
  * @returns {Array.<object|undefined>} - array of matched nodes
  */
 const querySelectorAll = (selector, refPoint, opt) => {

package/src/js/matcher.js

@@ -85,6 +85,27 @@ const isNamespaceDeclared = (ns = '', node = {}) => {
   return !!res;
 };
 
+/**
+ * is node attached to owner document
+ * @param {object} node - Element node
+ * @returns {boolean} - result
+ */
+const isAttached = (node = {}) => {
+  const { nodeType, ownerDocument } = node;
+  let res;
+  if (nodeType === ELEMENT_NODE && ownerDocument) {
+    const root = ownerDocument.documentElement;
+    if (node === root) {
+      res = true;
+    } else {
+      const posBit =
+        node.compareDocumentPosition(root) & DOCUMENT_POSITION_CONTAINS;
+      res = posBit;
+    }
+  }
+  return !!res;
+};
+
 /**
  * unescape selector
  * @param {string} selector - CSS selector
@@ -211,7 +232,8 @@ const collectNthChild = (anb = {}, node = {}) => {
   const { a, b, reverse, selector } = anb;
   const { nodeType, parentNode } = node;
   const matched = [];
-  if (Number.isInteger(a) && Number.isInteger(b) && nodeType === ELEMENT_NODE) {
+  if (Number.isInteger(a) && Number.isInteger(b) &&
+      nodeType === ELEMENT_NODE && parentNode) {
     const arr = [...parentNode.children];
     if (reverse) {
       arr.reverse();
@@ -293,7 +315,8 @@ const collectNthOfType = (anb = {}, node = {}) => {
   const { a, b, reverse } = anb;
   const { localName, nodeType, parentNode, prefix } = node;
   const matched = [];
-  if (Number.isInteger(a) && Number.isInteger(b) && nodeType === ELEMENT_NODE) {
+  if (Number.isInteger(a) && Number.isInteger(b) &&
+      nodeType === ELEMENT_NODE && parentNode) {
     const arr = [...parentNode.children];
     if (reverse) {
       arr.reverse();
@@ -357,67 +380,66 @@ const collectNthOfType = (anb = {}, node = {}) => {
  * @param {object} node - Element node
  * @returns {Array.<object|undefined>} - collection of matched nodes
  */
-const matchAnPlusB = (nthName, ast = {}, node = {}) => {
+const matchAnPlusB = (nthName, ast = { nth: {} }, node = {}) => {
+  const {
+    nth: {
+      a,
+      b,
+      name: nthIdentName
+    },
+    selector: astSelector,
+    type: astType
+  } = ast;
+  const identName = unescapeSelector(nthIdentName);
+  const { nodeType, parentNode } = node;
   const matched = [];
-  if (typeof nthName === 'string') {
+  if (typeof nthName === 'string' && astType === NTH &&
+      nodeType === ELEMENT_NODE && parentNode) {
     nthName = nthName.trim();
     if (PSEUDO_NTH.test(nthName)) {
-      const {
-        nth: {
-          a,
-          b,
-          name: nthIdentName
-        },
-        selector: astSelector,
-        type: astType
-      } = ast;
-      const identName = unescapeSelector(nthIdentName);
-      const { nodeType, parentNode } = node;
-      if (astType === NTH && nodeType === ELEMENT_NODE && parentNode) {
-        const anbMap = new Map();
-        if (identName) {
-          if (identName === 'even') {
-            anbMap.set('a', 2);
-            anbMap.set('b', 0);
-          } else if (identName === 'odd') {
-            anbMap.set('a', 2);
-            anbMap.set('b', 1);
-          }
-          if (/last/.test(nthName)) {
-            anbMap.set('reverse', true);
-          }
+      const anbMap = new Map();
+      if (identName) {
+        if (identName === 'even') {
+          anbMap.set('a', 2);
+          anbMap.set('b', 0);
+        } else if (identName === 'odd') {
+          anbMap.set('a', 2);
+          anbMap.set('b', 1);
+        }
+        if (/last/.test(nthName)) {
+          anbMap.set('reverse', true);
+        }
+      } else {
+        if (typeof a === 'string' && /-?\d+/.test(a)) {
+          anbMap.set('a', a * 1);
         } else {
-          if (typeof a === 'string' && /-?\d+/.test(a)) {
-            anbMap.set('a', a * 1);
-          } else {
-            anbMap.set('a', 0);
-          }
-          if (typeof b === 'string' && /-?\d+/.test(b)) {
-            anbMap.set('b', b * 1);
-          } else {
-            anbMap.set('b', 0);
+          anbMap.set('a', 0);
+        }
+        if (typeof b === 'string' && /-?\d+/.test(b)) {
+          anbMap.set('b', b * 1);
+        } else {
+          anbMap.set('b', 0);
+        }
+        if (/last/.test(nthName)) {
+          anbMap.set('reverse', true);
+        }
+      }
+      if (anbMap.has('a') && anbMap.has('b')) {
+        if (/^nth-(?:last-)?child$/.test(nthName)) {
+          if (astSelector) {
+            const css = generateCSS(astSelector);
+            anbMap.set('selector', css);
           }
-          if (/last/.test(nthName)) {
-            anbMap.set('reverse', true);
+          const anb = Object.fromEntries(anbMap);
+          const arr = collectNthChild(anb, node);
+          if (arr.length) {
+            matched.push(...arr);
           }
-        }
-        if (anbMap.has('a') && anbMap.has('b')) {
-          if (/^nth-(?:last-)?child$/.test(nthName)) {
-            if (astSelector) {
-              const css = generateCSS(astSelector);
-              anbMap.set('selector', css);
-            }
-            const anb = Object.fromEntries(anbMap);
-            const arr = collectNthChild(anb, node);
-            if (arr.length) {
-              matched.push(...arr);
-            }
-          } else if (/^nth-(?:last-)?of-type$/.test(nthName)) {
-            const anb = Object.fromEntries(anbMap);
-            const arr = collectNthOfType(anb, node);
-            if (arr.length) {
-              matched.push(...arr);
-            }
+        } else if (/^nth-(?:last-)?of-type$/.test(nthName)) {
+          const anb = Object.fromEntries(anbMap);
+          const arr = collectNthOfType(anb, node);
+          if (arr.length) {
+            matched.push(...arr);
           }
         }
       }
@@ -600,7 +622,7 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
       while (i < l) {
         const { name: itemName, value: itemValue } = attributes.item(i);
         switch (astAttrPrefix) {
-          case '':
+          case '': {
             if (astAttrLocalName === itemName) {
               if (caseInsensitive) {
                 attrValues.push(itemValue.toLowerCase());
@@ -609,7 +631,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
               }
             }
             break;
-          case '*':
+          }
+          case '*': {
             if (/:/.test(itemName)) {
               if (itemName.endsWith(`:${astAttrLocalName}`)) {
                 if (caseInsensitive) {
@@ -626,7 +649,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
               }
             }
             break;
-          default:
+          }
+          default: {
             if (/:/.test(itemName)) {
               const [itemNamePrefix, itemNameLocalName] = itemName.split(':');
               if (astAttrPrefix === itemNamePrefix &&
@@ -638,6 +662,7 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
                 }
               }
             }
+          }
         }
         i++;
       }
@@ -685,15 +710,17 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
         attrValue = astAttrStringValue;
       }
       switch (astMatcher) {
-        case null:
+        case null: {
           res = node;
           break;
-        case '=':
+        }
+        case '=': {
           if (typeof attrValue === 'string' && attrValues.includes(attrValue)) {
             res = node;
           }
           break;
-        case '~=':
+        }
+        case '~=': {
           if (typeof attrValue === 'string') {
             for (const item of attrValues) {
               const arr = item.split(/\s+/);
@@ -704,7 +731,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
             }
           }
           break;
-        case '|=':
+        }
+        case '|=': {
           if (typeof attrValue === 'string') {
             const item = attrValues.find(v =>
               (v === attrValue || v.startsWith(`${attrValue}-`))
@@ -714,7 +742,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
             }
           }
           break;
-        case '^=':
+        }
+        case '^=': {
           if (typeof attrValue === 'string') {
             const item = attrValues.find(v => v.startsWith(`${attrValue}`));
             if (item) {
@@ -722,7 +751,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
             }
           }
           break;
-        case '$=':
+        }
+        case '$=': {
           if (typeof attrValue === 'string') {
             const item = attrValues.find(v => v.endsWith(`${attrValue}`));
             if (item) {
@@ -730,7 +760,8 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
             }
           }
           break;
-        case '*=':
+        }
+        case '*=': {
           if (typeof attrValue === 'string') {
             const item = attrValues.find(v => v.includes(`${attrValue}`));
             if (item) {
@@ -738,9 +769,11 @@ const matchAttributeSelector = (ast = {}, node = {}) => {
             }
           }
           break;
-        default:
+        }
+        default: {
           throw new DOMException(`Unknown matcher ${astMatcher}`,
             'SyntaxError');
+        }
       }
     }
   }
@@ -876,7 +909,7 @@ const matchDirectionPseudoClass = (ast = {}, node = {}) => {
   const { type: astType } = ast;
   const { dir: nodeDir, localName, nodeType, type: inputType } = node;
   let res;
-  if (astType === IDENTIFIER && nodeType === ELEMENT_NODE) {
+  if (astType === IDENTIFIER && nodeType === ELEMENT_NODE && isAttached(node)) {
     const astName = unescapeSelector(ast.name);
     let dir;
     if (/^(?:ltr|rtl)$/.test(nodeDir)) {
@@ -1407,47 +1440,54 @@ const matchPseudoClassSelector = (
           break;
         }
         case 'first-of-type': {
-          const [node1] = collectNthOfType({
-            a: 0,
-            b: 1
-          }, node);
-          if (node1) {
-            matched.push(node1);
+          if (parentNode) {
+            const [node1] = collectNthOfType({
+              a: 0,
+              b: 1
+            }, node);
+            if (node1) {
+              matched.push(node1);
+            }
           }
           break;
         }
         case 'last-of-type': {
-          const [node1] = collectNthOfType({
-            a: 0,
-            b: 1,
-            reverse: true
-          }, node);
-          if (node1) {
-            matched.push(node1);
+          if (parentNode) {
+            const [node1] = collectNthOfType({
+              a: 0,
+              b: 1,
+              reverse: true
+            }, node);
+            if (node1) {
+              matched.push(node1);
+            }
           }
           break;
         }
         case 'only-of-type': {
-          const [node1] = collectNthOfType({
-            a: 0,
-            b: 1
-          }, node);
-          const [node2] = collectNthOfType({
-            a: 0,
-            b: 1,
-            reverse: true
-          }, node);
-          if (node1 === node && node2 === node) {
-            matched.push(node);
+          if (parentNode) {
+            const [node1] = collectNthOfType({
+              a: 0,
+              b: 1
+            }, node);
+            const [node2] = collectNthOfType({
+              a: 0,
+              b: 1,
+              reverse: true
+            }, node);
+            if (node1 === node && node2 === node) {
+              matched.push(node);
+            }
           }
           break;
         }
-        // legacy pseudo-elements
         case 'after':
         case 'before':
         case 'first-letter':
-        case 'first-line':
+        case 'first-line': {
+          // legacy pseudo-elements
           break;
+        }
         case 'active':
         case 'autofill':
         case 'blank':
@@ -1508,12 +1548,14 @@ const matchPseudoElementSelector = (ast = {}, node = {}) => {
       case 'placeholder':
       case 'selection':
       case 'slotted':
-      case 'target-text':
+      case 'target-text': {
         throw new DOMException(`Unsupported pseudo-element ${astName}`,
           'NotSupportedError');
-      default:
+      }
+      default: {
         throw new DOMException(`Unknown pseudo-element ${astName}`,
           'SyntaxError');
+      }
     }
   }
 };
@@ -1543,17 +1585,6 @@ class Matcher {
     this.#warn = !!warn;
   }
 
-  /**
-   * node is attached to document or detached
-   * @returns {boolean} - result
-   */
-  _isAttached() {
-    const root = this.#document.documentElement;
-    const posBit =
-      this.#node.compareDocumentPosition(root) & DOCUMENT_POSITION_CONTAINS;
-    return !!posBit;
-  };
-
   /**
    * match AST and node
    * @param {object} ast - AST
@@ -1684,7 +1715,7 @@ class Matcher {
     let res;
     try {
       let node;
-      if (this._isAttached()) {
+      if (isAttached(this.#node)) {
         node = this.#document;
       } else {
         node = this.#node;
@@ -1800,6 +1831,7 @@ module.exports = {
   collectNthOfType,
   createSelectorForNode,
   groupASTLeaves,
+  isAttached,
   isContentEditable,
   isNamespaceDeclared,
   matchAnPlusB,

package/src/js/parser.js

@@ -4,17 +4,20 @@
 'use strict';
 
 /* import */
-const { generate, parse, toPlainObject, walk } = require('css-tree');
+const { generate, findAll, parse, toPlainObject, walk } = require('css-tree');
 const DOMException = require('./domexception.js');
 
 /* constants */
-const { SELECTOR } = require('./constant.js');
+const { PSEUDO_CLASS_SELECTOR, SELECTOR } = require('./constant.js');
 const CODE_POINT_UNIT = parseInt('10000', 16);
 const HEX = 16;
 const PAIR = 2;
 const TYPE_FROM = 8;
 const TYPE_TO = -1;
 
+/* regexp */
+const PSEUDO_FUNC = /^(?:(?:ha|i)s|not|where)$/;
+
 /**
  * preprocess
  * @see https://drafts.csswg.org/css-syntax-3/#input-preprocessing
@@ -94,20 +97,34 @@ const parseSelector = selector => {
 const walkAST = (ast = {}) => {
   const selectors = new Set();
   const opt = {
+    visit: SELECTOR,
     enter: branch => {
-      if (branch.type === SELECTOR) {
-        selectors.add(branch.children);
-      }
-    },
-    leave: branch => {
-      let skip;
-      if (branch.type === SELECTOR) {
-        skip = walkAST.skip;
-      }
-      return skip;
+      selectors.add(branch.children);
     }
   };
   walk(ast, opt);
+  findAll(ast, (node, item, list) => {
+    if (node.type === PSEUDO_CLASS_SELECTOR && PSEUDO_FUNC.test(node.name) &&
+        item) {
+      for (const i of list) {
+        const { children, name, type } = i;
+        if (type === PSEUDO_CLASS_SELECTOR && PSEUDO_FUNC.test(name) &&
+            children) {
+          // SelectorList
+          for (const j of children) {
+            const { children: grandChildren } = j;
+            // Selector
+            for (const k of grandChildren) {
+              const { children: greatGrandChildren } = k;
+              if (selectors.has(greatGrandChildren)) {
+                selectors.delete(greatGrandChildren);
+              }
+            }
+          }
+        }
+      }
+    }
+  });
   return [...selectors];
 };
 

package/types/js/matcher.d.ts

@@ -2,7 +2,6 @@ export class Matcher {
     constructor(selector: string, refPoint: object, opt?: {
         warn?: object;
     });
-    _isAttached(): boolean;
     _match(ast: object, node: object): Array<object | undefined>;
     _getMatchedNodes(branch?: Array<object>, node?: object): Array<object | undefined>;
     _find(ast: object, node: object): Array<object | undefined>;
@@ -25,6 +24,7 @@ export function collectNthOfType(anb?: {
 }, node?: object): Array<object | undefined>;
 export function createSelectorForNode(node?: object): string | null;
 export function groupASTLeaves(branch?: Array<object>): Array<object>;
+export function isAttached(node?: object): boolean;
 export function isContentEditable(node?: object): boolean;
 export function isNamespaceDeclared(ns?: string, node?: object): boolean;
 export function matchAnPlusB(nthName: string, ast?: object, node?: object): Array<object | undefined>;