Browse files

add property reference support

  • Loading branch information...
1 parent 19098c5 commit 7fa7383d187cd9893c2fa6bef55cd6307ed48a04 @tj tj committed Nov 29, 2012
View
34 Readme.md
@@ -75,6 +75,7 @@ $ rework -v webkit,moz < my.css > my.reworked.css
- [vars](#vars) — add css variable support
- [keyframes](#keyframesvendors) — add __@keyframe__ vendor prefixing
- [colors](#colors) — add colour helpers like `rgba(#fc0, .5)`
+ - [references](#references) — add property references support `height: @width` etc
### .media(obj)
@@ -322,6 +323,38 @@ rework(str)
.toString()
```
+### .references()
+
+ Add property reference support.
+
+```css
+button {
+ width: 120px;
+}
+
+button.round {
+ width: 50px;
+ height: @width;
+ line-height: @height;
+ background-size: @width @height;
+}
+```
+
+yields:
+
+```css
+button {
+ width: 120px
+}
+
+button.round {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ background-size: 50px 50px
+}
+```
+
### .vars()
Add variable support. Note that this does not cascade like the CSS variable
@@ -386,7 +419,6 @@ button {
}
```
-
### .keyframes([vendors])
Prefix __@keyframes__ with `vendors` defaulting to `.vendors()`.
View
11 examples/property-references.css
@@ -0,0 +1,11 @@
+
+button {
+ width: 120px;
+}
+
+button.round {
+ width: 50px;
+ height: @width;
+ line-height: @height;
+ background-size: @width @height;
+}
View
9 examples/property-references.js
@@ -0,0 +1,9 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/property-references.css', 'utf8'))
+ .use(rework.references())
+ .toString()
+
+console.log(css);
View
51 lib/plugins/references.js
@@ -0,0 +1,51 @@
+
+/**
+ * Provide property reference support.
+ *
+ * button {
+ * width: 50px;
+ * height: @width;
+ * line-height: @height;
+ * }
+ *
+ * yields:
+ *
+ * button {
+ * width: 50px;
+* height: 50px;
+* line-height: 50px;
+ * }
+ *
+ */
+
+module.exports = function() {
+ return function(style, rework){
+ style.rules.forEach(function(rule){
+ if (!rule.declarations) return;
+ substitute(rule.declarations);
+ });
+ }
+};
+
+/**
+ * Substitute easing functions.
+ *
+ * @api private
+ */
+
+function substitute(declarations) {
+ var map = {};
+
+ for (var i = 0, len = declarations.length; i < len; ++i) {
+ var decl = declarations[i];
+ var key = decl.property;
+ var val = decl.value;
+
+ decl.value = val.replace(/@(\w+)/g, function(_, name){
+ if (null == map[name]) throw new Error('@' + name + ' is not defined in this scope');
+ return map[name];
+ });
+
+ map[key] = decl.value;
+ }
+}
View
3 lib/rework.js
@@ -78,9 +78,10 @@ Rework.prototype.toString = function(options){
* Expose plugins.
*/
-exports.colors = require('./plugins/colors');
exports.media = require('./plugins/media');
exports.prefix = require('./plugins/prefix');
+exports.colors = require('./plugins/colors');
+exports.references = require('./plugins/references');
exports.prefixValue = require('./plugins/prefix-value');
exports.prefixSelectors = require('./plugins/prefix-selectors');
exports.keyframes = require('./plugins/keyframes');
View
11 test/fixtures/references.css
@@ -0,0 +1,11 @@
+
+button {
+ width: 120px;
+}
+
+button.round {
+ width: 50px;
+ height: @width;
+ line-height: @height;
+ background-size: @width @height;
+}
View
10 test/fixtures/references.out.css
@@ -0,0 +1,10 @@
+button {
+ width: 120px
+}
+
+button.round {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ background-size: 50px 50px
+}
View
9 test/rework.js
@@ -50,6 +50,15 @@ describe('rework', function(){
})
})
+ describe('.references()', function(){
+ it('should substitute @<word> with property values', function(){
+ rework(fixture('references'))
+ .use(rework.references())
+ .toString()
+ .should.equal(fixture('references.out'));
+ })
+ })
+
describe('.at2x()', function(){
it('should add device-pixel-ratio rules', function(){
rework(fixture('at2x'))

0 comments on commit 7fa7383

Please sign in to comment.