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 = m = s; var styles = ; // => {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.
; let m = ; var styles = ; // => {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.
;; Object; let m = ; var styles = ; // => {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; let m = ; var styles = ; // => {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.