rework-mixins

rework-mixins

Rework CSS mixins.

Example

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();

Mixins

• overflow: ellipsis
• border-radius
• display-flex
• absolute
• relative
• fixed
• opacity
• size

opacity: n

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
}

overflow: ellipsis

mixins.overflow:

h1 {
  overflow: ellipsis
}

yields:

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

border-radius

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;
}

display-flex

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;
}

absolute | relative | fixed

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
}

size

mixins.size:

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

yields:

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

License

MIT