Package Exports

jss-plugin-sort-css-media-queries

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jss-plugin-sort-css-media-queries) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jss-plugin-sort-css-media-queries

JSS plugin for sort CSS media queries

Install

npm i jss-plugin-sort-css-media-queries

Plugin options

`desktopFirst`

type: boolean
default: false

By default, plugin is using mobileFirst methodology for sorting CSS Media Queries.
By this option you can change behavior to the desktopFirst methodology.

`combineMediaQueries`

type: boolean
default: false

You can combine similar CSS Media Queries rules into the one block.

import jss from 'jss';
jss.use(sortCssMediaQueries());

const sheet = jss.createStyleSheet({
    button: {
        width: 100,
        '@media (min-width: 600px)': {
            width: 150
        }
    },
    span: {
        color: 'blue',
        '@media (min-width: 600px)': {
            width: 'yellow'
        }
    }
});

Result without combineMediaQueries

button {
    width: 100px;
}

span {
    color: blue;
}

@media (min-width: 600px) {
    button {
        width: 150px;
    }
}

@media (min-width: 600px) {
    span {
        color: yellow;
    }
}

Result with combineMediaQueries: true

button {
    width: 100px;
}

span {
    color: blue;
}

@media (min-width: 600px) {
    button {
        width: 150px;
    }

    span {
        color: yellow;
    }
}

How it works

Unfortunately, I have not found a more correct method of influencing the sorting of the list of rules than how to modify the RuleList::toString() method.
That is a wrong way from the architecture OOP principles, but it is the most non-breaking way for the whole JSS workflow.
After calling .toString() method JSS work is done and in this point I can make own job with sorting, combining and returning CSS output.

Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License