postcss-move-media

PostCSS plugin to combine and move Media Queries to the end of the CSS file

Install

With npm do:

npm install postcss-move-media --save

Example

This plugin allows you to write mediaqueries where they make sense contextually, including repeating the same set of parameters, but groups these mediaqueries together at the bottom of the CSS file for output quality reasons.

Input

@media (min-width: 100px) {
  body {
    color: black;
  }
}
 
body {
  color: yellow;
}
 
@media (min-width: 100px) {
  body {
    color: green;
  }
}
 
@media (min-width: 100px) {
  body {
    color: red;
  }
}
 
@media (max-width: 300px) {
  body {
    color: orange;
  }
}
 
@media (min-width: 100px) {
  body {
    color: purple;
  }
}

Output

body {
  color: yellow;
}
 
@media (min-width: 100px) {
  body {
    color: black;
  }
 
  body {
    color: green;
  }
 
  body {
    color: red;
  }
 
  body {
    color: purple;
  }
}
 
@media (max-width: 300px) {
  body {
    color: orange;
  }
}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

Thanks

Thanks to ben-eb for lots of great PostCSS plugins to steal best practices from. And thanks to the original rework-move-media rework plugin for inspiration/direction/hints/love.

npm