Is it possible to interpolate values for custom media?

Question

Is it possible to interpolate values for custom media?

comatory opened this issue 4 years ago · 4 comments

comatory commented 4 years ago

Is there a way to change this:

@custom-media --small-viewport (max-width: 30em);

to this?

@custom-media --small-viewport (max-width: var(--my-custom-max-width));

I'm creating a component library with provided stylesheets and expose variables, this would be better for code re-use.

Answer 1 · 2021-03-25T17:47:41.000Z

@comatory Unfortunately, no

Answer 2 · 2021-03-25T18:18:04.000Z

I see it's not possible with CSS spec. However could this be a feature of this plugin? Would it be possible to replace variables when given some source of those variables?

Answer 3 · 2022-01-07T14:27:44.000Z

If it's not part of the CSS spec, which this plugin is trying to follow, then it shouldn't implement it, IMO.

However, I think it'd be suuuper nice if the plugin could catch @custom-media definitions with var(-- in it and warn about them in the dev console saying that they won't work (possibly with a link to this issue to explain it).

Answer 4 · 2022-01-07T14:30:56.000Z

However, I think it'd be suuuper nice if the plugin could catch definitions with `var(--` in it and warn about it in the dev console, that it won't work (possibly with a link to this issue to explain it).

I agree.