PostCSS import not importing files inside @media query

I am trying to have PostCSS import different files for different media queries however imports with media queries are not executed.

Other imports work fine but ones inside of this are not imported.

Example

@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";
}

ends up being processed into

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";
}

If I bring the import outside the import it is imported fine.%}

@import "variables.css";

h1 {font-family: var(--font-heading);}

@import "detailed/small/base.css";

@media (--small-device) {}

ends up as

h1 {font-family: Arial;}

.item {columns: 3} /* Imported base.css file, so paths are correct */

@media (max-width: 600px){}

My postcss config:

console.log("CSS changed. Processing...");

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");
});

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?

Solution

Have you checked the documentation?

Looks like you should use

@import "detailed/small/base.css" (--small-device);

But please consider component-based css structures. In most cases, including media queries in separate files makes support extremely complicated for other developers.

My best advise would be to have short mixins and sass syntax (with SugarSS)

=r($width)
  @media only screen and (max-width: $width+ "px")
    @content

=rmin($width)
  @media only screen and (min-width: $width+ "px")
    @content

So, you can use

+r(--mobile)
  some: property

SCSS/postcss native is good too