gulp-group-css-media-queries issues

[sgurin]

Hi, bro. gulp-group-css-media-queries does not working correct with media queries which included height media queries.
Here is a SCSS code:
@include media("<phone", "height<737px") {
.home & {
min-height: 320px;
}
Add a comment to this line
}
@include media("<phone", "height<700px") {
.home & {
min-height: 270px;
}
}
@include media("<phone", "height<635px") {
.home & {
min-height: 260px;
}
}
@include media("<phone", "height<622px") {
.home & {
min-height: 250px;
}
}
@include media("<phone", "height<604px") {
.home & {
min-height: 245px;
}
}
@include media("<phone", "height<600px") {
.home & {
min-height: 215px;
}
}
@include media("<phone-small", "height<500px") {
.home & {
min-height: 180px;
}
}

And this is a result http://prntscr.com/ifmcxs with wrong chain of queries

[KirillPd]

Hey @sgurin,
Unfortunately, it is an issue with gulp-group-css-media-queries itself. We did a temporary hacky workaround for this case.
Now You're able to add your own custom sass files and don't apply gulp-group-css-media-queries module to them.

You can see this property in the gulp-config.js file:

Please don't forget to link all your custom sass files in html:

Also, you might want to add these sass files to the ignore list (check getPathesToCopyForProduction and getPathesToCopy properties in the gulp-config.js file). By default they will be copied to the assets and production folders.