Wrong nesting in media queries

Question

Wrong nesting in media queries

drgullin opened this issue 8 years ago · comments

postcss-nesting produces a wrong order of a media queries in the output.

It breaks things, a mobile image in the current example is replaced by tablet image.

Here's my CSS:

.section {
  &-new {
    position: relative;
    background-image: resolve('contents/whatinside/newbg.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;

    @media (--retina) {
      background-image: resolve('contents/whatinside/newbg@2x.jpg');
    }

    @media (--tablet-down) {
      background-image: resolve('contents/whatinside/newbg-tablet.jpg');

      @media (--retina) {
        background-image: resolve('contents/whatinside/newbg-tablet@2x.jpg');
      }
    }

    @media (--mobileMax-down) {
      background-image: resolve('contents/whatinside/newbg-mobile.jpg');

      @media (--retina) {
        background-image: resolve('contents/whatinside/newbg-mobile@2x.jpg');
      }
    }

    &:before {
      content: '';
      display: block;
      padding-top: 70%;

      @media (--tablet-down) {
        padding-top: 105%;
      }

      @media (--mobileMax-down) {
        padding-top: 402%;
      }
    }

    &-title {
      position: absolute;
      top: 8%;
      left: 0;
      right: 0;
      padding: 0 20px;
      font: 30px/1.4 $font-regular;
      text-transform: uppercase;
      text-align: center;
      color: #fff;

      @media (--tablet-down) {
        font-size: 24px;
      }

      @media (--mobileMax-down) {
        top: 5%;
      }
    }
  }

  margin-bottom: 40px;
  text-align: center;
  color: $color-f-main;
  background-image: resolve('contents/whatinside/palette-d.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center right;
  background-color: $color-bg-light;

  @media (--desktop-down) {
    background-size: auto 100%;
    background-position: top 0px right -100px;
  }

  @media (--tabletMax-down) {
    background-image: resolve('contents/whatinside/palette-t.png');
    background-size: auto 120%;
    background-position: top right;
  }

  @media (--tablet-down) {
    background-size: auto 100%;
    background-position: top 0px right -50px;
  }

  @media (--mobileMax-down) {
    background-image: resolve('contents/whatinside/palette-m.png');
    background-size: 100% auto;
    background-position: center top;
  }
}

.palette {
  display: none;
}

Without the plugin I get this:

.section-new_1MT{
  position:relative;
  background-image:url('/assets/contents/whatinside/newbg.jpg');
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:100% auto;
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg@2x.jpg');
  }
}

@media (max-width: 767px){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-tablet.jpg');
  }

  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
    .section-new_1MT{
      background-image:url('/assets/contents/whatinside/newbg-tablet@2x.jpg');
    }
  }
}

@media (max-width: 543px){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-mobile.jpg');
  }

  @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
    .section-new_1MT{
      background-image:url('/assets/contents/whatinside/newbg-mobile@2x.jpg');
    }
  }
}

.section-new_1MT:before{
  content:'';
  display:block;
  padding-top:70%;
}

@media (max-width: 767px){
  .section-new_1MT:before{
    padding-top:105%;
  }
}

@media (max-width: 543px){
  .section-new_1MT:before{
    padding-top:402%;
  }
}

.section-new-title_2V3{
  position:absolute;
  top:8%;
  left:0;
  right:0;
  padding:0 20px;
  font:30px/1.4 'GothamProRegular','Helvetica, Arial, sans-serif';
  text-transform:uppercase;
  text-align:center;
  color:#fff;
}

@media (max-width: 767px){
  .section-new-title_2V3{
    font-size:24px;
  }
}

@media (max-width: 543px){
  .section-new-title_2V3{
    top:5%;
  }
}

@media (max-width: 1199px){
  .section_2-G{
    background-size:auto 100%;
    background-position:top 0px right -100px;
  }
}

@media (max-width: 991px){
  .section_2-G{
    background-image:url('/assets/contents/whatinside/palette-t.png');
    background-size:auto 120%;
    background-position:top right;
  }
}

@media (max-width: 767px){
  .section_2-G{
    background-size:auto 100%;
    background-position:top 0px right -50px;
  }
}

@media (max-width: 543px){
  .section_2-G{
    background-image:url('/assets/contents/whatinside/palette-m.png');
    background-size:100% auto;
    background-position:center top;
  }
}

.palette_3w2{
  display:none;
}
```css

When I switch on the plugin, I get this:

.section-new_1MT{
  position:relative;
  background-image:url('/assets/contents/whatinside/newbg.jpg');
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:100% auto
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg@2x.jpg')
  }
}

@media (max-width: 767px){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-tablet.jpg')
  }
}

@media (max-width: 543px){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-mobile.jpg')
  }
}

.section-new_1MT:before{
  content:'';
  display:block;
  padding-top:70%
}

@media (max-width: 767px){
  .section-new_1MT:before{
    padding-top:105%
  }
}

@media (max-width: 543px){
  .section-new_1MT:before{
    padding-top:402%
  }
}

.section-new-title_2V3{
  position:absolute;
  top:8%;
  left:0;
  right:0;
  padding:0 20px;
  font:30px/1.4 'GothamProRegular','Helvetica, Arial, sans-serif';
  text-transform:uppercase;
  text-align:center;
  color:#fff
}

@media (max-width: 767px){
  .section-new-title_2V3{
    font-size:24px
  }
}

@media (max-width: 543px){
  .section-new-title_2V3{
    top:5%
  }
}

@media (max-width: 543px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 543px) and (min-resolution: 120dpi){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-mobile@2x.jpg')
  }
}

@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 767px) and (min-resolution: 120dpi){
  .section-new_1MT{
    background-image:url('/assets/contents/whatinside/newbg-tablet@2x.jpg')
  }
}

@media (max-width: 1199px){
  .section_2-G{
    background-size:auto 100%;
    background-position:top 0px right -100px
  }
  }

@media (max-width: 991px){
  .section_2-G{
    background-image:url('/assets/contents/whatinside/palette-t.png');
    background-size:auto 120%;
    background-position:top right
  }
  }

@media (max-width: 767px){
  .section_2-G{
    background-size:auto 100%;
    background-position:top 0px right -50px
  }
  }

@media (max-width: 543px){
  .section_2-G{
    background-image:url('/assets/contents/whatinside/palette-m.png');
    background-size:100% auto;
    background-position:center top
  }
  }

.palette_3w2{
  display:none;
}

@media (max-width: 543px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 543px) and (min-resolution: 120dpi)
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.25), (max-width: 767px) and (min-resolution: 120dpi)

As you can see, max-width: 543px goes before max-width: 767px, so a mobile styles get overwritten by tablet styles. Order is not preserved.

Jonathan Neal · Answer 1 · Sat May 06 2017 23:42:02 GMT+0800 (China Standard Time)

Thanks for letting me know, but I am having trouble following this. Could you reduce this test case?