PostCSS plugin to switch code in CSS files.
Useful when you have shared css on your project and you need small style differences.
npm install postcss-switchExample with gulp and tailwindcss.
// gulpfile.jsgulp.task('buildcss',function(){returngulp.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:8px12px;
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:8px12px;
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:8px12px;
border-radius:4px;
color:#fff;
background-color: blue;
font-size:14px;
}How you change switch option in gulpfile is up to you.
Type: String
Default: undefined
The switch name.
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.