postcss-decls-ref

A PostCSS plugin that extend declaration block from an existed rule with target selector (like sass @extend).

Example

Input

.classA {
	background-image: url(logo.svg);
	width: 12px;
	height: 12px;
}
.classB {
	float: left;
	@ref .classA;
}

Output

1) when option refMod: 'clone'

.classA {
	background-image: url(logo.svg);
	width: 12px;
	height: 12px;
}
.classB {
	float: left;
	background-image: url(logo.svg);
	width: 12px;
	height: 12px;
}

2) when option refMod: 'group'

.classA, .classB {
	background-image: url(logo.svg);
	width: 12px;
	height: 12px;
}
.classB {
	float: left;
}

Features

• Support @media condition.

• AtRule name can dynamic (default is @ref).

Installation

npm install postcss-decls-ref --save-dev

Usage

Work with Gulp

Example:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var ref = require('postcss-decls-ref');

gulp.task('css', function () {
	return gulp.src('./input.css')
		.pipe(postcss([ref()]))
		.pipe(gulp.dest('./output'));
});

Options

refMod

Decide the output css result. The value is clone or group.

• Default: 'clone'
• Required: false

dynamicAtRule

Dynamic the atRule name, remember not to rename the css existed one (like @media, @support , etc). @ character is not needed. Recommend: @ref, @apply.

• Default: 'ref'
• Required: false

Contributing

Issues and Pull requests are welcome.

$ git clone github.com/Jeff2Ma/postcss-decls-ref
$ cd postcss-decls-ref
$ npm i
$ gulp # for dev
$ gulp test # for test