postcss-conditionals

PostCSS plugin that enables @if statements in your CSS.

Installation

npminstallpostcss-conditionals

Usage

varfs=require('fs');varpostcss=require('postcss');varconditionals=require('postcss-conditionals');varcss=fs.readFileSync('input.css','utf8');varoutput=postcss().use(conditionals).process(css).css;

Using this input.css:

.foo {
@if3 < 5 {
background: green;
}
@else {
background: blue;
}
}

you will get:

.foo {
background: green;
}

Also works well with postcss-simple-vars:

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}

and with postcss-for:

@for $i from 1 to 3 {
.b-$i {
width: $i px;
@if $i == 2 {
color: green;
}
}
}

Development

1. Clone repository
2. Install dependencies npm install
3. If parser.jison file has been changed, regenerate parser.js by running npm run gen-parser