README

postcss-switch

PostCSS plugin to switch code in CSS files.

Useful when you have shared css on your project and you need small style differences.

Installation

$ npm install @dimchtz/postcss-switch

Usage

Example with gulp and tailwindcss

// gulpfile.js
gulp.task('buildcss', function () {
    return gulp
        .src('./src/main.css')
        .pipe(
            postcss([
                require('postcss-import'),
                require('@dimchtz/postcss-switch')({
                    switch: process.env.SWITCH
                }),
                require('tailwindcss/nesting'),
                require('tailwindcss'),
                require('autoprefixer'),
                require('cssnano')()
            ])
        )
        .pipe(gulp.dest('./dist'));
});

.my-button {
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;

    @switch public {
        background-color: red;
        font-size: 16px;
    }

    @switch admin {
        background-color: blue;
        font-size: 14px;
    }
}

When switch in gulpfile is public the result css will be:

.my-button {
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;
    background-color: red;
    font-size: 16px;
}

When switch in gulpfile is admin the result css will be:

.my-button {
    display: inline-block;
    text-align: center;
    padding: 8px 12px;
    border-radius: 4px;
    color: #fff;
    background-color: blue;
    font-size: 14px;
}

How you change switch option in gulpfile is up to you.

Options

`switch`

Type: String
Default: undefined

The switch name.

CONTRIBUTING

⇄ Pull requests and ★ Stars are always welcome.
For bugs and feature requests, please create an issue.

@dimchtz/postcss-switch

Usage no npm install needed!