sort-css-media-queries

What is sort-css-media-queries?

The sort-css-media-queries npm package is designed to help developers sort CSS media queries in a specific order. This can be particularly useful for ensuring that media queries are applied in the correct sequence, which can help avoid issues with CSS specificity and cascading.

What are sort-css-media-queries's main functionalities?

Sort Media Queries

This feature allows you to sort an array of CSS media queries in a specific order. The code sample demonstrates how to use the sort-css-media-queries package to sort an array of media queries.

const sortCSSmq = require('sort-css-media-queries');

const mediaQueries = [
  '@media (min-width: 768px)',
  '@media (max-width: 600px)',
  '@media (min-width: 1024px)',
];

const sortedMediaQueries = mediaQueries.sort(sortCSSmq);
console.log(sortedMediaQueries);

Other packages similar to sort-css-media-queries

css-mqpacker

css-mqpacker is a PostCSS plugin that packs same CSS media query rules into one media query rule. It helps in optimizing CSS by merging media queries, which can reduce the size of the CSS file. Unlike sort-css-media-queries, which focuses on sorting, css-mqpacker focuses on merging media queries.

postcss-sort-media-queries

postcss-sort-media-queries is a PostCSS plugin that sorts media queries in a specific order. It is similar to sort-css-media-queries in that it also focuses on sorting media queries, but it is designed to be used as a PostCSS plugin, making it more suitable for projects that already use PostCSS.

README

sort-css-media-queries

The custom sort method (mobile-first / desktop-first) for css-mqpacker or pleeease (which uses css-mqpacker) or, perhaps, something else ))

Statements	Branches	Functions	Lines

Table of Contents

🇬🇧 English | 🇺🇦 Українська

• sort-css-media-queries
  • Table of Contents
  • Alternative to mqpacker
  • Available in CSS-in-JS 🚀
  • Installing
  • Usage
    • mobile-first
    • desktop-first
  • Sort configuration
    • Configuration options
      • unitlessMqAlwaysFirst
  • Project Info

Alternative to mqpacker

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;

import sortCSSmq from '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 and min-height from smallest to largest,
• max-width and max-height from largest to smallest,
• min-device-width and min-device-height from smallest to largest,
• max-device-width and max-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

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-width and max-height from largest to smallest,
• max-device-width and max-device-height from largest to smallest
• min-width and min-height from smallest to largest,
• min-device-width and min-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:

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.

Configuration options

unitlessMqAlwaysFirst

• type: boolean | undefined
• default value: undefined

Project Info

• Release notes
• Contributor Covenant Code of Conduct
• License MIT