postcss-at-rules-variables

Why?

Install

$ npm install --save-dev postcss postcss-at-rules-variables

Usage

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var colorFunction = require('postcss-color-function');
var atImport = require('postcss-import');
var atEach = require('postcss-each');
var atVariables = require('postcss-at-rules-variables');
var atIf = require('postcss-conditionals');
var atFor = require('postcss-for');
var cssVariables = require('postcss-css-variables');
var nested = require('postcss-nested');
// CSS to be processed
var css = fs.readFileSync('css/input.css', 'utf8');
// Process CSS
var output = postcss()
 .use(atVariables({ /* atRules: ['media'] */ }))
 .use(colorFunction())
 .use(atEach())
 .use(atImport({
 plugins: [
 require('postcss-at-rules-variables')({ /* options */ }),
 require('postcss-import')
 ]
 }))
 .use(atFor())
 .use(atIf())
 .use(cssVariables())
 .use(nested())
 .process(css, {
 from: 'css/input.css'
 })
 .css;
console.log(output);

Example

/* input.css */
:root {
 --array: foo, bar, baz;
 --from: 1;
 --to: 3;
 --icon-exclude: 2;
 --color-danger: red;
 --nested-variable: color(var(--color-danger) a(90%)) ;
}
@each $val in var(--array) {
 @import "$val.css";
}

/* foo.css */
html {
 background-color: var(--color-danger);
 color: var(--nested-variable);
}

/* bar.css */
.some-class {
 color: #fff;
 @for $val from var(--from) to var(--to) {
 @if $val != var(--icon-exclude) {
 .icon-$val {
 background-position: 0 $(val)px;
 }
 }
 }
}

/* baz.css */
h1 {
 font-size: 24px;
}
@import "biz.css";

/* biz.css */
h2 {
 color: olive;
}

/* Output example */
html {
 background-color: red;
 color: rgba(255, 0, 0, 0.9);
}
.some-class {
 color: #fff;
}
.some-class .icon-1 {
 background-position: 0 1px;
}
.some-class .icon-3 {
 background-position: 0 3px;
}
h1 {
 font-size: 24px;
}
h2 {
 color: olive;
}

Options

atRules

variables

declarationByWalk