Problem with Nested media queries #38
Description
Hi!
It think that I found problem in this plugin. CSS allows nesting at-rules. The plugin ignores this.
Problem
Minimum code example:
import postcss from 'postcss';
import sortMediaQueries from 'postcss-sort-media-queries';
let style = `
@media (min-width: 700px) {
.a {
color: #00FF00;
}
}
@media print {
@media (min-width: 700px) {
.b {
color: #FF0000;
}
}
}
`;
postcss([
sortMediaQueries({
sort: 'mobile-first'
})
])
.process(style)
.then(function(result) {
console.log(result.css);
});
Result:
@media (min-width: 700px) {
.a {
color: #00FF00;
}
.b {
color: #FF0000;
}
}
@media print {
@media (min-width: 700px) {
.b {
color: #FF0000;
}
}
}
But the code shouldn't have changed.
It's my case and I solved it with option in postcss-preset-env
features: {
'nesting-rules': true
}
My solution won't help with other at-rules. For example:
@media (min-width: 700px) {
.a {
color: #00FF00;
}
}
@supports (animation-name: test) {
@media (min-width: 700px) {
.b {
color: #FF0000;
}
}
}
My environment:
- node v14.16.1
- npm 7.19.1
- postcss: "8.3.5"
- postcss-sort-media-queries: "3.11.12"