PostCSS plugin that enables @if statements in your CSS.

Installation

npm install postcss-conditionals

Usage

var fs = require('fs');
var postcss = require('postcss');
var conditionals = require('postcss-conditionals');
var css = fs.readFileSync('input.css', 'utf8');
var output = postcss()
  .use(conditionals)
  .process(css)
  .css;

Using this input.css:

.foo {
  @if 3 < 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

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