geddski / geddski/csstyle

Part nested into pseudo selector

Open
#45 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.