search

postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.16k stars 67 forks source link

:host selector nesting does not work as expected #79

Closed benjamind closed 5 years ago

benjamind commented 5 years ago

Currently if you do this:

:host {
    &:hover {
        background-color: red;
    }
}

Results in:

:host:hover {
    background-color: red;
}

Which is invalid, what it should output is:

:host(:hover) {
    background-color: red;
}
ai commented 5 years ago

Use

:host {
    &(:hover) {
        background-color: red;
    }
}

I can't make &:host hack, since it will not be predictable.

benjamind commented 5 years ago

Actually you may need to reopen this.

In testing using:

:host {
    &(:hover) {
        background-color: red;
    }
}

Results in only this:

:host {
    background-color: red;
}
ai commented 5 years ago

Yeap seems like a bug.

I do not have time for it in the next few weeks (sorry, I am preparing for a long trip). Can I ask you to help me here:

  1. Write test here https://github.com/postcss/postcss-nested/blob/master/index.test.js
  2. Check code for the issue somewhere here https://github.com/postcss/postcss-nested/blob/master/index.js#L28-L44

Do not worry, it is just 140 LOC of pure JS