csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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
}
commented

Any update on this? 🤔

commented

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