I'm using Astro. Being able to use `importFrom` was a big deal. What is the workaround besides not upgrading to postcss-preset-env v8?

[romainmenke]

          I'm using Astro. Being able to use `importFrom` was a big deal. What is the workaround besides not upgrading to postcss-preset-env v8? 

My postcss config:

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [
    postcssPresetEnv({
      stage: 0,
      features: {
        "custom-media-queries": {
          importFrom: ["./src/styles/common/queries.css"],
        },
      },
      autoprefixer: true
    })
};

Originally posted by @djmtype in #822 (comment)

[romainmenke]

@djmtype This was discussed in detail here : #192

Is it possible to use @import url('./src/styles/common/queries.css') in CSS with Astro?

[djmtype]

@romainmenke while that was always possible, and it won't throw any errors, the media queries in that file aren't being applied. Maybe because I'm using custom media queries like @custom-media --viewport-sm (width >= 55rem) too, and they need to be transformed by postcss as well?

From my understanding those custom media queries needed to be loaded by postcss beforehand which is why importFrom worked. Even if I add these rules directly to my css file, it fails to recognize the custom media queries used within Astro's <style> tags .

[romainmenke]

There is a bug in whatever build/bundle tool you are using if they are not applied when using @import. Switching to postcss-import should be a valid workaround for that bug.

---

Our concern is what happens when postcss-preset-env decides not to run custom-media.
This will happen after the feature is shipped in browsers.

Removing importFrom was the only possible way forward.
It was a hack that should never have been added to the plugin.

---

For global styles that need to be known to component styles we are considering creating a new plugin :

#192 (reply in thread)

This would inject and expose CSS and remove it again at the end.
It would allow other features to hook into and depend on the shared CSS without bloating all files.

It allows you to configure your toolchain for what you know will come together on a single page in a browser.

This is not a polyfill and would never be part of postcss-preset-env.
It would be a dev tool to work around how certain frameworks process CSS.

[djmtype]

@romainmenke Thanks for the clarity. Much appreciated.

[mdmoreau]

Ran into this same issue and eventually came across https://www.npmjs.com/package/postcss-inject. It hasn't been updated in a few years, but seems to work perfectly in my limited testing.

[romainmenke]

@mdmoreau We don't advice using that plugin. It is indeed very outdated.
If you want something today you should look at this plugin : https://www.npmjs.com/package/postcss-custom-media-generator

[mdmoreau]

@romainmenke yeah fair enough - was looking for something to handle custom selectors as well unfortunately.

[mantismamita]

Hello, using svelte and having the same issue. I tried using @import url("./__customMedia.css"); in a global.css file but the media-queries are simply ignored. If I understand the plan correctly the idea would be to use postcss-global-data which is not yet created? Are there any other workarounds?

[Antonio-Laguna]

@mantismamita the only workaround for now is to import customMedia in every file

[mantismamita]

@mantismamita the only workaround for now is to import customMedia in every file

That's what I was afraid of 😢

[Antonio-Laguna]

@mantismamita Global data is not that far now ^