Skip to content

CSS minifier incorrectly removes leading & nesting selector #4497

Description

@darrylyeo

The CSS minifier removes a leading & from nested selectors that also use & within other selector parts like :not(), which incorrectly changes the overall selector's meaning.

Reproduction: esbuild playground

Input:

.a {
  .b:not(.a .b .b) {
    --level: 1;

    & .b:not(& .b .b) {
      --level: 2;

      & .b:not(& .b .b) {
        --level: 3;
      }
    }
  }
}

Output with esbuild 0.28.1 and --loader=css --minify:

.a{.b:not(.a .b .b){--level:1;.b:not(& .b .b){--level:2;.b:not(& .b .b){--level:3}}}}

The leading & before each nested .b:not(...) selector must be preserved, or the output must be rewritten to an equivalent selector. In the example above, given three nested .b elements, the input computes --level as 1, 2, and 3, while the minified output computes 3 for all three elements.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions