Repository files navigation

A postcss plugin that will optimize your media queries.

• Removes@media (max-width: 0) {} blocks
• Removes max < min:@media (min-width: 400px) and (max-width: 320px) {}
• Simplifies@media (min-width: 400px) and (min-width: 320px) {} to@media (min-width: 400px) {} (You probably don’t write this kind of code but for us it came from Mixin usage in SASS. Also, this solves an IE11 issue that uses the last*-width if multiple*-width’s exist).
• Simplifies@media (min-width: 0) {} to@media all {}
• Simplifies@media (min-width: 0) and (max-width: 400px) {} to@media (max-width: 400px) {}

• Only supportsem andpx units in media queries (for now).
• Future TODO: Does not yet optimize across comma separated (OR) expressions. Would be better if(min-width: 20em), (min-width: 30em) would simplify to(min-width: 20em).

Install from npm:postcss-media-query-optimizer

npm install postcss-media-query-optimizer --save-dev

TODO

module.exports = function(grunt) {grunt.loadNpmTasks("grunt-postcss");grunt.initConfig({postcss: {options: {processors: [require("../../Code/postcss-media-query-optimizer")()]},dist: {src: "**/*.css"}}// …});};

npx ava

• This plugin borrows heavily frompostcss-media-minmax.
• Uhh, a thing I found after I made this that performs a similar task:postcss-mq-optimize