postcss-pseudo-classes
postcss-pseudo-classes copied to clipboard
Blacklisted pseudo class not excluded correctly
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