Nested query media was promoted

[任祥磊]

Hi, i use postcss-cssnext nesting feature to nesting the media query, but the result css media query was promoted.

there is the code

.left_column {
  position: fixed;
  width: 250px;
  height: 100%;
  background: #00ccff;
  color: var(--mainColor);

  & header {
    padding-top: 60px;
  }

  @media screen and (max-width: 1024px) {
    width: 210px;
  }
}

result

@media screen and (max-width: 1024px) {
  .left_column {
    width: 210px;
  }
}
.left_column {
   position: fixed;
   width: 250px;
   height: 100%;
   background: #00ccff;
   color: white
}

the media query before .left_column, make the media query be overwritten

when i remove & header {} ,the result is my expected

.left_column {
   position: fixed;
   width: 250px;
   height: 100%;
   background: #00ccff;
   color: white
}

@media screen and (max-width: 1024px) {
  width: 210px;
}

is there anything wrong? thanks

my code environment is

[Jonathan Neal]

cssnext is very out of date. I have filed PRs to update that project, but I should not accept my own PRS.