extras

// requires very modern browsers (i.e. FF Nightly)
with(restyle.Proxy){
  // write CSS via JS naturally
  $color = rgb('#012');
  restyle({
    body: {
      backgroundColor: white, // look, no quotes needed!
      color: $color
    }
  });
}
      
// works in every browser but might have missing "names"
with(restyle.properties){
  // write CSS via JS naturally
  $color = rgb('#012');
  restyle({
    body: {
      backgroundColor: white, // look, no quotes needed!
      color: $color
    }
  });
}

methods: abs, concat, cubicBezier, floor, hex, join, matrix, matrix3d, max, min, rgb, rgba, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, perspective, round, quote, translate, translate3d, translateX, translateY, translateZ, url
properties: Proxy has no problems with non-standard properties while the properties compatible version should accept all valid CSS3 known properties. If something is missing please let me know, thanks.

try it



    

    
basic example

    

      
restyle({
  body: {
    background: '#EEE'
  }
}, []);
      

body {
  background: #EEE;
}
      


    

    
some nested property

    

      
restyle({
  'body:last-child': {
    background: {
      color: 'transparent',
      image: 'url("some-image.png")',
      repeat: 'no-repeat'
    }
  }
}, []);
      

body:last-child {
  background-color: transparent;
  background-image: url("some-image.png");
  background-repeat: no-repeat;
}
      


    

    
using some vendor prefix

    

      
restyle({
  'div > button:first-child': {
    transform: 'rotate(30deg)'
  }
}, ['moz', 'webkit']);
      

div > button:first-child {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg);
}
      


    

    
@special key with all vendor prefixes

    

      
restyle({
  'body > div': {
    animation: {
      name: 'spin',
      duration: '4s'
    }
  },
  '@keyframes spin': {
    from: {
      transform: 'rotate(0deg)'
    },
    to: {
      transform: 'rotate(360deg)'
    }
  }
});
      

body > div{
  -webkit-animation-name:spin;
  -moz-animation-name:spin;
  -ms-animation-name:spin;
  -o-animation-name:spin;
  animation-name:spin;
  -webkit-animation-duration:4s;
  -moz-animation-duration:4s;
  -ms-animation-duration:4s;
  -o-animation-duration:4s;
  animation-duration:4s;
}
@-webkit-keyframes spin{
  from{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-moz-keyframes spin{
  from{
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-ms-keyframes spin{
  from{
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-o-keyframes spin{
  from{
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes spin{
  from{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}