Slow root :is() selectors

[jrmyio]

Selectors that start with :is() and do not have a specfic target element, id or class are really slow. Slow selectors cause lengthy Recalculate style, lowering the FPS.

For example:

  :is(html, body) {
    font-weight: bold;
  }

is much slower than

  html, body {
    font-weight: bold;
  }

LightningCSS seems to have a habit of generating these :is() selectors.

When transforming the following:

html, body {
    @layer test {
        font-weight: bold;
    }
}

table.users {
    tr.first,
    tr.second {
        @layer test {
            td:first-child,
            td:last-child {
                font-weight: bold;
            }
        }
    }
}

@layer test {
    html,
    body {
        font-style: italic;
    }
}

with{ include: Features.Nesting }

the output is the following:

@layer test {
  :is(html, body) {
    font-weight: bold;
  }
}

@layer test {
  :is(table.users tr.first, table.users tr.second) td:first-child, :is(table.users tr.first, table.users tr.second) td:last-child {
    font-weight: bold;
  }
}

@layer test {
  html, body {
    font-style: italic;
  }
}

In the above examples it seems that using a selector list after using a @layer causes the entire selector to be moved into an :is() selector

Is the above intentional ? If so, are there any ways to disable this behavior?

postcss with postcss-nested seems to generate the following CSS which is what I expected lightningcss to do too:

@layer test {
    html,
    body {
        font-weight: bold;
    }
}

@layer test {
    table.users tr.first td:first-child,
    table.users tr.first td:last-child,
    table.users tr.second td:first-child,
    table.users tr.second td:last-child {
        font-weight: bold;
    }
}

@layer test {
    html,
    body {
        font-style: italic;
    }
}