Permalink
Browse files

add mixin support

  • Loading branch information...
1 parent 7fa7383 commit 968655431c5bd3cd26eb4b86ceeebe572cfec17e @tj tj committed Nov 29, 2012
Showing with 162 additions and 0 deletions.
  1. +47 −0 Readme.md
  2. +4 −0 examples/ellipsis.css
  3. +23 −0 examples/ellipsis.js
  4. +51 −0 lib/plugins/mixin.js
  5. +1 −0 lib/rework.js
  6. +7 −0 test/fixtures/mixins.css
  7. +8 −0 test/fixtures/mixins.out.css
  8. +21 −0 test/rework.js
View
@@ -76,6 +76,7 @@ $ rework -v webkit,moz < my.css > my.reworked.css
- [keyframes](#keyframesvendors) — add __@keyframe__ vendor prefixing
- [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
### .media(obj)
@@ -323,6 +324,52 @@ rework(str)
.toString()
```
+### .mixin(object)
+
+ Add user-defined mixins, functions that are invoked for a given property, and
+ passed the value. Returning an object that represents one or more properties.
+
+ For example the following `overflow` mixin allows the designer
+ to utilize `overflow: ellipsis;` to automatically assign associated
+ properties preventing wrapping etc.
+
+```js
+var css = rework(css)
+ .use(rework.mixin({ overflow: ellipsis }))
+ .toString()
+
+function ellipsis(type) {
+ if ('ellipsis' == type) {
+ return {
+ 'white-space': 'nowrap',
+ 'overflow': 'hidden',
+ 'text-overflow': 'ellipsis'
+ }
+ }
+
+ return type;
+}
+```
+
+ Mixins in use look just like regular CSS properties:
+
+```css
+
+h1 {
+ overflow: ellipsis;
+}
+```
+
+yields:
+
+```css
+h1 {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis
+}
+```
+
### .references()
Add property reference support.
View
@@ -0,0 +1,4 @@
+
+h1 {
+ overflow: ellipsis;
+}
View
@@ -0,0 +1,23 @@
+
+var rework = require('..')
+ , read = require('fs').readFileSync;
+
+var css = rework(read('examples/ellipsis.css', 'utf8'))
+ .use(rework.mixin({
+ overflow: ellipsis
+ }))
+ .toString()
+
+function ellipsis(type) {
+ if ('ellipsis' == type) {
+ return {
+ 'white-space': 'nowrap',
+ 'overflow': 'hidden',
+ 'text-overflow': 'ellipsis'
+ }
+ }
+
+ return type;
+}
+
+console.log(css);
View
@@ -0,0 +1,51 @@
+
+/**
+ * Module dependencies.
+ */
+
+var utils = require('../utils');
+
+/**
+ * Define custom mixins.
+ */
+
+module.exports = function(mixins) {
+ return function(style, rework){
+ style.rules.forEach(function(rule){
+ if (!rule.declarations) return;
+ visit(rule.declarations, mixins);
+ });
+ }
+};
+
+/**
+ * Visit declarations and apply mixins.
+ *
+ * @param {Array} declarations
+ * @param {Object} mixins
+ * @api private
+ */
+
+function visit(declarations, mixins) {
+ for (var i = 0; i < declarations.length; ++i) {
+ var decl = declarations[i];
+ var key = decl.property;
+ var val = decl.value;
+ var fn = mixins[key];
+ if (!fn) continue;
+
+ // invoke mixin
+ var ret = fn(val);
+
+ // apply properties
+ for (var key in ret) {
+ declarations.splice(i++, 0, {
+ property: key,
+ value: ret[key]
+ });
+ }
+
+ // remove original
+ declarations.splice(i, 1);
+ }
+}
View
@@ -79,6 +79,7 @@ Rework.prototype.toString = function(options){
*/
exports.media = require('./plugins/media');
+exports.mixin = require('./plugins/mixin');
exports.prefix = require('./plugins/prefix');
exports.colors = require('./plugins/colors');
exports.references = require('./plugins/references');
View
@@ -0,0 +1,7 @@
+
+h1 {
+ color: blue;
+ margin: 15px;
+ overflow: ellipsis;
+ text-align: center;
+}
@@ -0,0 +1,8 @@
+h1 {
+ color: blue;
+ margin: 15px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: center
+}
View
@@ -50,6 +50,27 @@ describe('rework', function(){
})
})
+ describe('.mixin(obj)', function(){
+ it('should apply mixins', function(){
+ rework(fixture('mixins'))
+ .use(rework.mixin({ overflow: ellipsis }))
+ .toString()
+ .should.equal(fixture('mixins.out'));
+
+ function ellipsis(type) {
+ if ('ellipsis' == type) {
+ return {
+ 'white-space': 'nowrap',
+ 'overflow': 'hidden',
+ 'text-overflow': 'ellipsis'
+ }
+ }
+
+ return type;
+ }
+ })
+ })
+
describe('.references()', function(){
it('should substitute @<word> with property values', function(){
rework(fixture('references'))

0 comments on commit 9686554

Please sign in to comment.