CSS MQpacker and sort-css-media-queries

sage
,
1

Hi all

I’m trying to include the css-mqpacker, and sort-css-media-queries postCSS plugins in my build config.

I’ve managed to get css mq-packer working by adding the below to my postcss.config.js inside the plugins {} part.

"css-mqpacker": true,

I’m not sure where to start with the sort css media queries plugin though, here are the docs:

I’d be very grateful for any help.

Thanks

2

Just a guess without testing - maybe try this:

"css-mqpacker": { sort: sortCSSmq }

instead of:

"css-mqpacker": true

(Make sure you also have sort-css-media-queries imported as sortCSSmq, of course.)

1 Like
3

Hey mmirus

Thanks - that worked!

I just added the below to the top of the file:

const sortCSSmq = require("sort-css-media-queries");

Thanks again

Joel

1 Like
4

I know it’s been a little while but just out of curiosity, what was the “the”? I just discovered mqpacker but am having trouble getting it working in sage…

Could you post your postcss.config.js? Thanks in advance :blush:

5

Hi wdeer - here you go. Sadly it looks like css mq-packer has been deprecated now so use with caution.

/* eslint-disable */

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
plugins: {
  cssnano: options.enabled.optimize ? cssnanoConfig : false,
  autoprefixer: true,
  "css-mqpacker": true,

},
  };
};
6

Thank you, I’ll test it out! but yeah I’m aware it’s been abandoned by the original developer, but others have stated its still working.

I also saw someone (hopefully still) intends to fork it and continue maintaining :crossed_fingers:

I’ll report back in this thread. Thanks again!