Ligthning generate :is with pseudo element

[bakura10]

Hi,

Considering the following code:

.foo {
  &::before {
    .bar & {
      color: blue;
    }
  }
}

ParcelCSS will generate the following CSS:

.bar :is(.foo:before){color:#00f}

Playground URL

However, using a pseudo element selector is not valid inside :is, so it should generate this instead:

.bar .foo:before{color:#00f}

[devongovett]

Actually I'm not convinced that this is valid for nesting either... https://drafts.csswg.org/css-nesting/#example-7145ff1e

Related: https://github.com/w3c/csswg-drafts/issues/7433

[bakura10]

It seems you're right, this is a very odd limitation. Maybe Parcel should emit a warning here, I can imagine I won't be the first being caught by surprise here :D

[fuweichin]

For lightningcss 1.0.0-alpha.55, the double semicolon :: of psuedo-element selector will always be transformed to single semicolon : (as psuedo-class selector) during bundle process regardless of browserslist. This doesn't make sense especially when the --minify option is not used.

[yisibl]

It seems you're right, this is a very odd limitation. Maybe Parcel should emit a warning here, I can imagine I won't be the first being caught by surprise here :D

I filed a separate issue: https://github.com/parcel-bundler/lightningcss/issues/760

[yisibl]

For the following styles

input

dialog:modal, dialog:modal::backdrop {
  @starting-style {
    opacity: 0;
  }
  opacity: 1;
}

output

dialog:modal {
  opacity: 1;
}

@starting-style {
  dialog:modal {
    opacity: 0;
  }
}

dialog:modal::backdrop {
  opacity: 1;
}

@starting-style {
  dialog:modal::backdrop {
    opacity: 0;
  }
}

expected

dialog:modal, dialog:modal::backdrop {
  opacity: 1;
}
@starting-style {
  dialog:modal, dialog:modal::backdrop {
    opacity: 0;
  }
}