postcss-custom-media source code?

[azat-io]

Current postcss-custom-media package version is 9.0.1:
https://www.npmjs.com/package/postcss-custom-media

However, only the source code for version 8.0.2 is available in the current repository:
https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media

Can you give me a link to the correct repository?

[Antonio-Laguna]

Hey @azat-io thanks for reaching out!

We recently added this section to the README hoping it would help with these questions. The link you're looking for is this one: https://github.com/csstools/postcss-plugins/tree/postcss-preset-env--v8/plugins/postcss-custom-media

Same repo, just another branch since there's a lot of work that we're slowly releasing as Alpha for PostCSS Preset Env to give enough time to migrate.

Please let us know if you find any issues!

[azat-io]

@Antonio-Laguna Thanks.
Is there any way to define global media queries? Some alternative to importFrom option from v8.0.2

[Antonio-Laguna]

@azat-io the way I handle this whenever I use this (or any of the custom plugins) is to have them in a file and then use postcss-import to handle a single entry.

For example:

variables.css

/* Media Queries */
@custom-media --bp-xsmall ( min-width: 20em ); /* 320px */
@custom-media --bp-small ( min-width: 39.75em ); /* 636px */
@custom-media --bp-normal ( min-width: 54em ); /* 848px */
@custom-media --bp-medium ( min-width: 64em ); /* 1024px */
@custom-media --bp-large ( min-width: 81em ); /* 1296px */

Then have

styles.css

@import 'variables.css';
@import 'body.css';

And within body.css:

body {
  @media (--bp-large) {
    background-color: #222;
  }
}

This is obviously just an example but I hope it makes the point so you can see what I'm hinting.

[azat-io]

Thanks!