This repository was archived by the owner on Jun 6, 2022. It is now read-only.
This repository was archived by the owner on Jun 6, 2022. It is now read-only.
Media Queries not working #54
Description
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?