https://github.com/dimchtz/postcss-switch
PostCSS plugin to switch code in CSS files.
https://github.com/dimchtz/postcss-switch
Last synced: about 1 year ago
JSON representation
PostCSS plugin to switch code in CSS files.
- Host: GitHub
- URL: https://github.com/dimchtz/postcss-switch
- Owner: DimChtz
- License: mit
- Created: 2024-03-11T16:03:12.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-16T23:48:06.000Z (about 2 years ago)
- Last Synced: 2025-03-03T18:15:27.303Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 225 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Switch [
](https://github.com/postcss/postcss)
   
[PostCSS](https://github.com/postcss/postcss) plugin to switch code in CSS files.
Useful when you have shared css on your project and you need small style differences.
## Installation
```console
npm install postcss-switch
```
## Usage
Example with `gulp` and `tailwindcss`.
```js
// 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'));
});
```
```css
.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:
```css
.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:
```css
.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](CHANGELOG.md)
## [License](LICENSE)