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 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('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.

Changelog

License