A PostCSS plugin that extend declaration block from an existed rule with target selector (like sass
@extend
).
.classA {
background-image: url(logo.svg);
width: 12px;
height: 12px;
}
.classB {
float: left;
@ref .classA;
}
.classA {
background-image: url(logo.svg);
width: 12px;
height: 12px;
}
.classB {
float: left;
background-image: url(logo.svg);
width: 12px;
height: 12px;
}
.classA, .classB {
background-image: url(logo.svg);
width: 12px;
height: 12px;
}
.classB {
float: left;
}
-
Support
@media
condition. -
AtRule name can dynamic (default is
@ref
).
npm install postcss-decls-ref --save-dev
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'));
});
Decide the output css result. The value is
clone
orgroup
.
- Default:
'clone'
- Required:
false
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
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