add support

Readme.md

@@ -82,6 +82,57 @@ $ rework -v webkit,moz < my.css > my.reworked.css
   - [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
   - [references](#references) — add property references support `height: @width` etc
   - [mixin](#mixinobjects) — add custom property logic with mixing
+  - [extend](#extend) — add `extend: selector` support
+
+### .extend()
+
+  Add support for extending existing rulesets:
+
+```css
+
+button {
+  padding: 5px 10px;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd;
+}
+
+.green {
+  background: green;
+  padding: 10px 15px
+}
+
+a.join {
+  extend: button;
+  extend: .green;
+}
+
+a.button
+input[type='submit'],
+input[type='button'] {
+  extend: button
+}
+```
+
+yields:
+
+```css
+
+button,
+a.button,
+input[type='submit'],
+input[type='button'],
+a.join {
+  padding: 5px 10px;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd;
+}
+
+.green,
+a.join {
+  background: green;
+  padding: 10px 15px
+}
+```
 
 ### .media(obj)
 

examples/extend.css

@@ -0,0 +1,22 @@
+
+button {
+  padding: 5px 10px;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd;
+}
+
+.green {
+  background: green;
+  padding: 10px 15px
+}
+
+a.join {
+  extend: button;
+  extend: .green;
+}
+
+a.button
+input[type='submit'],
+input[type='button'] {
+  extend: button
+}

examples/extend.js

@@ -0,0 +1,9 @@
+
+var rework = require('..')
+  , read = require('fs').readFileSync;
+
+var css = rework(read('examples/extend.css', 'utf8'))
+  .use(rework.extend())
+  .toString();
+
+console.log(css);

lib/plugins/extend.js

@@ -0,0 +1,48 @@
+
+/**
+ * Module dependencies.
+ */
+
+var debug = require('debug')('rework:extend');
+
+/**
+ * Define custom mixins.
+ */
+
+module.exports = function() {
+  debug('use extend');
+  return function(style, rework){
+    var map = {};
+    style.rules.forEach(function(rule){
+      if (!rule.declarations) return;
+      rule.selectors.forEach(function(selector){
+        map[selector] = rule;
+      });
+      visit(rule, map);
+    });
+  }
+};
+
+/**
+ * Visit declarations and extensions.
+ *
+ * @param {Object} rule
+ * @param {Object} map
+ * @api private
+ */
+
+function visit(rule, map) {
+  for (var i = 0; i < rule.declarations.length; ++i) {
+    var decl = rule.declarations[i];
+    var key = decl.property;
+    var val = decl.value;
+    if ('extend' != key) continue;
+
+    var extend = map[val];
+    if (!extend) throw new Error('failed to extend "' + val + '"');
+
+    debug('extend %j with %j', rule.selectors, extend.selectors);
+    extend.selectors = extend.selectors.concat(rule.selectors);
+    rule.declarations.splice(i--, 1);
+  }
+}

lib/rework.js

@@ -82,6 +82,7 @@ exports.media = require('./plugins/media');
 exports.mixin = require('./plugins/mixin');
 exports.prefix = require('./plugins/prefix');
 exports.colors = require('./plugins/colors');
+exports.extend = require('./plugins/extend');
 exports.references = require('./plugins/references');
 exports.prefixValue = require('./plugins/prefix-value');
 exports.prefixSelectors = require('./plugins/prefix-selectors');

package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "css": "1.0.7",
     "commander": "1.0.4",
-    "color-parser": "0.0.1"
+    "color-parser": "0.0.1",
+    "debug": "*"
   },
   "devDependencies": {
     "mocha": "*",

test/fixtures/extend.css

@@ -0,0 +1,23 @@
+
+button {
+  padding: 5px 10px;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd;
+}
+
+.green {
+  background: green;
+  padding: 10px 15px
+}
+
+a.join {
+  extend: button;
+  extend: .green;
+}
+
+a.button
+input[type='submit'],
+input[type='button'] {
+  extend: button;
+  margin: 2px;
+}

test/fixtures/extend.out.css

@@ -0,0 +1,25 @@
+button,
+a.join,
+a.button
+input[type='submit'],
+input[type='button'] {
+  padding: 5px 10px;
+  border: 1px solid #eee;
+  border-bottom-color: #ddd
+}
+
+.green,
+a.join {
+  background: green;
+  padding: 10px 15px
+}
+
+a.join {
+
+}
+
+a.button
+input[type='submit'],
+input[type='button'] {
+  margin: 2px
+}

test/rework.js

@@ -41,6 +41,15 @@ describe('rework', function(){
     })
   })
 
+  describe('.extend()', function(){
+    it('should allow extending rulesets', function(){
+      rework(fixture('extend'))
+      .use(rework.extend())
+      .toString()
+      .should.equal(fixture('extend.out'));
+    })
+  })
+
   describe('.colors()', function(){
     it('should support rgba(color, a)', function(){
       rework(fixture('colors'))