Skip to content
This repository has been archived by the owner on Oct 21, 2022. It is now read-only.

filamentgroup/postcss-media-query-optimizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⚠️ This project is archived and the repository is no longer maintained.

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

About

A postcss plugin that will optimize your media queries.

Resources

License

Stars

Watchers

Forks

Packages

No packages published