PostCSS Yank
A tool to yank, or duplicate, declarations from one CSS rule into another. It works similarly to including classes within classes in Less.
Getting started
import gulp from 'gulp'
import postcss from 'gulp-postcss'
gulp.task('build', () => {
return gulp.src('src/index.css')
.pipe(postcss(require('postcss-yank')))
.pipe(gulp.dest('dist'))
})Example
/* Input: */
.button {
background: blue;
}
.button--primary {
@yank .button;
color: purple;
}
.button--wide {
@yank .button--primary;
@yank .full-width;
}
.full-width {
width: 100%;
}/* Output: */
.button {
background: blue;
}
.button--primary {
background: blue;
color: purple;
}
.button--wide {
background: blue;
color: purple;
width: 100%;
}
.full-width {
width: 100%;
}