hail2u/node-css-mqpacker

Does not work well after update

alexander-akait opened this issue · 1 comments

I use postcss-loader latest version as postcss plugin.

https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L182

sortQueryLists(queryLists, opts.sort).forEach((queryList) => {
    console.log(queryList);
    css.append(queries[queryList]);
});

For v5:

(min-width: 480px) and (max-width: 767px)                         
(min-width: 480px)
screen and (min-width: 600px) and (max-width: 782px)
(min-width: 768px) and (max-width: 991px)
(min-width: 768px)
(min-width: 768px) and (max-width: 767px)
screen and (min-width: 782px)
(min-width: 783px)
(min-width: 1296px), (max-width: 1199px) and (min-width: 1096px), (max-width: 991px) and (min-width: 876px)
(min-width: 992px)
(min-width: 992px) and (max-width: 1199px)
(min-width: 1200px)
screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
screen and (-webkit-min-device-pixel-ratio: 0)
(max-width: 1199px)
(max-width: 767px)
screen and (min-width: 0 \0)
print
(-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx)
screen and (max-width: 1024px)
screen and (max-width: 767px)
(max-width: 479px)
(max-width: 991px)
(max-width: 600px)
(max-device-width: 480px) and (orientation: landscape)
(min-width: 0) and (max-width: 767px)
(min-width: 0) and (max-width: 767px) and (min-width: 480px)
(min-width: 0) and (max-width: 767px) and (min-width: 768px)
(min-width: 0) and (max-width: 767px) and (min-width: 992px)
(min-width: 0) and (max-width: 767px) and (min-width: 1200px)

For v6

print                                                             
(min-width: 768px)
(min-width: 992px)
(min-width: 1200px)
(min-width: 480px)
screen and (max-width: 767px)
screen and (-webkit-min-device-pixel-ratio: 0)
(max-width: 767px)
(min-width: 768px) and (max-width: 991px)
(min-width: 992px) and (max-width: 1199px)
(max-width: 479px)
(max-width: 991px)
(max-width: 600px)
(min-width: 783px)
(max-width: 1199px)
screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
screen and (min-width: 0 \0)
(min-width: 768px) and (max-width: 767px)
(-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx)
screen and (max-width: 1024px)
screen and (min-width: 600px) and (max-width: 782px)
screen and (min-width: 782px)
(min-width: 480px) and (max-width: 767px)
(min-width: 1296px), (max-width: 1199px) and (min-width: 1096px), (max-width: 991px) and (min-width: 876px)
(max-device-width: 480px) and (orientation: landscape)
(min-width: 0) and (max-width: 767px)
(min-width: 0) and (max-width: 767px) and (min-width: 480px)
(min-width: 0) and (max-width: 767px) and (min-width: 768px)
(min-width: 0) and (max-width: 767px) and (min-width: 992px)
(min-width: 0) and (max-width: 767px) and (min-width: 1200px)

I try to investigate why it is happens.

Oh very stupid error, with postcss v6 we should use:

require('css-mqpacker')().process(css, {}, { sort: true })