Incorrect order with structural optimisation of media queries

[FQZhang]

Example Source:

h1 {
  color: blue;
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  text-transform: uppercase;
  font-size: 25px;
}
@media screen and (min-width: 641px) {
  h1 {
    font-size: 40px;
  }
}

h2 {
  color: black;
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  text-transform: uppercase;
  font-size: 22px;
}
@media screen and (min-width: 641px) {
  h2 {
    font-size: 35px;
  }
}

h3 {
  color: blue;
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  font-size: 20px;
}
@media screen and (min-width: 641px) {
  h3 {
    font-size: 30px;
  }
}

h4 {
  color: blue;
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  font-size: 22px;
}
@media screen and (min-width: 641px) {
  h4 {
    font-size: 25px;
  }
}

h5 {
  color: blue;
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  font-size: 22px;
}
@media screen and (min-width: 641px) {
  h5 {
    font-size: 20px;
  }
}

h6 {
  color: blue;
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  font-size: 16px;
}
@media screen and (min-width: 641px) {
  h6 {
    font-size: 18px;
  }
}

however the output has a font-size for h2 that is after the h2 media query based font size:

h1,h2 {
    text-transform: uppercase;
    font-weight: 600
}

h1 {
    font-size: 25px;
    color: #00f
}

@media screen and (min-width:641px) {
    h1 {
        font-size: 40px
    }
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Open Sans';
    font-style: normal;
    line-height: 1.5
}

h2 {
    color: #000
}

@media screen and (min-width:641px) {
    h2 {
        font-size: 35px
    }
}

h3,h4,h5,h6 {
    color: #00f;
    font-weight: 400;
    font-size: 20px
}

@media screen and (min-width:641px) {
    h3 {
        font-size: 30px
    }
}

h2,h4,h5,h6 {
    font-size: 22px
}

@media screen and (min-width:641px) {
    h4 {
        font-size: 25px
    }
}

@media screen and (min-width:641px) {
    h5 {
        font-size: 20px
    }
}

h6 {
    font-size: 16px
}

@media screen and (min-width:641px) {
    h6 {
        font-size: 18px
    }
}

[armellarcier]

Any info ? Status ? I'm getting the same kind of problems.

[klickreflex]

Just bumped into the exact same issue. Can't believe there are not many more people having this problem.

[klickreflex]

For now I solved this by passing the option restructure: false.

Related: for me this bug has prevented PurgeCSS from working properly. Without restructuring being disabled PurgeCSS is working again, too.

[jenstornell]

I agree. restructure: false does the trick, but better to have the issue fixed in the long run.

[McGern]

Have the same issue with the restructure option, thought I was going mad. Used the online tool https://css.github.io/csso/csso.html
with this css

blockquote {
font-family: Arial, sans-serif;
font-weight: normal;
margin-bottom: 30px;
}

dt {
font-family: Arial, sans-serif;
font-weight: 600;
margin: 10px 10px 0 10px;
}

dd {
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 15px 20px 10px;
}

and get this

blockquote,dd{font-weight:400}blockquote,dd,dt{font-family:Arial,sans-serif}blockquote{margin-bottom:30px}dd,dt{font-weight:600;margin:10px 10px 0}dd{margin:0 15px 20px 10px}

[lahmatiy]

Fix published in 4.0.3