jupyterlab/lumino

Support the selectors with `:is()` and `:where()`

krassowski opened this issue · 0 comments

Problem

Selectors with comma are currently straight out rejected in a few places:

function validateSelector(selector: string): string {
if (selector.indexOf(',') !== -1) {
throw new Error(`Selector cannot contain commas: ${selector}`);
}

function validateSelector(
options: CommandRegistry.IKeyBindingOptions
): string {
if (options.selector.indexOf(',') !== -1) {
throw new Error(`Selector cannot contain commas: ${options.selector}`);
}

This is understandable because the selector specificity can be only computed for individual selector, not a comma-separated list of selectors.

However, the :is() and :where() selectors now widely supported by browsers and take a comma-separated lists of selectors:

  • :is() counts towards specificity with the specificity of the most specific element on the list
  • :where() counts with specificity of zero (so very easy to implement!)

Lack of support for :is and :where makes creating selectors for certain commands and context menu more difficult than it should be in 2024.

Proposed Solution

Implement support for :is() and :where().

Additional context

Encountered this in jupyterlab/jupyterlab#15845 when trying to make the context menu show for .jp-RunningSessions-item:is(.jp-mod-kernel,.jp-mod-kernel-widget).