PostCSS Fallback

PostCSS plugin to provide fallback values for properties without having duplicate declarations.

Works great with the stylelint rule-no-duplicate-properties rule.

Changelog

Install

npm install postcss-fallback --save-dev

Usage

Basic Example

var postcss = require('postcss');
var fallback = require('postcss-fallback');
 
var fs = require('fs');
 
var mycss = fs.readFileSync('input.css', 'utf8');
 
// Process your CSS with postcss-fallback
var output = postcss([
        fallback(/*options*/)
    ])
    .process(mycss)
    .css;
 
console.log(output);

Input:

.foo {
    display: fallback(flex, inline-block);
    width: fallback(45vh, 450px);
 
    background-color: fallback(rgba(0, 0, 0, 0.5), #555555);
    foo: fallback(bar, baz, qux, corge);
}

Output:

.foo {
    display: inline-block;
    display: flex;
    width: 450px;
    width: 45vh;
 
    background-color: #555555;
    background-color: rgba(0, 0, 0, 0.5);
    foo: corge;
    foo: qux;
    foo: baz;
    foo: bar;
}

Options

• keyword: string - The fallback function keyword.
  • Default: 'fallback'

Testing

npm test