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 for css-mqpacker or pleeease (which uses css-mqpacker) or, perhaps, something else ))

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);

Warn

it's use es6 syntax

• ECMAScript 2015 (ES6) and beyond - https://nodejs.org/en/docs/es6/
• Node.js ES2015 Support - http://node.green/

Tests

• npm test for testing js code style and test sorting method
• npm run fix for automatically fix most of problems with js code style

Changelog

Please read CHANGELOG.md

Contributing

you know what to do - issues and pulls