Adds support for if-statements to PostCSS
Yacc JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 52af192 Jun 12, 2017
Permalink
Failed to load latest commit information.
src Rewrite in ES2015 Jun 11, 2017
.babelrc Rewrite in ES2015 Jun 11, 2017
.gitignore Rewrite in ES2015 Jun 11, 2017
.npmignore Initial commit May 5, 2015
.travis.yml Rewrite in ES2015 Jun 11, 2017
CHANGELOG.md Rewrite in ES2015 Jun 11, 2017
LICENSE Initial commit May 5, 2015
README.md Add gen-parser npm task Dec 20, 2016
package.json Rewrite in ES2015 Jun 11, 2017
parser.jison Rewrite in ES2015 Jun 11, 2017

README.md

postcss-conditionals Build Status

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

  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