# postcss-conditionals

> PostCSS plugin that enables @if statements in your CSS

Latest version **2.1.0** (published 2016-12-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-conditionals
pnpm add postcss-conditionals
yarn add postcss-conditionals
bun add postcss-conditionals
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2016-12-21 |
| First published | 2015-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Andy Jansson |
| Maintainers | andyjansson |
| Keywords | postcss, css, postcss-plugin, conditional, statement, if-statements, if-statement, if, else |

## Links

- npm: https://www.npmjs.com/package/postcss-conditionals
- Repository: https://github.com/andyjansson/postcss-conditionals
- Homepage: https://github.com/andyjansson/postcss-conditionals#readme
- Issues: https://github.com/andyjansson/postcss-conditionals/issues
- npm.io page: https://npm.io/package/postcss-conditionals

## Dependencies (3)

- [postcss](https://npm.io/package/postcss.md) ^5.0.4
- [css-unit-converter](https://npm.io/package/css-unit-converter.md) ^1.0.0
- [css-color-converter](https://npm.io/package/css-color-converter.md) ^1.0.2

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2016-12-21
- 3.0.0-beta.0 (next) — 2017-08-08
- 2.0.3 — 2016-11-10
- 2.0.2 — 2016-03-02
- 2.0.1 — 2016-01-20
- 2.0.0 — 2015-09-01
- 1.4.0 — 2015-09-01
- 1.3.1 — 2015-08-24
- 1.3.0 — 2015-08-19
- 1.2.0 — 2015-05-27
- 1.1.2 — 2015-05-26
- 1.1.1 — 2015-05-18
- 1.0.0 — 2015-05-05

## README

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

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

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/andyjansson/postcss-conditionals.svg
[ci]:      https://travis-ci.org/andyjansson/postcss-conditionals

## Installation

```js
npm install postcss-conditionals
```

## Usage

```js
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```:

```css
.foo {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}
```

you will get:

```css
.foo {
  background: green;
}
```

Also works well with [postcss-simple-vars]:

```css
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
```
[postcss-simple-vars]: https://github.com/postcss/postcss-simple-vars

and with [postcss-for]:

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

[postcss-for]: https://github.com/antyakushev/postcss-for

## 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`

---
_Source: https://npm.io/package/postcss-conditionals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._