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

PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.

License

NotificationsYou must be signed in to change notification settings

yunusga/postcss-sort-media-queries

Repository files navigation

npmNode.js CIlicensenpm

🌏English ▫O'zbek

PostCSS plugin for sorting and combining CSS media queries withmobile first /desktop first methodologies.

From 5.0.0 plugin supportMedia Feature Types: “range”

Table of Contents

Online demo

And here is theonline demo

Examples

Mobile first sorting

before

@media screenand (max-width:640px) {  .head {color:#cfcfcf }}@media screenand (max-width:768px) {  .footer {color:#cfcfcf }}@media screenand (max-width:640px) {  .main {color:#cfcfcf }}@media screenand (min-width:1280px) {  .mobile-first {color:#cfcfcf }}@media screenand (width> 640px) {  .mobile-first {color:#cfcfcf }}@media screenand (max-width:640px) {  .footer {color:#cfcfcf }}

after

@media screenand (width> 640px) {  .mobile-first {color:#cfcfcf }}@media screenand (min-width:1280px) {  .mobile-first {color:#cfcfcf }}@media screenand (max-width:768px) {  .footer {color:#cfcfcf }}@media screenand (max-width:640px) {/* combined */  .head {color:#cfcfcf }  .main {color:#cfcfcf }  .footer {color:#cfcfcf }}

Desktop first sorting

before

@media screenand (width < 640px) {  .header {color:#cdcdcd }}@media screenand (min-width:760px) {  .desktop-first {color:#cdcdcd }}@media screenand (width < 640px) {  .main {color:#cdcdcd }}@media screenand (min-width:1280px) {  .desktop-first {color:#cdcdcd }}@media screenand (max-width:760px) {  .footer {color:#cdcdcd }}@media screenand (max-width:640px) {  .footer {color:#cdcdcd }}

after

@media screenand (max-width:760px) {  .footer {color:#cdcdcd }}@media screenand (width < 640px) {/* combined */  .header {color:#cdcdcd }  .main {color:#cdcdcd }  .footer {color:#cdcdcd }}@media screenand (min-width:760px) {  .desktop-first {color:#cdcdcd }}@media screenand (min-width:1280px) {  .desktop-first {color:#cdcdcd }}

Install

First thing's, install the module:

npm install postcss postcss-sort-media-queries --save-dev

Usage

Check you project for existed PostCSS config:postcss.config.jsin the project root,"postcss" section inpackage.jsonorpostcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {  plugins: [+   require('postcss-sort-media-queries')({+     sort: 'mobile-first', // default value+   }),    require('autoprefixer')  ]}

or with custom sort function

module.exports = {  plugins: [+   require('postcss-sort-media-queries')({+     sort: function(a, b) {+        // custom sorting function+     }+   }),    require('autoprefixer')  ]}

If you do not use PostCSS, add it according toofficial docsand set this plugin in settings.

Options

Sorting works based onOlehDutchenko/sort-css-media-queries function.

sort

This option supportstring orfunction values.

  • {string}'mobile-first' - (default) mobile first sorting
  • {string}'desktop-first' - desktop first sorting
  • {function} your own sorting function

'mobile-first'

postcss([sortMediaQueries({sort:'mobile-first'// default})]).process(css);

'desktop-first'

postcss([sortMediaQueries({sort:'desktop-first'})]).process(css);

Custom sort function

postcss([sortMediaQueries({function(a,b){returna.localeCompare(b);}})]).process(css);

In this example, all your media queries will sort by A-Z order.

This sorting function is directly passed to Array#sort() method of an array of all your media queries.

Sort configuration

By this configuration you can control sorting behaviour.

postcss([sortMediaQueries({configuration:{unitlessMqAlwaysFirst:true,// or false}})]).process(css);

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

Only Top Level

Sort only top level media queries to prevent eject nested media queries from parent node

postcss([sortMediaQueries({onlyTopLevel:true,})]).process(css);

Changelog

SeeReleases history

License

MIT

Other PostCSS plugins

  • postcss-momentum-scrolling - plugin for addingmomentum style scrolling behavior (-webkit-overflow-scrolling:touch) for elements with overflow (scroll, auto) on iOS

Thanks

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