`:not()` selector no longer supported with multiple matches

[MaikuMori]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

5.0.4

Link to runnable example

https://codesandbox.io/p/sandbox/peaceful-rumple-nnr5qz?file=%2Findex.js&selection=%5B%7B%22endColumn%22%3A7%2C%22endLineNumber%22%3A24%2C%22startColumn%22%3A7%2C%22startLineNumber%22%3A24%7D%5D

Steps to reproduce

import { selectAll } from "hast-util-select";
import { s } from "hastscript";
const tree = s("svg", [
  s("circle", { fill: "#333" }),
  s("circle", { fill: "none" }),
  s("circle", { fill: "none" }),
  s("circle"),
  s("rect", { fill: "#666666" }),
  s("rect", { fill: "none" }),
  s("rect", { fill: "none" }),
  s("rect", { fill: "none" }),
  s("rect"),
]);

const result = selectAll("circle:not([fill]), rect:not([fill])", tree);

// Should select just 1 circle, 1 rect.
console.log(result);

// But we get:

// [
//   { type: 'element', tagName: 'circle', properties: {}, children: [] },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: '#666666' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   {
//     type: 'element',
//     tagName: 'rect',
//     properties: { fill: 'none' },
//     children: []
//   },
//   { type: 'element', tagName: 'rect', properties: {}, children: [] }
// ]

Expected behavior

It should just 1 circle and 1 rect.

Actual behavior

It selects a bunch of elements that don't match the query.

Affected runtime and version

node@16.17.0, node@19.4.0

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response

[wooorm]

Adding ids to make it easier:

const tree = s('svg', [
  s('circle#a', {fill: '#333'}),
  s('circle#b', {fill: 'none'}),
  s('circle#c', {fill: 'none'}),
  s('circle#d'),
  s('rect#e', {fill: '#666666'}),
  s('rect#f', {fill: 'none'}),
  s('rect#g', {fill: 'none'}),
  s('rect#h', {fill: 'none'}),
  s('rect#i')
])

const result = selectAll('circle:not([fill]), rect:not([fill])', tree).map(
  (d) => d.properties.id
)

Yields:

[ 'd', 'e', 'f', 'g', 'h', 'i' ]

So what’s unique about d (or the one before it)?
That’s the one that matches first.
So it seems every sibling (?) after it matches.

[wooorm]

Thanks, found it! https://github.com/syntax-tree/hast-util-select/releases/tag/5.0.5

[MaikuMori]

Thanks for the quick fix, we have a long automatically crafted selector and needless to say this created some interesting results :D