If you are used to write the media queries of your components within those components (what you should do instead of maintaining a large global media query file) you might end up with CSS that contains the same media query rule multiple times.
While this is totally fine in development (and supports a modular structure in particular when using Sass) it's not that good for production where you wanna keep your CSS as small as possible.
That's the use case this plugin is built for! It looks for equal media query rules and appends them combined.
npm install postcss-combine-media-query --save-dev
yarn add postcss-combine-media-query --dev
Simply add the plugin to your PostCSS config. That's all – easy as pie 😉 (there are no options)
If you're not familiar with using PostCSS you should read the official PostCSS documentation first.
Since this plugin moves all media queries to end of the file it may introduce bugs if your CSS is not well structured. So keep that in mind!
Let's say you've got the following code which results in
.foo being yellow on desktop.
Once you use this plugin it will change into
green because the media query has been moved.
Therefore it's recommended to use this plugin in development as well to detect such side effects sooner.
If this plugin is helpful to you it'll be great when you give me a star on github and share it. Keeps me motivated to continue the development.