StyleMixin

Inline style mixins for JavaScript. Ideally used with ReactJS inline styles

Install with npm or Bower.

npm install style-mixin

Use with node.js, browserify or webpack. Alternatively, you can simply include index.js on your page with a standalone <script> tag and it will export a global styleMixin method, or define the module if you are using RequireJS.

Example:

var s = require('style-mixin/mixins'),
    m = require('style-mixin')(s);
 
var styles = m({
  background:'blue',
  $borderRadius:'3px'
}); // => {background: "blue", WebkitBorderRadius: "3px", borderRadius: "3px", backgroundClip: "padding-box"}

The utility helper comes with a few mixins that can be included via require('style-mixin/mixins'). Please have a look at src/mixins.js for examples of mixin functions. Please feel free to contribute by converting existing less/sass mixins over to JavaScript.

Usage

The m function gets initialized by passing a collection of mixins to mixin. The m function takes any number of arguments which can be a string or object. The argument '$mixin' is short for { $mixin: null }. Keys that start with $ will resolve a corresponding mixin.

import mixin from 'style-mixin';
 
let m = mixin({
  borderRadius: function($radius = '3px') {
    return {
      WebkitBorderRadius: $radius,
      borderRadius: $radius,
      backgroundClip: 'padding-box' /* stops bg color from leaking outside the border: */
    }
  }
});
 
var styles = m({
  background:'red'
}, '$borderRadius'); // => {background: "red", WebkitBorderRadius: "3px", borderRadius: "3px", backgroundClip: "padding-box"}

Style properties will be overridden from right to left. If you pass in a mixin name or style object, the last object properties will take precendence.

import mixin from 'style-mixin';
import mixins from 'style-mixin/mixins';
 
Object.assign(mixins, {
  button: function($fontsize = '12px') {
    return {
      fontSize: $fontsize,
      color: 'white',
      background: 'blue',
      $borderRadius: '3px'
    }
  }
});
 
let m = mixin(mixins);
 
var styles = m('$button', { background:'red' }); // => {background: "red", fontSize: "12px", color: "white", WebkitBorderRadius: "3px", borderRadius: "3px", backgroundClip: "padding-box"}

If you pass an array of properties to a mixin function they will passed as arguments.

Object.assign(mixins, {
  absPos: function($top = 0, $right = 0, $bottom = 0, $left = 0) {
    return {
      top: $top,
      right: $right,
      bottom: $bottom,
      left: $left,
      position: absolute
    }
  }
});
 
let m = mixin(mixins);
 
var styles = m({
  background:'red',
  $absPos:['23px', '43px', '3px', '-33px']
}); // => {background: "red", top: "23px", right: "43px", bottom: "3px", left: "-33px", position: "absolute"}

Polyfills needed to support older browsers

Object.assign: see MDN

Array.isArray: see MDN

Contribute

Would you like to take part of the discussion? Open up an issue or pull request.

License

MIT