feat: add support for class prefix selectors (.foo-*)#333
Conversation
Sorry, something went wrong.
Closes #332 Co-authored-by: MoOx <157534+MoOx@users.noreply.github.com>
|
@romainmenke any feedback for this? |
Sorry, something went wrong.
There was a problem hiding this comment.
Pull request overview
Adds parsing support for CSS “class prefix selectors” of the form .foo-*, intending to treat them as a single class node (value foo-*) instead of splitting into class + universal.
Changes:
- Update splitWord() to optionally consume a trailing * token into a class-like word ending in -.
- Add new test cases covering .foo-*, div.foo-*, and .foo-*.bar-*.
- Bump the lockfile version metadata (package-lock.json) to 7.1.5.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/parser.js | Extends splitWord() to fold * into .foo- words and adjust token reference used for source calculations. |
| src/tests/classes.mjs | Adds new class-prefix selector parsing assertions. |
| package-lock.json | Updates package version fields to 7.1.5. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sorry, something went wrong.
| let indices = sortAsc(uniqs([0, ...hasClass, ...hasId])); | ||
| indices.forEach((ind, i) => { | ||
| const index = indices[i + 1] || word.length; | ||
| const value = word.slice(ind, index); | ||
| if (i === 0 && firstCallback) { | ||
| return firstCallback.call(this, value, indices.length); | ||
| } | ||
| let node; | ||
| const current = this.currToken; | ||
| const current = wordStartToken; | ||
| const sourceIndex = current[TOKEN.START_POS] + indices[i]; | ||
| const source = getSource(current[1], current[2] + ind, current[3], current[2] + (index - 1)); |
| test("class prefix selector", ".foo-*", (t, tree) => { | ||
| t.deepEqual(tree.nodes[0].nodes[0].type, "class"); | ||
| t.deepEqual(tree.nodes[0].nodes[0].value, "foo-*"); | ||
| }); | ||
|
|
||
| test("class prefix selector with tag", "div.foo-*", (t, tree) => { | ||
| t.deepEqual(tree.nodes[0].nodes[0].type, "tag"); | ||
| t.deepEqual(tree.nodes[0].nodes[0].value, "div"); | ||
| t.deepEqual(tree.nodes[0].nodes[1].type, "class"); | ||
| t.deepEqual(tree.nodes[0].nodes[1].value, "foo-*"); | ||
| }); | ||
|
|
||
| test("multiple class prefix selectors", ".foo-*.bar-*", (t, tree) => { | ||
| t.deepEqual(tree.nodes[0].nodes[0].type, "class"); | ||
| t.deepEqual(tree.nodes[0].nodes[0].value, "foo-*"); | ||
| t.deepEqual(tree.nodes[0].nodes[1].type, "class"); | ||
| t.deepEqual(tree.nodes[0].nodes[1].value, "bar-*"); | ||
| }); |
|
I choose not to spend time reading or reviewing LLM generated content. |
Sorry, something went wrong.
|
Sure no problem. |
Sorry, something went wrong.
Adds parsing support for CSS class prefix selectors per w3c/csswg-drafts#10001. A selector like .foo-* now produces a single class AST node rather than being split into a class and universal selector.
Note: div-* (no class dot) still correctly produces tag + universal selector — the prefix logic only fires when a . class indicator is present in the word.