A LESS mixin to generate vendor-specific (browser-specific/experimental) CSS properties.

vendorify.less

.vendorify(@prop, @vals...) {
  @property: e('@{prop}');
  @values: `'@{arguments}'.replace(/^\[|\]$/g, '').split(', ').splice(1)`;

  // v1.6.0 added interpolation allowing us to do this:
  -o-@{property}: @values;
  -ms-@{property}: @values;
  -moz-@{property}: @values;
  -webkit-@{property}: @values;
  @{property}: @values;

  /*
  // If prior to v1.6.0, use this:
  -less-vendorify: ~`                         ';\n' +
    '  -o-'      + '@{property}: ' + '@{values};\n' +
    '  -ms-'     + '@{property}: ' + '@{values};\n' +
    '  -moz-'    + '@{property}: ' + '@{values};\n' +
    '  -webkit-' + '@{property}: ' + '@{values};\n' +
                 '  @{property}: ' + '@{values}'`;
  */
}

"A useless (but harmless) -less-vendorify: ; property is included in the style definition"

Why?

Because of the way LESS works, we are unable to simply print out the string generated by the JavaScript code without it being "attached" to an existing property. We get around this by creating the bogus -less-vendorify property (it can be anything), and tricking LESS by assigning the remaining properties as the value of this property. However, we insert semicolons and line breaks so that other properties get created as well.

If you know of a way around this, I'm all ears!