postcss-pseudo-classes icon indicating copy to clipboard operation
postcss-pseudo-classes copied to clipboard

Blacklisted pseudo class not excluded correctly

Open philippone opened this issue 5 years ago • 0 comments

Hi,

I encountered a problem while using Angular:

The :host pseudo class is in the blacklist configuration.

The following element is given:

<my-button class="vairant"></mybutton>

where <my-button> is the host tag and could be styled with :host {...}

Imagine the following scss as used in Angular

:host {
    &.variant {
          .block .element:active { color: blue} 
    }
}

The same as css:

:host.hostVariant .block .element:active {
  color: blue;
}

The result is:

:host.hostVariant .block .element:active,
.\:host.hostVariant .block .element.\:active {
  color: blue;
}

The expected result:

:host.hostVariant .block .element:active,
:host.hostVariant .block .element.\:active {
  color: blue;
}

The styling is broken when using a class (.) on the host (:host) element. The same problem will occur when using IDs (#) on the host (:host) element.

I will submit my PR in a few minutes.

I would really appreciate to get the next release published on npm, too.

All the best, Philipp

philippone avatar Mar 29 '20 21:03 philippone