title: PostCSS import not importing files inside @media query
body: <p>I am trying to have PostCSS import different files for different media queries however imports with media queries are not executed.</p>
  
  <p>Other imports work fine but ones inside of this are not imported.</p>
  
  <p>Example</p>
  
  <pre><code>@import "variables.css";
  
  h1 {font-family: var(--font-heading);}
  
  @media (--small-device){
    @import "detailed/small/base.css";
  }
  
  @media (--medium-device){
      @import "detailed/medium/base.css";
  }
  
  @media (large-device){
      @import "detailed/large/base.css";
  }
  </code></pre>
  
  <p>ends up being processed into</p>
  
  <pre><code>h1 {font-family: Arial;} /* Variables imported fine */
  
  @media (max-width: 600px){ /* postcss-custom-media working fine */
    @import "detailed/small/base.css"; /* why is this and the two below not imported? */
  }
  
  @media (max-width: 12600px){
      @import "detailed/medium/base.css";
  }
  
  @media (min-width: 1201px){
      @import "detailed/large/base.css";
  }
  </code></pre>
  
  <p>If I bring the import outside the import it is imported fine.%}</p>
  
  <pre><code>@import "variables.css";
  
  h1 {font-family: var(--font-heading);}
  
  @import "detailed/small/base.css";
  
  @media (--small-device) {}
  </code></pre>
  
  <p>ends up as</p>
  
  <pre><code>h1 {font-family: Arial;}
  
  .item {columns: 3} /* Imported base.css file, so paths are correct */
  
  @media (max-width: 600px){}
  </code></pre>
  
  <p>My postcss config:</p>
  
  <p>console.log("CSS changed. Processing...");</p>
  
  <pre><code>var postcss = require('postcss');
  var fs = require('fs');
  
  var postcss_import = require('import-postcss');
  var postcss_custom_media = require('postcss-custom-media');
  var postcss_css_variables = require('postcss-css-variables');
  var postcss_discard_comments = require('postcss-discard-comments');
  var postcss_autoprefixer = require('autoprefixer');
  var postcss_reporter = require('postcss-reporter');
  
  var options = {
      from: 'css/style.css',
      to: 'postcsstest/static/css/style.css',
      map: { inline: true }
  };
  
  var css = fs.readFileSync("css/style.css", "utf8");
  
  postcss([
      postcss_import,
      postcss_custom_media,
      postcss_css_variables,
      postcss_discard_comments,
      postcss_autoprefixer,
      postcss_reporter
  ])
  .process(css, options)
  .then(function (result) {
      fs.writeFileSync('postcsstest/static/css/style.css', result.css);
      console.log("CSS finished");
  }, function(error) {
      console.log(error);
      console.log("CSS error");
  });
  </code></pre>
  
  <p>Output from the reported doesnt mention this (only some empty imports).
  Is there a plugin or a rule I am not seeing about importing from within media queries?</p>