Update to match CSS selectors 4

This commit updates `css-selector-parser`, which is completely different.
You’ll get some different errors if you do weird things.

Otherwise, this changes:

* change to throw on empty selector
* change to on invalid attribute selectors such as `[a=b,c]`, use `[a="b,c"]` instead
* remove `any`, `matches`: use `:is()` instead

Author: wooorm

index.js

@@ -2,12 +2,15 @@
  * @typedef {import('unist').Position} Position
  * @typedef {import('unist').Node} Node
  * @typedef {import('./lib/types.js').SelectState} SelectState
+ */
+
+/**
  * @typedef {Record<string, unknown> & {type: string, position?: Position | undefined}} NodeLike
  */
 
-import {queryToSelectors, walk} from './lib/walk.js'
 import {parse} from './lib/parse.js'
 import {parent} from './lib/util.js'
+import {walk} from './lib/walk.js'
 
 /**
  * Check that the given `node` matches `selector`.
@@ -85,7 +88,7 @@ export function selectAll(selector, tree) {
 function createState(selector, tree) {
   return {
     // State of the query.
-    rootQuery: queryToSelectors(parse(selector)),
+    rootQuery: parse(selector),
     results: [],
     scopeNodes: tree
       ? parent(tree) &&

lib/attribute.js

@@ -1,12 +1,13 @@
 /**
- * @typedef {import('./types.js').Rule} Rule
- * @typedef {import('./types.js').RuleAttr} RuleAttr
+ * @typedef {import('css-selector-parser').AstAttribute} AstAttribute
+ * @typedef {import('css-selector-parser').AstRule} AstRule
  * @typedef {import('./types.js').Node} Node
  */
 
+import {unreachable} from 'devlop'
 import {zwitch} from 'zwitch'
 
-/** @type {(query: RuleAttr, node: Node) => boolean} */
+/** @type {(query: AstAttribute, node: Node) => boolean} */
 const handle = zwitch('operator', {
   unknown: unknownOperator,
   // @ts-expect-error: hush.
@@ -21,15 +22,17 @@ const handle = zwitch('operator', {
 })
 
 /**
- * @param {Rule} query
+ * @param {AstRule} query
  * @param {Node} node
  * @returns {boolean}
  */
 export function attribute(query, node) {
   let index = -1
 
-  while (++index < query.attrs.length) {
-    if (!handle(query.attrs[index], node)) return false
+  if (query.attributes) {
+    while (++index < query.attributes.length) {
+      if (!handle(query.attributes[index], node)) return false
+    }
   }
 
   return true
@@ -40,7 +43,7 @@ export function attribute(query, node) {
  *
  * `[attr]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
@@ -54,13 +57,15 @@ function exists(query, node) {
  *
  * `[attr=value]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
 function exact(query, node) {
+  const queryValue = attributeValue(query)
+
   // @ts-expect-error: Looks like a record.
-  return exists(query, node) && String(node[query.name]) === query.value
+  return exists(query, node) && String(node[query.name]) === queryValue
 }
 
 /**
@@ -71,7 +76,7 @@ function exact(query, node) {
  *
  * `[attr~=value]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
@@ -82,36 +87,39 @@ function containsArray(query, node) {
 
   if (value === null || value === undefined) return false
 
-  // If this is an array, and the query is contained in it, return true.
+  const queryValue = attributeValue(query)
+
+  // If this is an array, and the query is contained in it, return `true`.
   // Coverage comment in place because TS turns `Array.isArray(unknown)`
   // into `Array<any>` instead of `Array<unknown>`.
   // type-coverage:ignore-next-line
-  if (Array.isArray(value) && value.includes(query.value)) {
+  if (Array.isArray(value) && value.includes(queryValue)) {
     return true
   }
 
   // For all other values, return whether this is an exact match.
-  return String(value) === query.value
+  return String(value) === queryValue
 }
 
 /**
  * Check whether an attribute has a substring as its start.
  *
  * `[attr^=value]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
 function begins(query, node) {
   /** @type {unknown} */
   // @ts-expect-error: Looks like a record.
   const value = node[query.name]
+  const queryValue = attributeValue(query)
 
   return Boolean(
     query.value &&
       typeof value === 'string' &&
-      value.slice(0, query.value.length) === query.value
+      value.slice(0, queryValue.length) === queryValue
   )
 }
 
@@ -120,19 +128,20 @@ function begins(query, node) {
  *
  * `[attr$=value]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
 function ends(query, node) {
   /** @type {unknown} */
   // @ts-expect-error: Looks like a record.
   const value = node[query.name]
+  const queryValue = attributeValue(query)
 
   return Boolean(
     query.value &&
       typeof value === 'string' &&
-      value.slice(-query.value.length) === query.value
+      value.slice(-queryValue.length) === queryValue
   )
 }
 
@@ -141,16 +150,18 @@ function ends(query, node) {
  *
  * `[attr*=value]`
  *
- * @param {RuleAttr} query
+ * @param {AstAttribute} query
  * @param {Node} node
  * @returns {boolean}
  */
 function containsString(query, node) {
   /** @type {unknown} */
   // @ts-expect-error: Looks like a record.
   const value = node[query.name]
+  const queryValue = attributeValue(query)
+
   return Boolean(
-    query.value && typeof value === 'string' && value.includes(query.value)
+    typeof value === 'string' && queryValue && value.includes(queryValue)
   )
 }
 
@@ -164,3 +175,19 @@ function unknownOperator(query) {
   // @ts-expect-error: `operator` guaranteed.
   throw new Error('Unknown operator `' + query.operator + '`')
 }
+
+/**
+ * @param {AstAttribute} query
+ * @returns {string}
+ */
+function attributeValue(query) {
+  const queryValue = query.value
+
+  /* c8 ignore next 4 -- never happens with our config */
+  if (!queryValue) unreachable('Attribute values should be defined')
+  if (queryValue.type === 'Substitution') {
+    unreachable('Substitutions are not enabled')
+  }
+
+  return queryValue.value
+}

lib/name.js

@@ -1,24 +1,26 @@
 /**
- * @typedef {import('./types.js').Selectors} Selectors
- * @typedef {import('./types.js').RuleSet} RuleSet
+ * @typedef {import('css-selector-parser').AstSelector} AstSelector
  */
 
-import {CssSelectorParser} from 'css-selector-parser'
+import {createParser} from 'css-selector-parser'
 
-const parser = new CssSelectorParser()
+const cssSelectorParse = createParser({syntax: 'selectors-4'})
 
-parser.registerAttrEqualityMods('~', '^', '$', '*')
-parser.registerSelectorPseudos('any', 'matches', 'not', 'has')
-parser.registerNestingOperators('>', '+', '~')
+// .
+// const parser = new CssSelectorParser()
+
+// parser.registerAttrEqualityMods('~', '^', '$', '*')
+// parser.registerSelectorPseudos('any', 'matches', 'not', 'has')
+// parser.registerNestingOperators('>', '+', '~')
 
 /**
  * @param {string} selector
- * @returns {Selectors | RuleSet | null}
+ * @returns {AstSelector}
  */
 export function parse(selector) {
   if (typeof selector !== 'string') {
     throw new TypeError('Expected `string` as selector, not `' + selector + '`')
   }
 
-  return parser.parse(selector)
+  return cssSelectorParse(selector)
 }