can make multiple custom-media work together?

[tx0c]

I have multiple custom-media defined, some for height and some for widths,

@custom-media --md-up (min-width: 1024px);
...
@custom-media --h-md-up (min-height: 800px);

and each have individual use cases, and there are corner cases I want to apply

@media (--md-up) and (--h-md-up) {       // but this does not work
  ...
}

then I tried:

@media (--md-up) and (min-height: 800px) {       // this works
  ...
}

then I think this would probably work, but this would lead to too many combinations not very flexible;

@custom-media --wh-md-up (min-width: 1024px) and (min-height: 800px);

so, can make this work?

@media (--md-up) and (--h-md-up) {

[wesleyboar]

I use two custom medias together successfully. I am using v8.0.0 of this plugin.

The only difference I think might be relevant in my usage is syntax height >= 800px[^1] instead of min-height: 800px.

When your attempt "does not work", what happens? (Output is still @media (--md-up) and (--h-md-up) {?)

(truncated snippets of my working usage)

Input

...
@custom-media --medium-and-above (width >= 992px);
...
@custom-media --max-wide-and-below (width < 2400px);
...

@media only screen and (--medium-and-above) and (--max-wide-and-below) {
    ...
}

Output

@media only screen and (min-width: 992px) and (max-width: 2399px) {
    ...
}

[^1]: Supported via postcss-preset-env feature media-query-ranges (which I think is postcss-media-minmax under the hood).

[romainmenke]

@tx0c

We just released a new version (v8.0.1) and we think it now works correctly :

@custom-media --md-up (min-width: 1024px);
@custom-media --h-md-up (min-height: 800px);


@media (--md-up) and (--h-md-up) {
	.foo {
		order: 1000;
	}
}

becomes :

@media (min-width: 1024px) and (min-height: 800px) {
	.foo {
		order: 1000;
	}
}

Can you confirm if it is fixed for you?