Not all @nest at-rules are transformed
priver opened this issue · comments
Version of postcss-nesting: 4.0.1
Input:
.a {
color: black;
@nest .a1 & {color: red;}
@nest .a2 & {color: blue;}
@nest .a3 & {color: green;}
@nest .a4 & {color: yellow;}
}
.b {
color: black;
@nest .b1 & {color: red;}
@nest .b2 & {color: blue;}
@nest .b3 & {color: green;}
@nest .b4 & {color: yellow;}
}
Output:
.a {
color: black
}
.a1 .a {
color: red
}
.a2 .a {
color: blue
}
.a {
@nest .a3 & {color: green;
}
@nest .a4 & {color: yellow;
}
}
.b {
color: black;
@nest .b1 & {color: red;}
@nest .b2 & {color: blue;}
@nest .b3 & {color: green;}
@nest .b4 & {color: yellow;}
}
Expected:
.a {
color: black
}
.a1 .a {
color: red
}
.a2 .a {
color: blue
}
.a3 .a {
color: green
}
.a4 .a {
color: yellow
}
.b {
color: black
}
.b1 .b {
color: red
}
.b2 .b {
color: blue
}
.b3 .b {
color: green
}
.b4 .b {
color: yellow
}
Any update on this? 🤔
Here's another simplified example that doesn't work with the latest version.
Input
::-webkit-scrollbar {
@nest
body:not(.macos) & {
background-color: white;
}
@nest
.secondary & {
@nest
body:not(.macos) & {
background-color: black;
}
}
@nest
.primary & {
@nest
body:not(.macos) & {
background-color: white;
}
}
}
Output
body:not(.macos) .foo {
background-color: white
}
.foo {
@nest .secondary & {
@nest body,
not(.macos) & {
background-color: black
}
}
@nest .primary & {
@nest body,
not(.macos) & {
background-color: white
}
}
}
Fixed by #45