Lightning 1.21 generates invalid CSS for Webkit pseudo-selectors

[bakura10]

Hi !

Starting from Lightning 1.21, the following code:

.quantity-selector__input {
  appearance: textfield;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Generate as:

.quantity-selector__input {
  appearance: textfield;
}

:is(.quantity-selector__input::-webkit-outer-spin-button, .quantity-selector__input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

Unfortunately the :is generates invalid code as the Webkit pseudo selectors do not work. Lightning 1.20 and lower generates the correct CSS (I am actually unsure as to why Lightning generates this as the first place, as this actually makes the code longer than what it has to be):

.quantity-selector__input {
  appearance: textfield;
}

.quantity-selector__input::-webkit-outer-spin-button, .quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

This is probably related to this: #352

If this is not a valid selector, then Lightning should generate something in the console, as this is a breaking change compared to the 1.20 and lower behavior :). This can caught by surprise everyone who upgrade to 1.21.

Thanks!

[bakura10]

@devongovett Unfortunately I figured out the issue is a bit more problematic, as even without nesting, Lightning CSS now generates invalid CSS. This:

.quantity-selector__input::-webkit-outer-spin-button,
.quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Is also rewritten as this:

:is(.quantity-selector__input::-webkit-outer-spin-button, .quantity-selector__input::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

The only solution I see is making sure to rewrite like this, but of course this force to duplicate all the rules:

.quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-selector__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

This also break a lot of places in my code base so for now I don't feel super confident upgrading to the latest version. I really think that showing should be done to prevent the rewrite to :is, at least not in this situation, as rewriting with :is actually generates longer output.

EDIT: the same issue occurs with mozilla specific pseudo-selectors. The following:

.range-group .range::-moz-range-progress,
.range-group .range::-moz-range-track {
  background: none;
}

Is incorrectly rewritten as:

:is(.range-group .range::-moz-range-progress, .range-group .range::-moz-range-track) {
  background: none;
}

[MilllerTime]

Just hit this issue after upgrading Parcel in a project. Splitting each selector apart (not combining with a comma) is a workaround, but not ideal.

:is does not select pseudo elements by design, so rewriting code containing ::-webkit-outer-spin-button etc to wrap them with :is simply breaks the code. It would be awesome if Lightning was aware of this CSS rule.