Interoperability issue with postcss-custom-properties
dotnetCarpenter opened this issue · 3 comments
dotnetCarpenter commented
This is actually a cssnext issue but it's the interoperability between postcss-custom-properties
and postcss-custom-media
that fails. Not sure where the code change should be but posting this in all 3 repositories.
Using variables inside a media query doesn't get processed.
Test case: postcss -u postcss-cssnext var.css
<h1 class="mobile">MOBILE</h1>
<h1 class="desktop">DESKTOP</h1>
:root {
--with-var: 640px;
}
.desktop { display: none; }
@media screen and (min-width: var(--with-var)) {
.mobile {
display: none;
}
.desktop { display: block; }
}
Should output:
.desktop { display: none; }
@media screen and (min-width: 640px) {
.mobile {
display: none;
}
.desktop { display: block; }
}
Instead it outputs
Warning {
type: 'warning',
text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
line: 5,
column: 1,
node:
AtRule {
raws:
{ before: '\n',
between: ' ',
afterName: ' ',
semicolon: false,
after: '\n' },
type: 'atrule',
name: 'media',
parent: undefined,
source: { start: [Object], input: [Object], end: [Object] },
params: 'screen and (min-width: varundefined)',
nodes: [ [Object], [Object] ] },
plugin: 'postcss-custom-media' } 0 [ Warning {
type: 'warning',
text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
line: 5,
column: 1,
node:
AtRule {
raws: [Object],
type: 'atrule',
name: 'media',
parent: undefined,
source: [Object],
params: 'screen and (min-width: varundefined)',
nodes: [Object] },
plugin: 'postcss-custom-media' } ]
MoOx commented
Per spec it's not a bug.
dotnetCarpenter commented
point taken. Do you know why the editors haven't chosen to merge custom-properties with custom custom-media-queries?
MoOx commented
properties depend on the DOM tree, media don't (device).