Using variable inside @media conditional not working

[klase]

The following does not compile properly (--container-max is set to 1200px):

@media (min-width: var(--container-max)) {
...
}

Expected:

@media (min-width: 1200px) {
...
}

Result:

@media (min-width: var(--container-max)) {
...
}

[Scrum]

@klase Hi, use postcss-at-rules-variables for at-rules because this feature in is the plans

[MadLittleMods]

Thanks for the plugin suggestion @Scrum. Haven't tried but looks like you can run them together for now.

Seems like something this plugin could support as well if someone wants to submit a pull request 🤔

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');
var atVariables = require('postcss-at-rules-variables');

var fs = require('fs');

var mycss = fs.readFileSync('input.css', 'utf8');

// Process your CSS with postcss-css-variables
var output = postcss([
		cssvariables(/*options*/),
		atVariables({ /* atRules: ['media'] */ })
	])
	.process(mycss)
	.css;

console.log(output);

[Scrum]

@MadLittleMods Hi, It is more correct to use the atVariables plugin before the cssvariables plugin. there can be different iterations

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');
var atVariables = require('postcss-at-rules-variables');

var fs = require('fs');

var mycss = fs.readFileSync('input.css', 'utf8');

// Process your CSS with postcss-css-variables
var output = postcss([
		atVariables({ /* atRules: ['media'] */ })
		cssvariables(/*options*/),
	])
	.process(mycss)
	.css;

console.log(output);

Seems like something this plugin could support as well if someone wants to submit a pull request 🤔

we can install the Assignees on me and i will make as soon as time appears 👍

[MadLittleMods]

@Scrum I can't assign a non-collaborator 😬

Just curious, why is it better to have postcss-at-rules-variables run first? It looks like it gets rid of the variable declarations that postcss-css-variables uses and I don't see a preserve option

[Scrum]

I can't assign a non-collaborator

ups ))

It looks like it gets rid of the variable declarations that postcss-css-variables uses and I don't see a preserve option

No, you can see the tests

Just curious, why is it better to have postcss-at-rules-variables run first?

Now I can not remember the case in which it was necessary