JSS plugin for sort CSS media queries
npm i jss-plugin-sort-css-media-queries
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.
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;
}
}
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.
Please fill free to create issues or send PR