Does it work with @custom-media ?
sandrina-p opened this issue · comments
I'm using postcss-math with this example.
:root {
--breakpoint-xs: resolve(468 * 1 / 16)em /* -> 29.25em */
}
@custom-media --viewport-xs (width > 29.25em); /* it works */
@custom-media --viewport-xs (width > var(--breakpoint-xs) /* it doesn't work */
How can I make this work with @custom-media
?
@sandrina-p Hi, you need use options atRules
require('postcss-at-rules-variables')({ atRules: ['custom-media'] })
Hmm i tried that but it didn't work. It simple ignores that line.
My webpack postcss config is:
// PostCss plugins config
postcss() {
return [
require('postcss-at-rules-variables')({ atRules: ['mixin', 'custom-media'] }),
require('postcss-import'),
require('postcss-for'),
require('postcss-cssnext')({
features: {
customProperties: {
variables: theme,
},
calc: { preserve: true }
},
}),
require('postcss-mixins'),
require('postcss-simple-vars'),
require('postcss-conditionals'),
require('postcss-nested'),
require('postcss-math'),
];
},
What am I missing?
postcss-math
does not handle at rules. You need to place the plugins in the correct sequence.
return [
require('postcss-import'),
require('postcss-math'),
require('postcss-mixins'),
require('postcss-at-rules-variables')({ atRules: ['mixin', 'custom-media'] }),
require('postcss-for'),
require('postcss-cssnext')({
features: {
customProperties: {
variables: theme,
},
calc: { preserve: true }
},
}),
require('postcss-simple-vars'),
require('postcss-conditionals'),
require('postcss-nested'),
];
or use post-sequence or post-load-plugins
Nop, that doesn't work. It crashs when compiling... math need to be after nested
. I tried to move at-rules-variables
to the bottom of the list and it didn't work neither...
I know, so delete.
Need to look for the correct sequence, I will answer as soon as you analyze
@sandrina-p Hi, close this issue ?
It can be, but without solution :/