FYI Using variables inside a query query doesn't get processed

[dotnetCarpenter]

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]

Per spec it's not a bug.