Skip to content

feat: add support for class prefix selectors (.foo-*) - #333

Open
MoOx with Copilot wants to merge 2 commits into
mainfrom
copilot/tentative-add-support-for-foo-selectors
Open

feat: add support for class prefix selectors (.foo-*)#333
MoOx with Copilot wants to merge 2 commits into
mainfrom
copilot/tentative-add-support-for-foo-selectors

Conversation

Copilot AI commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

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.

  • Parser (src/parser.js): In splitWord(), when a word contains a class dot and ends with -, consume the following * token into the word. This produces a single ClassName node with the wildcard suffix.
  • Tests (src/__tests__/classes.mjs): Added cases for .foo-*, div.foo-*, and .foo-*.bar-*.
const parser = require('postcss-selector-parser');
const result = parser().astSync('.foo-*');

result.nodes[0].nodes[0].type;  // "class"
result.nodes[0].nodes[0].value; // "foo-*"
result.toString();              // ".foo-*"

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.

Closes #332

Co-authored-by: MoOx <157534+MoOx@users.noreply.github.com>
Copilot AI changed the title [WIP] Add support for .foo-* class prefix selectors feat: add support for class prefix selectors (.foo-*) Aug 7, 2026
Copilot AI requested a review from MoOx August 7, 2026 10:58
Copilot finished work on behalf of MoOx August 7, 2026 10:58
@MoOx

MoOx commented Aug 7, 2026

Copy link
Copy Markdown
Collaborator

@romainmenke any feedback for this?

@MoOx
MoOx marked this pull request as ready for review August 7, 2026 11:44
Copilot AI lite review requested due to automatic review settings August 7, 2026 11:44

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/parser.js
Comment on lines 965 to 975
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));
Comment thread src/__tests__/classes.mjs
Comment on lines +278 to +295
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-*");
});
@romainmenke

Copy link
Copy Markdown
Contributor

I choose not to spend time reading or reviewing LLM generated content.
Happy to answer any questions or review code written by a person.
Hope you understand :)

@MoOx

MoOx commented Aug 7, 2026

Copy link
Copy Markdown
Collaborator

Sure no problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[tentative] Add support for .foo-* class prefix selectors

4 participants