sort-css-media-queries
The custom
sort
method (mobile-first / desktop-first) forcss-mqpacker
orpleeease
(which uses css-mqpacker) or, perhaps, something else ))
Statements | Branches | Functions | Lines |
---|---|---|---|
Table of Contents
🇬🇧 English | 🇺🇦 Українська
mqpacker
Alternative to https://github.com/hail2u/node-css-mqpacker is deprecated.
One of the alternative plugins may be - postcss-sort-media-queries
Available in CSS-in-JS 🚀
This package now is a part of the jss-plugin-sort-css-media-queries
Installing
npm install --save sort-css-media-queries
# or using yarn cli
yarn add sort-css-media-queries
Usage
See the original docs at first https://www.npmjs.com/package/css-mqpacker#sort;
const sortCSSmq = require('sort-css-media-queries');
// your cool code
// ...
postcss([
mqpacker({
sort: sortCSSmq
})
]).process(css);
mobile-first
The plugin will sort your media-queries according to the mobile-first methodology. The sequence of media requests:
min-width
andmin-height
from smallest to largest,max-width
andmax-height
from largest to smallest,min-device-width
andmin-device-height
from smallest to largest,max-device-width
andmax-device-height
from largest to smallest- media queries without dimension values, for example
print, tv, ...
, - at the end:
print
print and (orientation: landscape)
print and (orientation: portrait)
Example
Media-queries list:
// min-width/-height -> from smallest to largest
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
// device
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
// max-width/-height <- from largest to smallest
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
// no units
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'print',
'tv'
Sort result:
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
'print',
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'tv'
desktop-first
const sortCSSmq = require('sort-css-media-queries');
// your cool code
// ...
postcss([
mqpacker({
sort: sortCSSmq.desktopFirst
})
]).process(css);
The plugin will sort your media-queries according to the desktop-first methodology. The sequence of media requests:
max-width
andmax-height
from largest to smallest,max-device-width
andmax-device-height
from largest to smallestmin-width
andmin-height
from smallest to largest,min-device-width
andmin-device-height
from smallest to largest,- media queries without dimension values,
tv, ...
, - at the end:
print
print and (orientation: landscape)
print and (orientation: portrait)
Sort configuration
You can import a separate sorting helper from a package and create your own sorting method with config as needed:
const createSort = require("sort-css-media-queries/lib/create-sort");
const sortCSSmq = createSort({ ...configuration });
Or alternatively create a sort-css-mq.config.json
file in the root of your project.
Or add property sortCssMQ: {}
in your package.json
.
By this configuration you can control sorting behaviour.
Configuration options
unitlessMqAlwaysFirst
- type:
boolean | undefined
- default value:
undefined