Allow :is() and :where() selectors by KH-Coder865 · Pull Request #789 · jupyterlab/lumino

KH-Coder865 · 2026-02-06T08:56:03Z

This PR Changes

This PR allows the use of :is() and :where() functional pseudo-classes
in Lumino selector validation.

Historically, selectors containing commas were rejected because
comma-separated selector lists do not have a single specificity.
However, :is() and :where() are defined by Selectors Level 4
as single selectors, with well-defined specificity rules.

This change:

Continues to reject top-level comma-separated selectors
Allows commas only inside :is() and :where()
Does not change specificity computation logic

Fixes

Fixes Support the selectors with :is() and :where() #685

Labels

enhancement

packages/widgets/tsconfig.json

packages/coreutils/src/selector.ts

packages/coreutils/tests/src/selector.spec.ts

KH-Coder865 · 2026-02-08T07:39:08Z

Have successfully moved the whole updated functionality to the domutils package, in the latest commit as advised by @krassowski .

krassowski · 2026-02-08T12:43:37Z

The build and linter are failing. You can run tests locally or by actions on your fork and opening a PR against the fork. Please feel free to request a review once the basic build/tests/linter are passing. If you encounter issues testing it locally let me know.

KH-Coder865 · 2026-02-08T14:51:28Z

The build and linter are failing. You can run tests locally or by actions on your fork and opening a PR against the fork. Please feel free to request a review once the basic build/tests/linter are passing. If you encounter issues testing it locally let me know.

Ok Sure.

KH-Coder865 · 2026-02-08T15:08:08Z

All builds and tests pass locally except @lumino/datagrid:test, which fails due to known text rendering differences in headless Chromium.
No changes in this PR affect datagrid.

KH-Coder865 · 2026-02-08T15:09:04Z

I think it is ready for the review.

KH-Coder865 · 2026-02-09T13:08:38Z

Requesting a review @krassowski .

krassowski

This PR should not be modifying 23 files. Can you please revert the unrelated changes to yaml and html files please?

packages/coreutils/tests/src/selector.spec.ts

KH-Coder865 · 2026-02-09T13:22:37Z

This PR should not be modifying 23 files. Can you please revert the unrelated changes to yaml and html files please?

I ran prettier on every file and fixed the error in the previous commit, I think it is a result of running prettier on all files.
I do not know any way to revert it.

krassowski · 2026-02-09T14:05:44Z

git checkout main path-to-file should do it

KH-Coder865 · 2026-02-09T14:58:36Z

I’m having a bit of trouble understanding how to implement this change.
I tried looking into the command, but I’m still not sure what the correct approach is here.
Would you mind clarifying, or would it be okay if you pushed the change directly to this PR?

KH-Coder865 · 2026-02-13T11:36:05Z

@krassowski
Have successfully reverted the changes. Kindly check now.

KH-Coder865 · 2026-02-14T08:43:09Z

Requesting a review.

krassowski

Just some minor things to finish here

packages/coreutils/tests/src/selector.spec.ts

packages/coreutils/src/index.ts

packages/domutils/src/selector.ts

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

KH-Coder865 · 2026-03-28T06:32:57Z

Hi @krassowski , have fixed the small changes. Hope now its good to be merged

Copilot

Pull request overview

This PR aims to allow Selectors Level 4 functional pseudo-classes :is() and :where() in Lumino selector validation by rejecting only top-level comma-separated selector lists, while permitting commas inside those pseudo-classes.

Changes:

Add Selector.hasTopLevelComma() to detect commas that separate selector lists (intended to ignore commas inside :is() / :where()).
Update selector validation in context menu items and command keybinding options to use Selector.hasTopLevelComma() instead of indexOf(',').
Add unit tests for hasTopLevelComma().

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
packages/domutils/src/selector.ts	Introduces `hasTopLevelComma()` (via `stripIsWhere`) to allow commas inside `:is()`/`:where()`.
packages/domutils/tests/src/selector.spec.ts	Adds tests asserting commas inside `:is()`/`:where()` are allowed but top-level commas are rejected.
packages/widgets/src/contextmenu.ts	Switches context menu selector validation to reject only top-level commas.
packages/commands/src/index.ts	Switches keybinding selector validation to reject only top-level commas.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/widgets/src/contextmenu.ts

