Skip to content
This repository has been archived by the owner. It is now read-only.
Adds support for if-statements to PostCSS
Yacc JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
parser.jison

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
You can’t perform that action at this time.