Cascade layers aka @layer support

[vis97c]

Hello again. I'm opening this issue to discuss how to properly add support for @layer. Currently the layers are not merged and the media queries inside them are not merged, I'm also not sure if the media queries should be the ones in the outside.

Maybe off-topic, but this implementation would probably also relate to container queries (haven't done any testing there).

Let me know if you have consider this already or what ideas do you have. In the mean time I'll start figuring out how to fix the most inmediate issue.

Some example css, I'm using sass and after compiling it I use postcss with cssnano & some other plugins to minimize it as much as possible, This new @layer seems to be problematic for those others as well.

@layer defaults, modifiers;
@media only screen {
  * {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    border: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    position: relative;
    scroll-behavior: smooth;
    vertical-align: middle;
  }
  @layer defaults {
    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
      white-space: pre-line;
    }
  }
  html {
    text-rendering: optimizeLegibility;
  }
  ::selection {
    background: #0f47af;
    color: #fff;
  }
  /* Should have merged with the other selector */
  * {
    line-height: 1.2em;
  }
  code {
    font-family: Courier New, Courier, monospace;
  }
  dialog {
    background: transparent;
    margin: auto;
    overflow: visible;
  }
  @layer defaults {
    iframe,
    img {
      background-image: linear-gradient(135deg, #d4d4d4, #00b6ff 500%);
    }
  }
  @layer defaults {
    h1:not([class*="swal"]) {
      font-size: 2.2rem;
    }
    h1:not([class*="swal"]) br,
    h2:not([class*="swal"]) br {
      display: none;
    }
    /* Should probably be at the first level */
    @media only screen and (min-width: 769px) {
      h1:not([class*="swal"]) {
        font-size: 3.6rem;
      }
      h1:not([class*="swal"]) br,
      h2:not([class*="swal"]) br {
        display: inline;
      }
    }
    h2:not([class*="swal"]),
    h3:not([class*="swal"]) {
      font-size: 1.4rem;
    }
    /* Should have merged with the other media querie and be at the first level */
    @media only screen and (min-width: 769px) {
      h2:not([class*="swal"]) {
        font-size: 2.2rem;
      }
    }
    h4:not([class*="swal"]) {
      font-size: 1rem;
    }
    * > a,
    * > b,
    * > button,
    * > h1,
    * > h2,
    * > h3,
    * > h4,
    * > h5,
    * > h6,
    * > strong,
    * > th {
      font-weight: 600;
    }
    @supports (-moz-appearance: none) {
      * > a,
      * > b,
      * > button,
      * > h1,
      * > h2,
      * > h3,
      * > h4,
      * > h5,
      * > h6,
      * > strong,
      * > th {
        font-weight: 500;
      }
    }
  }
  /* Should have merged with the other selector */
  html {
    font-size: 95%;
    font-weight: 400;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
  }
}

The previous examples showcases some of the ocurrences I've encountered. Again it seems the plugins have issues mergin selectors & media queries. I'm interested in figuring out the media querie part in here.

[yunusga]

Hi @vis97c show your CSS code example

[vis97c]

Hi @vis97c show your CSS code example

Sorry, just updated the issue

[OlehDutchenko]

Hi @vis97c !
Sorry for long answer!
I can look into this matter in two weeks ((

[yunusga]

@vis97c I added quick fix for problem with ejected nested media queries postcss-sort-media-queries/blob/v5.2.0/README.md#only-top-level

[vis97c]

Hi @vis97c ! Sorry for long answer! I can look into this matter in two weeks ((

I was using outdated mqPacker. After looking at the issue the sorter seems to be doing fine regarding traditional media queries. I'm yet to test container and custom queries. In the meantime I opened yunusga/postcss-sort-media-queries#50 to adress the issue where is more needed. For the moment I'll be closing this one.