PostCSS plugin for annotations based inheritance from other rule sets
$ npm install postcss-annotation-extend// Dependencies
var fs = require("fs")
var postcss = require("postcss")
var extend = require("postcss-annotation-extend")
// CSS to be processed
var css = fs.readFileSync("input.css", "utf8")
// Process css
var output = postcss()
.use(extend({src: css}))
.process(css)
.cssUsing this input.css:
.base-1 {
/*
* @base
*/
font-size: 12px;
}
.base-2 {
/*
* @base
*/
color: red;
}
.foo {
/*
* @extend .base-1, .base-2
*/
padding: 10px;
}
.bar {
/*
* @extend .base-1
*/
margin: 10px;
}You will get:
.foo,
.bar {
/*
* @base
*/
font-size: 12px;
}
.foo {
/*
* @base
*/
color: red;
}
.foo {
/*
* @extend .base-1, .base-2
*/
padding: 10px;
}
.bar {
/*
* @extend .base-1
*/
margin: 10px;
}The MIT License (MIT)
Copyright (c) 2014 Masaaki Morishita