mixin() plugin for rework, formerly included in core
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
package.json

README.md

rework-plugin-mixin

Build Status

A Rework plugin to add user-defined mixins.

Installation

npm install rework-plugin-mixin

Use

User-defined mixins are functions that are invoked for a given property, and passed the value. They return 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.

The receiver (this) is the Rework instance, allowing the mixin to reference properties such as the vendor .prefixes array.

var rework = require('rework');
var mixin = require('rework-plugin-mixin');

var css = rework(css)
  .use(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:

h1 {
  overflow: ellipsis;
}

yields:

h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

You may also return array values to expand to several definitions of the property:

function display(type) {
  if ('flex' == type) {
    return {
      display: [
        '-webkit-flex',
        '-moz-flex',
        '-webkit-flexbox',
        'flex'
      ]
    }
  }

  return {
    display: type
  }
}

Would yield:

.myclass {
  display: -webkit-flex;
  display: -moz-flex;
  display: -webkit-flexbox;
  display: flex;
}