rework-mixins

Rework CSS mixins

rework-mixins

Rework CSS mixins.

Using all mixing:

var rework = require('rework');
var mixins = require('rework-mixins');
 
var css = rework('some css here')
  .use(rework.mixin(mixins))
  .toString();

Or specific mixing:

var rework = require('rework');
var mixins = require('rework-mixins');
 
var css = rework('some css here')
  .use(rework.mixin({
    overflow: mixins.overflow
  }))
  .toString();

Add microsoft junk:

a {
  opacity: 0.5;
}
 
ul {
  opacity: 1 !important;
}

yields:

a {
  opacity: 0.5;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50)
}
 
ul {
  opacity: 1 !important;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100!important;
  filter: alpha(opacity=100!important
}

mixins.overflow:

h1 {
  overflow: ellipsis
}

yields:

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

mixins.border-radius:

button {
  border-radius: top 5px bottom 10px
}

yields:

button {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Allows you to use display: flex:

.wrapper {
  display: flex;
}

yields:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

mixins.{absolute,relative,fixed}:

#logo {
  absolute: top left
}

yields:

#logo {
  position: absolute;
  top: 0;
  left: 0
}
#logo {
  fixed: top 5px left 10px
}

yields:

#logo {
  position: fixed;
  top: 5px;
  left: 10px
}

mixins.size:

#logo {
  size: 100px 50px
}
#icon {
  size: 32px
}

yields:

#logo {
  width: 100px;
  height: 50px
}
#icon {
  width: 32px;
  height: 32px
}

MIT