Permalink
Browse files

add support

  • Loading branch information...
1 parent cdbc175 commit 012bd31c4c6e548b6545fe7ce8c7ddf84779bc24 @tj tj committed Dec 7, 2012
Showing with 190 additions and 1 deletion.
  1. +51 −0 Readme.md
  2. +22 −0 examples/extend.css
  3. +9 −0 examples/extend.js
  4. +48 −0 lib/plugins/extend.js
  5. +1 −0 lib/rework.js
  6. +2 −1 package.json
  7. +23 −0 test/fixtures/extend.css
  8. +25 −0 test/fixtures/extend.out.css
  9. +9 −0 test/rework.js
View
51 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)
View
22 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
+}
View
9 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);
View
48 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);
+ }
+}
View
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');
View
3 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": "*",
View
23 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;
+}
View
25 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
+}
View
9 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'))

0 comments on commit 012bd31

Please sign in to comment.