🌏 English ▫ O'zbek
PostCSS plugin for sorting and combining CSS media queries with mobile first / desktop first methodologies.
From 5.0.0 plugin support Media Feature Types: “range”
And here is the online demo
before
@media screen and (max-width: 640px) { .head { color: #cfcfcf } } @media screen and (max-width: 768px) { .footer { color: #cfcfcf } } @media screen and (max-width: 640px) { .main { color: #cfcfcf } } @media screen and (min-width: 1280px) { .mobile-first { color: #cfcfcf } } @media screen and (width > 640px) { .mobile-first { color: #cfcfcf } } @media screen and (max-width: 640px) { .footer { color: #cfcfcf } }after
@media screen and (width > 640px) { .mobile-first { color: #cfcfcf } } @media screen and (min-width: 1280px) { .mobile-first { color: #cfcfcf } } @media screen and (max-width: 768px) { .footer { color: #cfcfcf } } @media screen and (max-width: 640px) { /* combined */ .head { color: #cfcfcf } .main { color: #cfcfcf } .footer { color: #cfcfcf } }before
@media screen and (width < 640px) { .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
@media screen and (max-width: 760px) { .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 } }First thing's, install the module:
npm install postcss postcss-sort-media-queries --save-dev Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.
If you already use PostCSS, add the plugin to plugins list:
module.exports = { plugins: [ + require('postcss-sort-media-queries')({ + sort: 'mobile-first', // default value + }), require('autoprefixer') ] }or with custom sort function
module.exports = { 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.
Sorting works based on OlehDutchenko/sort-css-media-queries function.
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
postcss([ sortMediaQueries({ sort: 'mobile-first' // default }) ]).process(css);postcss([ sortMediaQueries({ sort: 'desktop-first' }) ]).process(css);postcss([ 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.
By this configuration you can control sorting behaviour.
postcss([ 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.
Sort only top level media queries to prevent eject nested media queries from parent node
postcss([ sortMediaQueries({ onlyTopLevel: true, }) ]).process(css);See Releases history
postcss-momentum-scrolling- plugin for adding momentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS
- Andrey Sitnik @ai
- Oleh Dutchenko @dutchenkoOleg
- Jakub Caban @Lustmored
- Dmytro Symonov @Kassaila
- Kai Falkowski @SassNinja
- Khayot Razzakov @Khayotbek1