Don't change the order of styles with data-ignore="ignore"

[denisborovikov]

After processing styles inside data-ignore="ignore" tags goes to the end.

Input:

  <style type="text/css" data-ignore="ignore">.one{text-align: center;}</style>
  <style type="text/css" data-ignore="ignore">.two{text-align: center;}</style>
  <style type="text/css">
.tree{text-align: center; }
@media only screen and (max-width: 600px) {
.four {text-align: center;}
}
</style>
 <style type="text/css" data-ignore="ignore">.five{text-align: center;}</style>

Output:

<style type="text/css">
@media only screen and (max-width: 600px) {
.four {text-align: center;}
}</style>
<style type="text/css">
.one{text-align: center;}.two{text-align: center;}.five{text-align: center;}
</style>

Expected:

<style type="text/css">
.one{text-align: center;}.two{text-align: center;}
</style>
 <style type="text/css">
@media only screen and (max-width: 600px) {
.four {text-align: center;}
}</style>
<style type="text/css">
.five{text-align: center;}
</style>

[yargalot]

Thats an interesting one, will put it in.

[jeremypeter]

@Metaller Were you using the preserveMediaQueries option?

[denisborovikov]

@jeremypeter Yes, preserveMediaQueries: true.

[jeremypeter]

I would use v3.0.0. It doesn't support preserveMediaQueries, however I would just put the media query inside of a style block that will be ignored.
Example:

input

<style data-embed>.one{text-align: center;}</style>
<style data-embed>.two{text-align: center;}</style>
<style> .tree{text-align: center; } </style>
<style data-embed>
    @media only screen and (max-width: 600px) {
        .four {text-align: center;}
    }
</style>
 <style data-embed>.five{text-align: center;}</style>

output

<style>.one{text-align: center;}</style>
<style>.two{text-align: center;}</style>
<style>
    @media only screen and (max-width: 600px) {
        .four {text-align: center;}
    }
</style>
 <style>.five{text-align: center;}</style>