packages/commands/src/index.ts

packages/domutils/tests/src/selector.spec.ts

Copilot · 2026-03-28T13:49:39Z

packages/domutils/src/selector.ts

+  /**
+   * Returns true if the selector contains a top-level comma.
+   */
+  export function hasTopLevelComma(selector: string): boolean {
+    return stripIsWhere(selector).indexOf(',') !== -1;
+  }


hasTopLevelComma() now allows selectors like .a:is(.b,.c), but Selector.calculateSpecificity()/Private.calculateSingle() still split the selector at the first comma (selector.split(',', 1)[0]). That will cut commas inside :is()/:where() and produce incorrect specificity values, which affects ordering logic in context menus and keybinding resolution. Please update specificity parsing to ignore commas inside :is()/:where() (or implement their Selectors Level 4 specificity rules) so the new allowed selectors don’t break precedence decisions.

Copilot · 2026-03-28T13:49:39Z

packages/domutils/src/selector.ts

+    return selector.replace(
+      /:(is|where)\(([^()]|\([^()]*\))*\)/g,
+      ''
+    );


stripIsWhere() uses a regex that only handles limited parenthesis nesting. Valid selectors can nest functional pseudos (e.g. :is(:not(:is(.b,.c)))), and in those cases the regex won’t strip the outer :is(...), causing commas inside nested selectors to be treated as “top-level” and rejected. Consider replacing the regex with a small scanner that tracks parentheses depth and whether the current depth is inside an :is( / :where( function.

Suggested change

return selector.replace(

/:(is|where)\(([^()]|\([^()]*\))*\)/g,

''

);

let result = '';

const len = selector.length;

let i = 0;

while (i < len) {

const ch = selector[i];

if (

ch === ':' &&

(selector.startsWith('is(', i + 1) ||

selector.startsWith('where(', i + 1))

) {

// Determine which function name we matched.

const isIs = selector.startsWith('is(', i + 1);

const nameLen = isIs ? 2 : 5; // 'is' or 'where'

const openParenIndex = i + 1 + nameLen;

// Sanity check: ensure there is an opening parenthesis.

if (openParenIndex >= len || selector[openParenIndex] !== '(') {

// Fallback: treat ':' as a normal character.

result += ch;

i++;

continue;

}

// Skip over the entire :is(...) or :where(...) construct,

// correctly handling nested parentheses.

let depth = 1;

let j = openParenIndex + 1;

while (j < len && depth > 0) {

const cj = selector[j];

if (cj === '(') {

depth++;

} else if (cj === ')') {

depth--;

}

j++;

}

// Set i to the position after the closing parenthesis (or end of string).

i = j;

continue;

}

// Normal character, keep it.

result += ch;

i++;

}

return result;

packages/domutils/src/selector.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions bot assigned KH-Coder865 Feb 6, 2026

KH-Coder865 force-pushed the allow-is-where-selectors branch from 1a78461 to 77e6a17 Compare February 6, 2026 09:03

Allow :is() and :where() selectors in selector validation

a92102d

KH-Coder865 force-pushed the allow-is-where-selectors branch from bf9aeeb to a92102d Compare February 6, 2026 09:07

github-actions bot and others added 3 commits February 6, 2026 09:08

Automatic application of license header

7e3300c

Updating tsconfig.json to resolve build

8336e48

Updating tsconfig.json to resolve build

83383f5

krassowski added the enhancement New feature or request label Feb 6, 2026

fcollonval reviewed Feb 7, 2026

View reviewed changes

packages/widgets/tsconfig.json Outdated Show resolved Hide resolved

KH-Coder865 requested a review from fcollonval February 7, 2026 07:10

krassowski reviewed Feb 7, 2026

View reviewed changes

packages/coreutils/src/selector.ts Outdated Show resolved Hide resolved

packages/coreutils/tests/src/selector.spec.ts Outdated Show resolved Hide resolved

Applied Suggestive Changes

15263f7

KH-Coder865 force-pushed the allow-is-where-selectors branch from 1e4af27 to 15263f7 Compare February 7, 2026 13:55

KH-Coder865 requested a review from krassowski February 7, 2026 14:01

Moved updated functionality to domutils

18d052e

krassowski requested changes Feb 9, 2026

View reviewed changes

packages/coreutils/tests/src/selector.spec.ts Outdated Show resolved Hide resolved

KH-Coder865 force-pushed the allow-is-where-selectors branch 2 times, most recently from e990ec6 to 18d052e Compare February 13, 2026 11:29

KH-Coder865 requested a review from krassowski February 13, 2026 11:35

krassowski reviewed Feb 14, 2026

View reviewed changes

packages/coreutils/tests/src/selector.spec.ts Outdated Show resolved Hide resolved

packages/coreutils/src/index.ts Outdated Show resolved Hide resolved

packages/domutils/src/selector.ts Outdated Show resolved Hide resolved

KH-Coder865 and others added 2 commits February 14, 2026 21:27

Update packages/domutils/src/selector.ts

05b9aa3

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

Finalized small changes

23cdd58

krassowski added 3 commits March 28, 2026 11:05

Try to fix test

74b8138

Remove second copy of selector test

1e38ea7

Move the Selector tests under the Selector group

effc878

krassowski requested a review from Copilot March 28, 2026 13:45

Copilot started reviewing on behalf of krassowski March 28, 2026 13:45 View session

Copilot AI reviewed Mar 28, 2026

View reviewed changes

krassowski and others added 5 commits March 28, 2026 14:01

Fix nesting of test cases

4bce81f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Clarify error messages regarding selector commas

c01cfe5

Add test for commas inside nested :is() selector

40f1a68

lint

c30db48

Add another test

8635c88

-    return selector.replace(
-      /:(is|where)\(([^()]|\([^()]*\))*\)/g,
-      ''
-    );
+    let result = '';
+    const len = selector.length;
+    let i = 0;
+    while (i < len) {
+      const ch = selector[i];
+      if (
+        ch === ':' &&
+        (selector.startsWith('is(', i + 1) ||
+          selector.startsWith('where(', i + 1))
+      ) {
+        // Determine which function name we matched.
+        const isIs = selector.startsWith('is(', i + 1);
+        const nameLen = isIs ? 2 : 5; // 'is' or 'where'
+        const openParenIndex = i + 1 + nameLen;
+        // Sanity check: ensure there is an opening parenthesis.
+        if (openParenIndex >= len || selector[openParenIndex] !== '(') {
+          // Fallback: treat ':' as a normal character.
+          result += ch;
+          i++;
+          continue;
+        }
+        // Skip over the entire :is(...) or :where(...) construct,
+        // correctly handling nested parentheses.
+        let depth = 1;
+        let j = openParenIndex + 1;
+        while (j < len && depth > 0) {
+          const cj = selector[j];
+          if (cj === '(') {
+            depth++;
+          } else if (cj === ')') {
+            depth--;
+          }
+          j++;
+        }
+        // Set i to the position after the closing parenthesis (or end of string).
+        i = j;
+        continue;
+      }
+      // Normal character, keep it.
+      result += ch;
+      i++;
+    }
+    return result;

Uh oh!

Conversation

KH-Coder865 commented Feb 6, 2026

This PR Changes

Fixes

Labels

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KH-Coder865 commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krassowski commented Feb 8, 2026

Uh oh!

KH-Coder865 commented Feb 8, 2026

Uh oh!

KH-Coder865 commented Feb 8, 2026

Uh oh!

KH-Coder865 commented Feb 8, 2026

Uh oh!

KH-Coder865 commented Feb 9, 2026

Uh oh!

krassowski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

KH-Coder865 commented Feb 9, 2026

Uh oh!

krassowski commented Feb 9, 2026

Uh oh!

KH-Coder865 commented Feb 9, 2026

Uh oh!

KH-Coder865 commented Feb 13, 2026

Uh oh!

KH-Coder865 commented Feb 14, 2026

Uh oh!

krassowski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KH-Coder865 commented Mar 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

KH-Coder865 commented Feb 8, 2026 •

edited

Loading