giuseppeg / giuseppeg/postcss-pseudo-classes

Blacklisted pseudo class not excluded correctly

Open
#13 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
29
Forks
7
PR merge metrics
No merged PRs in 30d

Description

Hi,

I encountered a problem while using Angular:

The `:host` pseudo class is in the blacklist configuration.

The following element is given:
```html

```
where `` is the host tag and could be styled with `:host {...}`

Imagine the following scss as used in Angular

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

The same as css:

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

The result is:

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

The expected result:
```css
: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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.