Variables in @media not working
pestbarn opened this issue · comments
I'm using PostCSS with Parcel (v1.12.4)
Input:
h3 {
font-size: 1.625rem;
@media screen and (max-width: var(--mobile-screen)) {
font-size: 1.125rem;
}
}
Output:
h3 {
font-size: 1.625rem;
}
@media screen and (max-width: var(--mobile-screen)) {
h3 {
font-size: 1.125rem
}
}
postcss.config.js:
module.exports = {
modules: false,
plugins: [
require('postcss-nested'),
require('autoprefixer'),
require('postcss-custom-properties'),
require('postcss-hexrgba'),
require('postcss-at-rules-variables'),
require('postcss-css-variables')({
variables: {
'--mobile-screen': '768px'
}
})
]
};
I've also tried declaring the variable in a regular :root
block, but with the same result. Requiring postcss-at-rules-variables
after postcss-css-variables
makes no difference either.
@pestbarn Hi, you made a mistake by installing options to the wrong plugin.
should work for you
module.exports = {
modules: false,
plugins: [
require('postcss-nested'),
require('autoprefixer'),
require('postcss-custom-properties'),
require('postcss-hexrgba'),
require('postcss-at-rules-variables')({
variables: {
'--mobile-screen': '768px'
}
}),
require('postcss-css-variables')()
]
};
have a good day and mood 😄
@Scrum Ah yes, that would of course make sense, my bad. However, simply moving it doesn't seem to work either - it still renders out as @media screen and (max-width: var(--mobile-screen))
.
Edit: Solved it. If I add atRules: ['media']
to the options object, it magically started working. Very strange, but at least it's up and running now. Thanks!
(for reference if anyone needs it):
module.exports = {
modules: false,
plugins: [
require('postcss-nested'),
require('autoprefixer'),
require('postcss-custom-properties'),
require('postcss-hexrgba'),
require('postcss-at-rules-variables')({
atRules: ['media'],
variables: {
'--mobile-screen': '768px'
}
}),
require('postcss-css-variables')({
preserve: true,
variables: {
'--other-variable': 'Noto Sans',
'--another-variable': 'Noto Serif',
}
})
]
};