CSS Gather: Fix flakiness

This took quite some time to track down. We were fetching the critical
css for all pages in the url list asynchronously. This was fine, but
we were also outputting to stdout asynchronously. This meant that the
css that we ran through our postprocessing scripts later would always
receive the css in a different order.

Now, we still fetch the css asynchronously so it's quick, but we
always output to stdout in the same order as the input urls array.

critical-css.js

@@ -20,16 +20,20 @@ const args = yargs(process.argv.slice(2))
 
 main(args['url'])
 
-function main(urls) {
+async function main(urls) {
   let cssString = ""
   process.stdin.on('data', str => cssString += str)
-  process.stdin.on('end', () => {
-    urls.map(url => {
+  process.stdin.on('end', async () => {
+    const cssPromises = urls.map(url => {
       process.stderr.write(`Gathering critical CSS for ${url}\n`);
-      findCriticalCss(cssString, url).then(criticalCss => {
-        process.stdout.write(criticalCss)
-      })
-    })
+      return findCriticalCss(cssString, url);
+    });
+
+    const cssArray = await Promise.all(cssPromises);
+
+    for (const css of cssArray) {
+       process.stdout.write(css);
+    }
   })
 }