postcss-conditionals-renewed

1.0.0 • Public • Published

postcss-conditionals-renewed [![Build Status][ci-img]][ci]

[PostCSS] plugin that enables @if statements in your CSS.

Installation

npm install postcss postcss-conditionals-renewed

Usage

var fs = require('fs');
var postcss = require('postcss');
var conditionals = require('postcss-conditionals-renewed');

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

Package Sidebar

Install

npm i postcss-conditionals-renewed

Weekly Downloads

495

Version

1.0.0

License

MIT

Unpacked Size

62.5 kB

Total Files

10

Last publish

Collaborators

  • havunen