Media Queries not working
waynehaffenden opened this issue · 2 comments
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?
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.
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
?