Skip to content

DimChtz/postcss-switch

Repository files navigation

PostCSS Switch PostCSS

GitHub Actions Workflow Status NPM Version NPM Downloads NPM License

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.