Transparent CSS preprocessing

input.css

/**
 * Input CSS
 * No custom syntax. Just write "future" CSS without vendor prefixed properties or values.
 * Use a subset of CSS variables (not dynamic or scoped).
 * Specify a level of browser support: IE 8+, etc.
 * Tool takes browser support and specific declarations to generate vendor-specific variants.
 * This source code is just CSS and works in any browser with adequate support.
 * One day, perhaps you'll have no need to preprocess this code.
 */

:root {
  var-textColor: red;
}

.selector {
  background-image: linear-gradient(0deg, #fff, #eee);
  box-sizing: border-box;
  color: var(textColor);
  opacity: 0.5;
}

output.css

/**
 * Output CSS
 * Tool generates all the vendor-prefixed code needed to meet your level of browser support.
 * See: https://github.com/visionmedia/rework
 */

:root {
  var-textColor: red;
}

.selector {
  background-image: -moz-linear-gradient(90deg, #fff, #eee);
  background-image: -ms-gradient(90deg, #fff, #eee);
  background-image: -o-gradient(90deg, #fff, #eee);
  background-image: -webkit-gradient(90deg, #fff, #eee);
  background-image: linear-gradient(0deg, #fff, #eee);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: red;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
}

Sass actually uses a potential valid CSS syntax. At-rules, blocks and properties are being used in ways that are technically matching the spec.

One thing I miss is the point of the var on the output. It's useless now it as already been used ?

This is full of win. Where's the code that generates this? I checked Rework but Rework seems to to more than just making your CSS legacy-proof.