postcss-media-query-optimizer

A postcss plugin that will optimize your media queries.

Features

• 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) {}

Limitations

• Only supports em and px 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).

Usage

Install from npm: postcss-media-query-optimizer

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

Gulp

TODO

Grunt

module.exports = function(grunt) {
	grunt.loadNpmTasks("grunt-postcss");

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

Run tests

npx ava

Credits

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