Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

The custom `sort` method (mobile-first / desktop-first) for the `postcss-sort-media-queries` and `css-mqpacker`, or possibly something else

License

NotificationsYou must be signed in to change notification settings

OlehDutchenko/sort-css-media-queries

Repository files navigation

typesnpmlicenseTestBuild Status

The customsort method (mobile-first / desktop-first) forcss-mqpacker orpleeease (which uses css-mqpacker) or, perhaps, something else ))

image

StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines

Table of Contents

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

Alternative tomqpacker

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 thejss-plugin-sort-css-media-queries

Installing

npm install --save sort-css-media-queries# or using yarn cliyarn add sort-css-media-queries

Usage

See the original docs at firsthttps://www.npmjs.com/package/css-mqpacker#sort;

importsortCSSmqfrom'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:

  1. min-width andmin-height from smallest to largest,
  2. max-width andmax-height from largest to smallest,
  3. min-device-width andmin-device-height from smallest to largest,
  4. max-device-width andmax-device-height from largest to smallest
  5. media queries without dimension values, for exampleprint, tv, ...,
  6. 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

importsortCSSmqfrom'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:

  1. max-width andmax-height from largest to smallest,
  2. max-device-width andmax-device-height from largest to smallest
  3. min-width andmin-height from smallest to largest,
  4. min-device-width andmin-device-height from smallest to largest,
  5. media queries without dimension values,tv, ...,
  6. at the end:
    • print
    • print and (orientation: landscape)
    • print and (orientation: portrait)

Sort configuration

You can import a separate sorting helper from a packageand create your own sorting method with config as needed:

importcreateSortfrom'sort-css-media-queries/lib/create-sort';constsortCSSmq=createSort({ ...configuration});

Or alternatively create asort-css-mq.config.json file in the root of your project.Or add propertysortCssMQ: {} in yourpackage.json.

By this configuration you can control sorting behaviour.

Configuration options

unitlessMqAlwaysFirst

  • type:boolean | undefined
  • default value:undefined

Project Info

About

The custom `sort` method (mobile-first / desktop-first) for the `postcss-sort-media-queries` and `css-mqpacker`, or possibly something else

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors9

[8]ページ先頭
©2009-2025 Movatter.jp