Using custom media inside @each produces incorrect result

[kuserich]

Hi guys, I would like to report an issue with postcss-custom-media that occurs in conjunction with postcss-each in PostCSS 8.0. It seems that @custom-medias that are used inside an @each loop are not properly translated and the CSS result includes the names of the @custom-medias rather than their content.

Processing

/* style.css */
@custom-media --mobile-only (max-width: 767px);
@custom-media --tablet-only (min-width: 768px) and (max-width: 959px);
@custom-media --desktop-only (min-width: 960px) and (max-width: 1151px);
@custom-media --widescreen-only (min-width: 1152px) and (max-width: 1343px);
@custom-media --ultra-widescreen-only (min-width: 1344px);

@each $item in widescreen, desktop, tablet, mobile {
    @media (--$(item)-only) {
        .hide-$(item) {
             display: none;
        }
    }
}

with only

/* postcss.config.js */
module.exports = () => ( {
    plugins: [
        require('postcss-each'),
        require('postcss-custom-media'),
    ],
} );

results in

/* output.css */
@media (--widescreen-only) {
    .hide-widescreen {
        display: none;
    }
}
@media (--desktop-only) {
    .hide-desktop {
        display: none;
    }
}
@media (--tablet-only) {
    .hide-tablet {
        display: none;
    }
}
@media (--mobile-only) {
    .hide-mobile {
        display: none;
    }
}

when using

/* package.json */
"devDependencies": {
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "postcss-custom-media": "^8.0.0",
    "postcss-each": "^1.0.0"
}

---

With previous package versions and PostCSS 7, this is working nicely and returns

@media (min-width: 1152px) and (max-width: 1343px) {
    .hide-widescreen {
        display: none
    }
}
@media (min-width: 960px) and (max-width: 1151px) {
    .hide-desktop {
        display: none
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    .hide-tablet {
        display: none
    }
}
@media (max-width: 767px) {
    .hide-mobile {
        display: none
    }
}

[wtser]

you should downgrade postcss-each to v0.10.0, it will works as you wish. (and you can using the latest version of postcss)

[romainmenke]

@kuserich We just shipped a new version (v8.0.1) and this might resolve your issue. Could you try it out and let us know if it's still causing problems?

[kuserich]

@kuserich We just shipped a new version (v8.0.1) and this might resolve your issue. Could you try it out and let us know if it's still causing problems?

Thank you for following up on this, @romainmenke . I'm afraid that we're not using PostCSS anymore. Nevertheless, you would be able to verify the functionality of the new version of your package by running the example from above.