fb55 / fb55/css-select

Nesting selector support

Open
#1,838 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
634
Forks
77
Avg merge
1m
Merged PRs (30d)
19

Description

Hi, in a browser you can use the & selector to write a query relative to the node in question:

let temp0 = document.querySelector(".someClass");
temp0.querySelectorAll("& > ul > li"); // matches only direct descendants of the .someClass node

... but it seems like css-select does not support this:

let machineSection = select(root, "li:has(> #idx2D70)");
// ...
let manufacturerSections = selectAll(machineSection, "& > ul > li");  // throws error, see below
// ...
Error: Empty sub-selector
    at finalizeSubselector (/home/sven/projects/seekseek/config-v2/node_modules/.pnpm/css-what@7.0.0/node_modules/css-what/dist/commonjs/parse.js:216:19)
    at parseSelector (/home/sven/projects/seekseek/config-v2/node_modules/.pnpm/css-what@7.0.0/node_modules/css-what/dist/commonjs/parse.js:487:5)
    at parse (/home/sven/projects/seekseek/config-v2/node_modules/.pnpm/css-what@7.0.0/node_modules/css-what/dist/commonjs/parse.js:130:22)
    at _compileUnsafe (/home/sven/projects/seekseek/config-v2/node_modules/.pnpm/css-select@6.0.0/node_modules/css-select/dist/commonjs/index.js:85:78)
    at Object.select (/home/sven/projects/seekseek/config-v2/node_modules/.pnpm/css-select@6.0.0/node_modules/css-select/dist/commonjs/index.js:97:21)
    ...

With the nesting selector having baseline availability now, do you intend to support this in css-select as well?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the select and selectAll entry points shown in the example, then reproduce the nesting-selector failure and follow the parser/compiler path named in the stack trace. Check how the selector is parsed and compiled relative to the queried node. Done means selectors beginning with & work for the demonstrated direct-child query without throwing an empty-sub-selector error.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.