The custom
sortmethod (mobile-first / desktop-first) forcss-mqpackerorpleeease(which uses css-mqpacker) or, perhaps, something else ))
| Statements | Branches | Functions | Lines |
|---|---|---|---|
 |
 |
 |
 |
🇬🇧 English | 🇺🇦 Українська
https://github.com/hail2u/node-css-mqpacker is deprecated.
One of the alternative plugins may be - postcss-sort-media-queries
This package now is a part of the jss-plugin-sort-css-media-queries
npm install --save sort-css-media-queries
# or using yarn cli
yarn add sort-css-media-queriesSee the original docs at first https://www.npmjs.com/package/css-mqpacker#sort;
import sortCSSmq from 'sort-css-media-queries';
// your cool code
// ...
postcss([
mqpacker({
sort: sortCSSmq
})
]).process(css);The plugin will sort your media-queries according to the mobile-first methodology. The sequence of media requests:
-
min-widthandmin-heightfrom smallest to largest, -
max-widthandmax-heightfrom largest to smallest, -
min-device-widthandmin-device-heightfrom smallest to largest, -
max-device-widthandmax-device-heightfrom largest to smallest - media queries without dimension values, for example
print, tv, ..., - at the end:
printprint 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'import sortCSSmq from '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-widthandmax-heightfrom largest to smallest, -
max-device-widthandmax-device-heightfrom largest to smallest -
min-widthandmin-heightfrom smallest to largest, -
min-device-widthandmin-device-heightfrom smallest to largest, - media queries without dimension values,
tv, ..., - at the end:
printprint and (orientation: landscape)print and (orientation: portrait)
You can import a separate sorting helper from a package and create your own sorting method with config as needed:
import createSort from '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.
- type:
boolean | undefined - default value:
undefined