PostCSS Sort Media Queries
English # O'zbek
PostCSS plugin for sorting and combining CSS media queries with mobile first / desktop first methodologies.
From v6.0.0 plugin supported nested media queries and ESM usage
Table of Contents
- Online demo
- Examples
- Mobile first sorting
- Desktop first sorting
- Install
- Usage
- Options
- sort
- Custom sort function
- Sort configuration
- Only Top Level
- Changelog
- License
- Other PostCSS plugins
- Thanks
Online demo
And here is the Online Demo
Examples
Mobile first sorting
Before
@media (min-width: 1200px) {}
@layer reset {
@media (min-width: 1200px) {
@media (min-width: 992px) {}
@media (min-width: 768px) {}
}
@media (min-width: 768px) {
@media (min-width: 640px) {}
@media (min-width: 320px) {}
}
}
After
@media (min-width: 768px) {
@media (min-width: 320px) {}
@media (min-width: 640px) {}
}
@media (min-width: 1200px) {
@media (min-width: 768px) {}
@media (min-width: 992px) {}
}
}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}
Desktop first sorting
Before
.header { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (width < 640px) {
.main { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (max-width: 760px) {
.footer { color: #cdcdcd }
}
@media screen and (max-width: 640px) {
.footer { color: #cdcdcd }
}
After
.footer { color: #cdcdcd }
}
@media screen and (width < 640px) {
/* combined */
.header { color: #cdcdcd }
.main { color: #cdcdcd }
.footer { color: #cdcdcd }
}
@media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
Install
First thing's, install the module:
npm install postcss postcss-sort-media-queries --save-dev
Usage
Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss" section in package.json
or postcss in bundle config.
let sortCssMq = require('postcss-sort-media-queries');
// ESM
import sortCssMq from 'postcss-sort-media-queries';
If you already use PostCSS, add the plugin to plugins list:
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: 'mobile-first', // default value
+ }),
require('autoprefixer')
]
}
or with custom sort function
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: function(a, b) {
+ // custom sorting function
+ }
+ }),
require('autoprefixer')
]
}
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Options
Sorting works based on OlehDutchenko/sort-css-media-queries function.
sort
This option support string or function values.
{string}'mobile-first'- (default) mobile first sorting{string}'desktop-first'- desktop first sorting{function}your own sorting function
'mobile-first'
sortMediaQueries({
sort: 'mobile-first' // default
})
]).process(css);
'desktop-first'
sortMediaQueries({
sort: 'desktop-first'
})
]).process(css);
Custom sort function
sortMediaQueries({
function(a, b) {
return a.localeCompare(b);
}
})
]).process(css);
In this example, all your media queries will sort by A-Z order.
This sorting function is directly passed to Array#sort() method of an array of all your media queries.
Sort configuration
By this configuration you can control sorting behaviour.
sortMediaQueries({
configuration: {
unitlessMqAlwaysFirst: true, // or false
}
})
]).process(css);
Or alternatively create a sort-css-mq.config.json file in the root of your project. Or add property sortCssMQ: {} in your package.json.
Changelog
See Releases history
License
Other PostCSS plugins
postcss-momentum-scrolling- plugin for adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS
Thanks
- Andrey Sitnik @ai
- Oleh Dutchenko @dutchenkoOleg
- Jakub Caban @Lustmored
- Dmytro Symonov @Kassaila
- Kai Falkowski @SassNinja
- Khayot Razzakov @Khayotbek1