Merging non-adjacent media queries not working

Hi, Im trying to merge non-adjacents media queries.

Is it possible to do it? I also tried on the playground : https://jakubpawlowicz.github.io/clean-css/ But I cant do it, am i missing something? mergeAdjacentRules is set to true…

here is my set-up :

Environment

• clean-css version - 4.2.1:
• node.js version - v10.16.3:
• operating system: win10

Configuration options

var CleanCSS = require("clean-css");
var source = "@import url(design-system.css);";
var output = new CleanCSS({
  level: {
    2: {
      mergeAdjacentRules: true, // controls adjacent rules merging; defaults to true
      mergeIntoShorthands: true, // controls merging properties into shorthands; defaults to true
      mergeMedia: true, // controls `@media` merging; defaults to true
      mergeMediaQueries: true, // controls `@media` merging; defaults to true
      mergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
      mergeSemantically: false, // controls semantic merging; defaults to false
      overrideProperties: true, // controls property overriding based on understandability; defaults to true
      removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
      reduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
      removeDuplicateFontRules: true, // controls duplicate `@font-face` removing; defaults to true
      removeDuplicateMediaBlocks: true, // controls duplicate `@media` removing; defaults to true
      removeDuplicateRules: true, // controls duplicate rules removing; defaults to true
      removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
      restructureRules: false, // controls rule restructuring; defaults to false
      format: "beautify",
      skipProperties: [] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)
    }
  }
}).minify(source);

Input CSS

h1 {
  font-size: 2.25rem;
  line-height: 1.2222222222;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  h1 {
    font-size: 3.75rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
}

h2 {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  h2 {
    font-size: 3rem;
    line-height: 1.2083333333;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  ul {
    position: relative;
  }
  li {
    position: relative;
  }
}

Actual output CSS

h1 {
  font-size: 2.25rem;
  line-height: 1.2222222222;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  h1 {
    font-size: 3.75rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
}
h2 {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}
@media (min-width: 992px) {
  h2 {
    font-size: 3rem;
    line-height: 1.2083333333;
    margin-bottom: 1.5rem;
  }
  li,
  ul {
    position: relative;
  }
}

Expected output CSS

h1 {
  font-size: 2.25rem;
  line-height: 1.2222222222;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  h1 {
    font-size: 3.75rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }
  h2 {
    font-size: 3rem;
    line-height: 1.2083333333;
    margin-bottom: 1.5rem;
  }
  ul {
    position: relative;
  }
  li {
    position: relative;
  }
}

[SukkaW]

This project seems abandoned, anyone have a better alternative?

@stephenbe

cssnano doesn’t support media queries merging at all, so I am using https://github.com/hail2u/node-css-mqpacker with postcss + cssnano now. They produce even smaller css files when working together.

[stevenbriscoeca]

This project seems abandoned, anyone have a better alternative?