Notoriously Punctual Manatee

    sort-css-media-queries
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    sort-css-media-queries

    types npm license Test Build Status

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

    image

    Statements Branches Functions Lines
    Statements Branches Functions Lines

    Table of Contents

    English | Русский язык

    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;

    const sortCSSmq = require('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 and min-height from smallest to largest,
    2. max-width and max-height from largest to smallest,
    3. min-device-width and min-device-height from smallest to largest,
    4. max-device-width and max-device-height from largest to smallest
    5. media queries without dimension values, for example print, 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

    const sortCSSmq = require('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 and max-height from largest to smallest,
    2. max-device-width and max-device-height from largest to smallest
    3. min-width and min-height from smallest to largest,
    4. min-device-width and min-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 package and create your own sorting method with config as needed:

    const createSort = require("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

    Install

    npm i sort-css-media-queries

    DownloadsWeekly Downloads

    114,650

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • dutchenkooleg