postcss-yank

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%;
}