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*-widthif 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
emandpxunits 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