Add PostCSS benchmark

It runs the PostCSS processor with the autoprefixer and postcss-nested plugins on Bootstrap, Foundation, and Angular Material.

Closes #18.

README.md

@@ -47,26 +47,27 @@ i.e. like this:
 
 ```
 $ node dist/cli.js
-Running Web Tooling Benchmark 0.3.1...
+Running Web Tooling Benchmark 0.3.2...
 --------------------------------------
-         acorn:  9.19 runs/sec
-         babel:  6.74 runs/sec
-       babylon:  8.72 runs/sec
-         buble:  7.67 runs/sec
-          chai: 13.28 runs/sec
-  coffeescript:  6.80 runs/sec
-        espree:  5.45 runs/sec
-       esprima:  7.67 runs/sec
-        jshint:  8.41 runs/sec
-         lebab:  8.88 runs/sec
-       prepack:  8.81 runs/sec
-      prettier: 11.21 runs/sec
-    source-map: 17.22 runs/sec
-    typescript: 10.70 runs/sec
-     uglify-es: 20.16 runs/sec
-     uglify-js:  8.22 runs/sec
+         acorn:  6.06 runs/sec
+         babel:  6.23 runs/sec
+       babylon:  6.73 runs/sec
+         buble:  5.19 runs/sec
+          chai:  9.60 runs/sec
+  coffeescript:  4.68 runs/sec
+        espree:  2.65 runs/sec
+       esprima:  5.92 runs/sec
+        jshint:  6.12 runs/sec
+         lebab:  6.72 runs/sec
+       postcss:  5.01 runs/sec
+       prepack:  4.54 runs/sec
+      prettier:  3.54 runs/sec
+    source-map:  6.58 runs/sec
+    typescript:  7.83 runs/sec
+     uglify-es: 13.54 runs/sec
+     uglify-js:  3.70 runs/sec
 --------------------------------------
-Geometric mean:  9.37 runs/sec
+Geometric mean:  5.74 runs/sec
 ```
 
 Or you open a web browser and point it to `dist/index.html`, or you can use one

docs/in-depth.md

@@ -135,6 +135,18 @@ performing the opposite of what [Babel](https://github.com/babel/babel) does.
 This benchmark runs the Lebal ES5 to ES6/ES7 transpiler on the
 [Preact](http://preactjs.com) 8.2.5 bundle.
 
+## postcss
+
+[PostCSS](https://github.com/postcss/postcss) is a tool for transforming styles with JS plugins.
+These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax,
+inline images, and more.
+
+This benchmark runs the PostCSS processor with [Autoprefixer](https://github.com/postcss/autoprefixer)
+and [postcss-nested](https://github.com/postcss/postcss-nested) plugins on
+- the [Bootstrap](https://getbootstrap.com/) 4.0.0 bundle.
+- the [Foundation](https://foundation.zurb.com/) 6.4.2 bundle.
+- the [Angular Material](https://material.angularjs.org) 1.1.8 bundle.
+
 ## prepack
 
 [Prepack](https://prepack.io) is a tool that optimizes JavaScript source code:
@@ -191,4 +203,4 @@ the ES2015 test in the [Speedometer](https://browserbench.org/Speedometer) 2.0 b
 ## uglify-es
 
 This benchmark stresses the new ES2015 and beyond minifier using the 196KiB
-ES2015 module containing the untranspiled [Vue](https://github.com/vuejs/vue) bundle.
+ES2015 module containing the untranspiled [Vue](https://github.com/vuejs/vue) bundle.

package.json

@@ -27,6 +27,10 @@
       "git add"
     ]
   },
+  "browserslist": [
+    "Chrome 50",
+    "Firefox 50"
+  ],
   "author": {
     "name": "Benedikt Meurer",
     "email": "[email protected]",
@@ -36,6 +40,7 @@
   "dependencies": {
     "@babel/standalone": "7.0.0-beta.32",
     "acorn": "5.5.3",
+    "autoprefixer": "8.2.0",
     "babylon": "7.0.0-beta.32",
     "benchmark": "^2.1.4",
     "buble": "0.19.3",
@@ -46,6 +51,8 @@
     "esprima": "4.0.0",
     "jshint": "2.9.5",
     "lebab": "2.7.7",
+    "postcss": "6.0.21",
+    "postcss-nested": "3.0.0",
     "prepack": "0.2.25",
     "prettier": "1.9.2",
     "source-map": "0.6.1",

src/cli-flags-helper.js

@@ -9,6 +9,7 @@ const targetList = new Set([
   "esprima",
   "jshint",
   "lebab",
+  "postcss",
   "prepack",
   "prettier",
   "source-map",

src/mocks/nested-rules.js

@@ -0,0 +1,19 @@
+// Copyright 2018 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+module.exports = `
+.phone {
+  &_title {
+      width: 500px;
+      @media (max-width: 500px) {
+          width: auto;
+      }
+      body.is_dark & {
+          color: white;
+      }
+  }
+  img {
+      display: block;
+  }
+}`;

src/postcss-benchmark.js

@@ -0,0 +1,47 @@
+// Copyright 2018 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const fs = require("fs");
+const postcss = require("postcss");
+const nested = require("postcss-nested");
+const autoprefixer = require("autoprefixer");
+
+const nestedRules = require("./mocks/nested-rules");
+
+const cleaner = postcss([autoprefixer({ add: false, browsers: [] })]);
+const processor = postcss([autoprefixer, nested]);
+
+const payloads = [
+  {
+    name: "bootstrap-4.0.0.css",
+    options: { from: `third_party/${this.name}`, map: false }
+  },
+  {
+    name: "foundation-6.4.2.css",
+    options: { from: `third_party/${this.name}`, map: false }
+  },
+  {
+    name: "angular-material-1.1.8.css",
+    options: { from: `third_party/${this.name}`, map: false }
+  }
+].map(({ name, options }) => {
+  // Clean prefixes.
+  const source = fs.readFileSync(`third_party/${name}`, "utf8");
+  // Add some nested rules.
+  const css = cleaner.process(source).css + nestedRules;
+
+  return {
+    payload: css,
+    options
+  };
+});
+
+module.exports = {
+  name: "postcss",
+  fn() {
+    return payloads.map(
+      ({ payload, options }) => processor.process(payload, options).css
+    );
+  }
+};

src/postcss-benchmark.test.js

@@ -0,0 +1,7 @@
+// Copyright 2018 the V8 project authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const postcssBenchmark = require("./postcss-benchmark");
+
+it("postcss-benchmark runs to completion", () => void postcssBenchmark.fn());

src/vfs.js

@@ -7,10 +7,22 @@ const virtualfs = require("virtualfs");
 // Setup the virtual file system.
 const fs = new virtualfs.VirtualFS();
 fs.mkdirpSync("third_party/todomvc/react");
+fs.writeFileSync(
+  "third_party/angular-material-1.1.8.css",
+  require("raw-loader!../third_party/angular-material-1.1.8.css")
+);
 fs.writeFileSync(
   "third_party/backbone-1.1.0.js",
   require("raw-loader!../third_party/backbone-1.1.0.js")
 );
+fs.writeFileSync(
+  "third_party/bootstrap-4.0.0.css",
+  require("raw-loader!../third_party/bootstrap-4.0.0.css")
+);
+fs.writeFileSync(
+  "third_party/foundation-6.4.2.css",
+  require("raw-loader!../third_party/foundation-6.4.2.css")
+);
 fs.writeFileSync(
   "third_party/jquery-3.2.1.js",
   require("raw-loader!../third_party/jquery-3.2.1.js")