Make relevant benchmarks

[skip ci]

Author: MoOx

benchmarks.js

@@ -2,7 +2,14 @@ var cssnext = require("./")
 var t = require("microtime")
 var assign = require("object-assign")
 
-var input = require("fs").readFileSync("./test/fixtures/cases/example.css")
+var input = require("fs").readFileSync("./test/fixtures/benchmarks.css", {encoding: "utf8"})
+
+// make a 2MB input
+for(var i=0;i<=10;i++) {
+  input += input
+}
+// check the real input
+// require("fs").writeFileSync("./test/fixtures/bench.css", input)
 
 // test each features
 var keys = Object.keys(cssnext.features)
@@ -12,11 +19,13 @@ keys.forEach(function(k) {
   allOff[k] = false
 })
 
+console.log("Each features is tested on a 2MB input (>100 000 lines)\n")
+
 keys.forEach(function(k) {
   var enable = assign({}, allOff)
   enable[k] = true
   var start = t.now()
-  cssnext(input, {features: enable})
+  var out = cssnext(input, {features: enable})
   var stop = t.now()
 
   console.log(k + " takes " + ((stop - start) / 1000000) + "s") // , enable)

test/fixtures/benchmarks.css

@@ -0,0 +1,54 @@
+/* custom properties */
+:root {
+  --fontSize: 1rem;
+  --mainColor: #12345678;
+  --highlightColor: hwb(190, 35%, 20%);
+}
+
+/* custom media queries */
+@custom-media --viewport-medium (width <= 50em);
+
+/* some var() & calc() */
+body {
+  color: var(--mainColor);
+
+  font-size: var(--fontSize);
+  line-height: calc(var(--fontSize) * 1.5);
+  padding: calc((var(--fontSize) / 2) + 1px);
+}
+
+/* custom media query usage */
+@media (--viewport-medium) {
+  body { font-size: calc(var(--fontSize) * 1.2); }
+  /* no need for px here since browsers that supports media queries support rem already */
+}
+
+/* custom selectors */
+@custom-selector --heading h1, h2, h3, h4, h5, h6;
+--heading { margin-top: 0 }
+
+/* colors stuff */
+a {
+  color: var(--highlightColor);
+  transition: color 1s; /* autoprefixed ! */
+}
+a:hover { color: gray(255, 50%) }
+a:active { color: rebeccapurple }
+a:visited { color: color(red blackness(+20%)) }
+
+/* font stuff */
+h2 {
+  font-variant-caps: small-caps;
+}
+
+table {
+  font-variant-numeric: lining-nums;
+}
+
+/* filters */
+.blur {
+  filter: blur(4px);
+}
+.sepia {
+  filter: sepia(.8);
+}