Media Queries not working

[waynehaffenden]

I have been pulling my hair out trying to get this working, I'm no doubt probably missing something here so hoping you can help me. I have the latest version of postcss-custom-media installed (v7.0.7) and here is my postcss.config.js file:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-custom-media': {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    },
    'cssnano': {
      autoprefixer: false
    }
  }
};

I've also been trying to use postcss-preset-env with the stage set to 1 and still no joy.

My CSS is as follows:

:root {
  @custom-media --breakpoint-xxl (min-width: 1920px);
  @custom-media --breakpoint-xl (min-width: 1680px) and (max-width: 1919px);
  @custom-media --breakpoint-l (min-width: 1280px) and (max-width: 1679px);
  @custom-media --breakpoint-m (min-width: 960px) and (max-width: 1279px);
  @custom-media --breakpoint-s (min-width: 640px) and (max-width: 959px);
  @custom-media --breakpoint-xs (min-width: 320px) and (max-width: 639px);
  @custom-media --breakpoint-xxs (max-width: 320px);
}

@media (--breakpoint-xxl) {
  /* do something */
}

They are just not being processed and are outputted in the resulting CSS file untouched. Any ideas?

[jonathantneal]

The issue here is that you put @custom-media in :root. You need to have them outside of that rule. That will resolve your issue.

[lukeify]

I got caught out by this too. Is there any reason, specification or otherwise, that these custom-media rules need to be specified outside of :root?