Combine/group work on .selector encapsutated media queries

[mistergraphx]

Hi and thx for your work,

i just realised that media-queries are combine if they are defined in a selector, and not if they are the first level of css declaration.

example:

.test {
    @include media('>phone','<tablet'){
        color: blue;
    }
    @include media('<desktop'){
        color: green;
    }
}

result:

@media (min-width: 431px) and (max-width: 767px) {
  .test {
    color: blue;
  }
}

@media (max-width: 1023px) {
  .test {
    color: green;
  }
}

if i use it in multiples files like this:

// Layout.scss
@include media('<desktop'){
    *, *:before, *:after {
      box-sizing: border-box;
    }

    body,
    body.large,
    body.etroit{
        min-width: 100%; // Surcharge des spip.css 
    }
   ...
// Navigation.scss
@include media('<desktop'){
    #bando_navigation {
        border-right: 1px solid silver;
        width: 120px;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0;
  ...

the grouping is ignore and there is one media-querie by imported files .

does i'm right ?

[ivankravchenko]

Hey @mistergraphx, I think I need a you to help me understand use case.

Your code looks like SCSS code. group-css-media-queries works with CSS files (usually output after SCSS processor). It should work fine (group media queries in correct order) with example of a result you've provided.

If it does not work as you expect, please provide an input CSS file, output and expected output.