Minimal alternative over using sass/less

expand_ecss.js

function expand_ecss(s) {
  var properties_to_be_prefixed = ["transform",
      "transform-origin", "tap-highlight-color", "ruby-position",
      "transition-duration", "transition-property", "transition",
      "justify-content",
      "animation-fill-mode", "align-self", "align-items", "box-sizing",
      "appearance", "box-shadow", "animation"]
  var specific = {
    background: ["linear-gradient"],
    display: ["flex"],
    height: ["calc"],
    width: ["calc"]
  }
  var re = properties_to_be_prefixed.concat(Object.keys(specific)).join("|")
  console.log("re: ", re)
  var prefixes = ["-o-", "-ms-", "-webkit-", "-moz-"]
  var css_s = s.replace(new RegExp("(\\s)(" +
      re + "):(.*)", "g"), function(n,bf, a,b) {
    if (specific[a]) {
      var rr = specific[a].join("|")
      var s = " " + a + ":" + b + "\n"
      var re = new RegExp("(\\W)(" + rr + ")(\\W)", "g")
      if (!b.match(re)) return s
      return s +  prefixes.map(function(pre) {
        return "  " + a + ":" +
            b.replace(re, function(n, b, m, a) { return b + pre + m + a})
      }).join("\n")
    }
    return  bf + a + ":" +b + "\n" + (prefixes.
    map(function(pre) {
      return "  " + pre + a + ":" + b
    } )).join("\n")
  })
  return css_s.replace(/@(keyframes)(\s*\S+\s*{[\s\S]*?\n})/gm,
  function(n,a,b) {
    return "@" + a + b + "\n\n" + prefixes.map(
    function(pre) {return "@" + pre + a + b}).join("\n\n")
  })
}