jss-plugin-sort-css-media-queries

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