Open klase opened 5 years ago
@klase Hi, use postcss-at-rules-variables for at-rules because this feature in is the plans
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);
@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 👍
@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
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
The following does not compile properly (--container-max is set to 1200px):
Expected:
Result: