lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Selectors with a class after the pseudo-element

Open bin1357 opened this issue 1 year ago • 1 comments

Inconsistent behavior in the parser and strigifier when working with selectors with a class after the pseudo-element.

Expected behavior

Any output should be accepted as an input without errors

No error case

Input

.input::placeholder {
  &:not(.noAdaptiveTypography) {
    display: inline
  }
}

Output (get error case)

.input::placeholder:not(.noAdaptiveTypography) {
  display: inline;
}

Lightning CSS Playground

Error case

Input

.input::placeholder:not(.noAdaptiveTypography) {
  display: inline;
}

Output (get error case)

/* ERROR: Pseudo-elements like '::before' or '::after' can't be followed by selectors like 'Delim('.')' */

Lightning CSS Playground

bin1357 avatar Oct 09 '24 13:10 bin1357

Getting the similar issue if you accidentaly target some element like br after pseudo element, e.g.:

.selector::after br {}

This isn’t valid of course, but maybe Lightning CSS can be forgiving in these cases?

Edit: just saw similar issue with suggestions on how to approach this, so ignore my comment

niksy avatar Dec 22 '24 10:12 niksy