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:

* no longer supports whitespace only, either pass an empty string or an actual
  selector
* change to remove invalid attribute selectors such as `[a=b,c]`, use `[a="b,c"]` instead

Author: wooorm

lib/index.js

@@ -1,7 +1,6 @@
 /**
- * @typedef {import('css-selector-parser').RuleAttr} RuleAttr
- * @typedef {import('css-selector-parser').RulePseudo} RulePseudo
- * @typedef {import('css-selector-parser').Rule} Rule
+ * @typedef {import('css-selector-parser').AstAttribute} AstAttribute
+ * @typedef {import('css-selector-parser').AstRule} AstRule
  *
  * @typedef {import('hast').Element} HastElement
  * @typedef {import('hast').Properties} HastProperties
@@ -23,14 +22,11 @@
  *   Current space.
  */
 
+import {ok as assert} from 'devlop'
 import {h, s} from 'hastscript'
-import {CssSelectorParser} from 'css-selector-parser'
+import {createParser} from 'css-selector-parser'
 
-const parser = new CssSelectorParser()
-
-parser.registerNestingOperators('>', '+', '~')
-// Register these so we can throw nicer errors.
-parser.registerAttrEqualityMods('~', '|', '^', '$', '*')
+const cssSelectorParse = createParser({syntax: 'selectors-4'})
 
 // To do: remove `space` shortcut.
 /**
@@ -52,34 +48,35 @@ export function fromSelector(selector, space) {
       'html'
   }
 
-  const query = parser.parse(selector || '')
+  const query = cssSelectorParse(selector || '*')
 
-  if (query && query.type === 'selectors') {
+  if (query.rules.length > 1) {
     throw new Error('Cannot handle selector list')
   }
 
-  const result = query ? rule(query.rule, state) : []
+  const head = query.rules[0]
+  assert(head, 'expected rule')
 
   if (
-    query &&
-    query.rule.rule &&
-    (query.rule.rule.nestingOperator === '+' ||
-      query.rule.rule.nestingOperator === '~')
+    head.nestedRule &&
+    (head.nestedRule.combinator === '+' || head.nestedRule.combinator === '~')
   ) {
     throw new Error(
       'Cannot handle sibling combinator `' +
-        query.rule.rule.nestingOperator +
+        head.nestedRule.combinator +
         '` at root'
     )
   }
 
-  return result[0] || build(state.space)('')
+  const result = rule(head, state)
+
+  return result[0]
 }
 
 /**
  * Turn a rule into one or more elements.
  *
- * @param {Rule} query
+ * @param {AstRule} query
  *   Selector.
  * @param {State} state
  *   Info on current context.
@@ -88,82 +85,90 @@ export function fromSelector(selector, space) {
  */
 function rule(query, state) {
   const space =
-    state.space === 'html' && query.tagName === 'svg' ? 'svg' : state.space
+    state.space === 'html' &&
+    query.tag &&
+    query.tag.type === 'TagName' &&
+    query.tag.name === 'svg'
+      ? 'svg'
+      : state.space
+
+  const pseudoClass = query.pseudoClasses ? query.pseudoClasses[0] : undefined
+
+  if (pseudoClass) {
+    if (pseudoClass.name) {
+      throw new Error('Cannot handle pseudo class `' + pseudoClass.name + '`')
+      /* c8 ignore next 4 -- types say this can occur, but I don’t understand how */
+    }
+
+    throw new Error('Cannot handle empty pseudo class')
+  }
 
-  checkPseudos(query.pseudos || [])
+  if (query.pseudoElement) {
+    throw new Error(
+      'Cannot handle pseudo element `' + query.pseudoElement + '`'
+    )
+  }
 
-  const node = build(space)(query.tagName === '*' ? '' : query.tagName || '', {
-    id: query.id,
+  const name = query.tag && query.tag.type === 'TagName' ? query.tag.name : ''
+
+  const node = build(space)(name, {
+    id: query.ids ? query.ids[query.ids.length - 1] : undefined,
     className: query.classNames,
-    ...attrsToHast(query.attrs || [])
+    ...attributesToHast(query.attributes)
   })
   const results = [node]
 
-  if (query.rule) {
+  if (query.nestedRule) {
     // Sibling.
     if (
-      query.rule.nestingOperator === '+' ||
-      query.rule.nestingOperator === '~'
+      query.nestedRule.combinator === '+' ||
+      query.nestedRule.combinator === '~'
     ) {
-      results.push(...rule(query.rule, state))
+      results.push(...rule(query.nestedRule, state))
     }
     // Descendant.
     else {
-      node.children.push(...rule(query.rule, {space}))
+      node.children.push(...rule(query.nestedRule, {space}))
     }
   }
 
   return results
 }
 
-/**
- * Check pseudo selectors.
- *
- * @param {Array<RulePseudo>} pseudos
- *   Pseudo selectors.
- * @returns {void}
- *   Nothing.
- * @throws {Error}
- *   When a pseudo is defined.
- */
-function checkPseudos(pseudos) {
-  const pseudo = pseudos[0]
-
-  if (pseudo) {
-    if (pseudo.name) {
-      throw new Error('Cannot handle pseudo-selector `' + pseudo.name + '`')
-    }
-
-    throw new Error('Cannot handle pseudo-element or empty pseudo-class')
-  }
-}
-
 /**
  * Turn attribute selectors into properties.
  *
- * @param {Array<RuleAttr>} attrs
+ * @param {Array<AstAttribute> | undefined} attributes
  *   Attribute selectors.
  * @returns {HastProperties}
  *   Properties.
  */
-function attrsToHast(attrs) {
+function attributesToHast(attributes) {
   /** @type {HastProperties} */
   const props = {}
   let index = -1
 
-  while (++index < attrs.length) {
-    const attr = attrs[index]
-
-    if ('operator' in attr) {
-      if (attr.operator === '=') {
-        props[attr.name] = attr.value
+  if (attributes) {
+    while (++index < attributes.length) {
+      const attr = attributes[index]
+
+      if ('operator' in attr) {
+        if (attr.operator === '=') {
+          const value = attr.value
+
+          // eslint-disable-next-line max-depth
+          if (value) {
+            assert(value.type === 'String', 'substitution are not enabled')
+            props[attr.name] = value.value
+          }
+        } else {
+          throw new Error(
+            'Cannot handle attribute equality modifier `' + attr.operator + '`'
+          )
+        }
       } else {
-        throw new Error(
-          'Cannot handle attribute equality modifier `' + attr.operator + '`'
-        )
+        props[attr.name] = true
       }
-    } else {
-      props[attr.name] = true
     }
   }
 

package.json

@@ -37,7 +37,8 @@
   ],
   "dependencies": {
     "@types/hast": "^3.0.0",
-    "css-selector-parser": "^1.0.0",
+    "css-selector-parser": "^2.0.0",
+    "devlop": "^1.0.0",
     "hastscript": "^8.0.0"
   },
   "devDependencies": {
@@ -68,7 +69,10 @@
     "trailingComma": "none"
   },
   "xo": {
-    "prettier": true
+    "prettier": true,
+    "rules": {
+      "unicorn/prefer-at": "off"
+    }
   },
   "remarkConfig": {
     "plugins": [

test.js

@@ -15,77 +15,77 @@ test('fromSelector()', () => {
     () => {
       fromSelector('@supports (transform-origin: 5% 5%) {}')
     },
-    /Error: Rule expected but "@" found/,
+    /Expected rule but "@" found/,
     'should throw w/ invalid selector'
   )
 
   assert.throws(
     () => {
       fromSelector('a, b')
     },
-    /Error: Cannot handle selector list/,
+    /Cannot handle selector list/,
     'should throw w/ multiple selector'
   )
 
   assert.throws(
     () => {
       fromSelector('a + b')
     },
-    /Error: Cannot handle sibling combinator `\+` at root/,
+    /Cannot handle sibling combinator `\+` at root/,
     'should throw w/ next-sibling combinator at root'
   )
 
   assert.throws(
     () => {
       fromSelector('a ~ b')
     },
-    /Error: Cannot handle sibling combinator `~` at root/,
+    /Cannot handle sibling combinator `~` at root/,
     'should throw w/ subsequent-sibling combinator at root'
   )
 
   assert.throws(
     () => {
       fromSelector('[foo%=bar]')
     },
-    /Error: Expected "=" but "%" found./,
+    /Expected a valid attribute selector operator/,
     'should throw w/ attribute modifiers'
   )
 
   assert.throws(
     () => {
       fromSelector('[foo~=bar]')
     },
-    /Error: Cannot handle attribute equality modifier `~=`/,
+    /Cannot handle attribute equality modifier `~=`/,
     'should throw w/ attribute modifiers'
   )
 
   assert.throws(
     () => {
       fromSelector(':active')
     },
-    /Error: Cannot handle pseudo-selector `active`/,
+    /Cannot handle pseudo class `active`/,
     'should throw on pseudo classes'
   )
 
   assert.throws(
     () => {
       fromSelector(':nth-foo(2n+1)')
     },
-    /Error: Cannot handle pseudo-selector `nth-foo`/,
+    /Unknown pseudo-class/,
     'should throw on pseudo class “functions”'
   )
 
   assert.throws(
     () => {
       fromSelector('::before')
     },
-    /Error: Cannot handle pseudo-element or empty pseudo-class/,
+    /Cannot handle pseudo element `before`/,
     'should throw on invalid pseudo elements'
   )
 
   assert.deepEqual(fromSelector(), h(''), 'should support no selector')
   assert.deepEqual(fromSelector(''), h(''), 'should support the empty string')
-  assert.deepEqual(fromSelector(' '), h(''), 'should support whitespace only')
+
   assert.deepEqual(
     fromSelector('*'),
     h(''),
@@ -184,7 +184,7 @@ test('fromSelector()', () => {
 
   assert.deepEqual(
     fromSelector(
-      'p svg[viewbox=0 0 10 10] circle[cx=10][cy=10][r=10] altGlyph'
+      'p svg[viewbox="0 0 10 10"] circle[cx=10][cy=10][r=10] altGlyph'
     ),
     h('p', [
       s('svg', {viewBox: '0 0 10 10'}, [