Part nested into pseudo selector
- Dominant language
- CSS
- Stars
- 840
- Forks
- 29
- PR merge metrics
- No merged PRs in 30d
Description
This example work fine:
``` scss
@include component(foo) {
& {
@include part(bar) {
// something
}
}
}
```
``` css
.foo__bar {
padding: 1em;
}
```
This produces a wrong output:
``` scss
@include component(foo) {
&:last-child {
@include part(bar) {
// something
}
}
}
```
``` css
/* Expected */
.foo:last-child .foo__bar {
padding: 1em;
}
/* Given */
.foo:last-child__bar {
padding: 1em;
}
```
Using **:not** pseudo-element will produce an error:
``` scss
@include component(foo) {
&:not(:first-child) {
@include part(bar) {
// something
}
}
}
```
The thrown error is `invalid selector after )`
Contributor guide
Research direction
Reproduce the nested `&:last-child` and `&:not(:first-child)` examples from the issue, then trace the selector-nesting entry point that produces `__bar` or `invalid selector after )`. Done means pseudo selectors remain on `.foo` while the part selector becomes `.foo__bar`, with no parsing error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100