From 37a714f399620b1f6ba1725ac78c42d680068568 Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Wed, 30 Aug 2017 16:35:03 -0700
Subject: [PATCH 1/2] Prerendering of inline math

---
 bin/render                        |  28 +-
 package-lock.json                 | 726 ++++++++++++++++++++++++++++--
 package.json                      |   2 +-
 src/components/d-math.js          |  63 ++-
 src/controller.js                 |   5 +
 src/front-matter.js               |   3 +
 src/helpers/katex-auto-render.js  | 204 +++++++++
 src/styles/styles-article.css     |   7 +
 src/styles/styles.js              |  10 +-
 src/transforms.js                 |  10 +-
 src/transforms/bibliography.js    |   1 -
 src/transforms/mathematics.js     |  33 ++
 src/transforms/styles-article.css | 269 -----------
 src/transforms/styles-base.css    |  67 ---
 src/transforms/styles-code.css    | 147 ------
 src/transforms/styles-layout.css  | 353 ---------------
 src/transforms/styles-print.css   |  20 -
 src/transforms/styles.js          |  11 -
 18 files changed, 1019 insertions(+), 940 deletions(-)
 create mode 100644 src/helpers/katex-auto-render.js
 create mode 100644 src/transforms/mathematics.js
 delete mode 100644 src/transforms/styles-article.css
 delete mode 100644 src/transforms/styles-base.css
 delete mode 100644 src/transforms/styles-code.css
 delete mode 100644 src/transforms/styles-layout.css
 delete mode 100644 src/transforms/styles-print.css
 delete mode 100644 src/transforms/styles.js

diff --git a/bin/render b/bin/render
index 1619718..68c7b3e 100755
--- a/bin/render
+++ b/bin/render
@@ -1,9 +1,8 @@
 #!/usr/bin/env node
 
-const fs = require('fs');
-const jsdom = require('jsdom').jsdom;
-const serialize = require('jsdom').serializeDocument;
 const program = require('commander');
+const jsdom = require('jsdom');
+const { JSDOM } = jsdom;
 const transforms = require('../dist/transforms.v2.js');
 
 program
@@ -11,10 +10,19 @@ program
   .option('-i, --input <path>', 'path to input file.')
   .parse(process.argv);
 
-const htmlString = fs.readFileSync(program.input, 'utf8');
-const data = new transforms.FrontMatter;
-const dom = jsdom(htmlString, {features: {ProcessExternalResources: false, FetchExternalResources: false, runScripts: 'dangerously'}});
-transforms.render(dom, data);
-transforms.distillify(dom, data);
-const transformedHtml = serialize(dom);
-process.stdout.write(transformedHtml);
+const virtualConsole = new jsdom.VirtualConsole();
+// omitJSDOMErrors as JSDOM routinely can't parse modern CSS
+virtualConsole.sendTo(console, { omitJSDOMErrors: true });
+
+const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsole: virtualConsole };
+JSDOM.fromFile(program.input, options).then(dom => {
+  const window = dom.window;
+  const document = window.document;
+
+  const data = new transforms.FrontMatter;
+  transforms.render(document, data);
+  transforms.distillify(document, data);
+
+  const transformedHtml = dom.serialize();
+  process.stdout.write(transformedHtml);
+});
diff --git a/package-lock.json b/package-lock.json
index 5a99ae7..01f369e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -114,6 +114,11 @@
         "repeat-string": "1.6.1"
       }
     },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
+    },
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -129,14 +134,12 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "ansi-styles": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
     "anymatch": {
       "version": "1.3.2",
@@ -170,7 +173,6 @@
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
       "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
-      "dev": true,
       "requires": {
         "sprintf-js": "1.0.3"
       }
@@ -277,6 +279,19 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
+    "autoprefixer": {
+      "version": "6.7.7",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz",
+      "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-db": "1.0.30000721",
+        "normalize-range": "0.1.2",
+        "num2fraction": "1.2.2",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
@@ -869,6 +884,15 @@
         "pako": "0.2.9"
       }
     },
+    "browserslist": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
+      "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
+      "requires": {
+        "caniuse-db": "1.0.30000721",
+        "electron-to-chromium": "1.3.18"
+      }
+    },
     "buble": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/buble/-/buble-0.15.2.tgz",
@@ -957,6 +981,22 @@
       "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
       "dev": true
     },
+    "caniuse-api": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
+      "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-db": "1.0.30000721",
+        "lodash.memoize": "4.1.2",
+        "lodash.uniq": "4.5.0"
+      }
+    },
+    "caniuse-db": {
+      "version": "1.0.30000721",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000721.tgz",
+      "integrity": "sha1-zcUu/o+C3RORZhW3job3BOzmGAI="
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -987,7 +1027,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
       "requires": {
         "ansi-styles": "2.2.1",
         "escape-string-regexp": "1.0.5",
@@ -1029,6 +1068,14 @@
       "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
       "dev": true
     },
+    "clap": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.0.tgz",
+      "integrity": "sha1-WckP4+E3EEdG/xlGmiemNP9oyFc=",
+      "requires": {
+        "chalk": "1.1.3"
+      }
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -1078,26 +1125,41 @@
     "clone": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-      "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk="
     },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
     },
+    "coa": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+      "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
+      "requires": {
+        "q": "1.5.0"
+      }
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "color": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz",
+      "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
+      "requires": {
+        "clone": "1.0.2",
+        "color-convert": "1.9.0",
+        "color-string": "0.3.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
       "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -1105,14 +1167,30 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-string": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
+      "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "colormin": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
+      "integrity": "sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=",
+      "requires": {
+        "color": "0.11.4",
+        "css-color-names": "0.0.4",
+        "has": "1.0.1"
+      }
     },
     "colors": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
-      "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
-      "dev": true
+      "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
     },
     "combined-stream": {
       "version": "1.0.5",
@@ -1269,6 +1347,66 @@
         "randombytes": "2.0.5"
       }
     },
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
+    },
+    "cssnano": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz",
+      "integrity": "sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=",
+      "requires": {
+        "autoprefixer": "6.7.7",
+        "decamelize": "1.2.0",
+        "defined": "1.0.0",
+        "has": "1.0.1",
+        "object-assign": "4.1.1",
+        "postcss": "5.2.17",
+        "postcss-calc": "5.3.1",
+        "postcss-colormin": "2.2.2",
+        "postcss-convert-values": "2.6.1",
+        "postcss-discard-comments": "2.0.4",
+        "postcss-discard-duplicates": "2.1.0",
+        "postcss-discard-empty": "2.1.0",
+        "postcss-discard-overridden": "0.1.1",
+        "postcss-discard-unused": "2.2.3",
+        "postcss-filter-plugins": "2.0.2",
+        "postcss-merge-idents": "2.1.7",
+        "postcss-merge-longhand": "2.0.2",
+        "postcss-merge-rules": "2.1.2",
+        "postcss-minify-font-values": "1.0.5",
+        "postcss-minify-gradients": "1.0.5",
+        "postcss-minify-params": "1.2.2",
+        "postcss-minify-selectors": "2.1.1",
+        "postcss-normalize-charset": "1.1.1",
+        "postcss-normalize-url": "3.0.8",
+        "postcss-ordered-values": "2.2.3",
+        "postcss-reduce-idents": "2.4.0",
+        "postcss-reduce-initial": "1.0.1",
+        "postcss-reduce-transforms": "1.0.4",
+        "postcss-svgo": "2.1.6",
+        "postcss-unique-selectors": "2.0.2",
+        "postcss-value-parser": "3.3.0",
+        "postcss-zindex": "2.2.0"
+      }
+    },
+    "csso": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz",
+      "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=",
+      "requires": {
+        "clap": "1.2.0",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "cssom": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
@@ -1328,8 +1466,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "deep-eql": {
       "version": "0.1.3",
@@ -1370,6 +1507,11 @@
         "clone": "1.0.2"
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+    },
     "del": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
@@ -1471,6 +1613,11 @@
         "jsbn": "0.1.1"
       }
     },
+    "electron-to-chromium": {
+      "version": "1.3.18",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz",
+      "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw="
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -1525,8 +1672,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.8.1",
@@ -1844,6 +1990,11 @@
         "write": "0.2.1"
       }
     },
+    "flatten": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2814,6 +2965,11 @@
         "minimatch": "3.0.4"
       }
     },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -2995,11 +3151,18 @@
         "har-schema": "1.0.5"
       }
     },
+    "has": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz",
+      "integrity": "sha1-hGFzP1OLCDfJNh45qauelwTcLyg=",
+      "requires": {
+        "function-bind": "1.1.1"
+      }
+    },
     "has-ansi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -3087,6 +3250,11 @@
       "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
       "dev": true
     },
+    "html-comment-regex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
+      "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4="
+    },
     "html-encoding-sniffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
@@ -3134,6 +3302,11 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
+    },
     "indexof": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
@@ -3256,6 +3429,11 @@
       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
       "dev": true
     },
+    "is-absolute-url": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
+      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY="
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3370,6 +3548,11 @@
         "path-is-inside": "1.0.2"
       }
     },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
+    },
     "is-posix-bracket": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
@@ -3397,6 +3580,14 @@
         "tryit": "1.0.3"
       }
     },
+    "is-svg": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz",
+      "integrity": "sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=",
+      "requires": {
+        "html-comment-regex": "1.1.1"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -3434,6 +3625,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "js-base64": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
+      "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -3471,9 +3667,9 @@
       "dev": true
     },
     "jsdom": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.12.0.tgz",
-      "integrity": "sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=",
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.2.0.tgz",
+      "integrity": "sha512-+5wd6vJuh/Evw3wkmCuKXKibDd5RS7PYZjKaP4s2Hj5W7tvmbuFuaDN4erbH07VznTBFcK+lcsrGVnP6EugXow==",
       "dev": true,
       "requires": {
         "abab": "1.0.3",
@@ -3486,22 +3682,29 @@
         "escodegen": "1.8.1",
         "html-encoding-sniffer": "1.0.1",
         "nwmatcher": "1.4.1",
-        "parse5": "1.5.1",
+        "parse5": "3.0.2",
+        "pn": "1.0.0",
         "request": "2.81.0",
+        "request-promise-native": "1.0.4",
         "sax": "1.2.4",
         "symbol-tree": "3.2.2",
         "tough-cookie": "2.3.2",
         "webidl-conversions": "4.0.1",
         "whatwg-encoding": "1.0.1",
-        "whatwg-url": "4.8.0",
+        "whatwg-url": "6.1.0",
         "xml-name-validator": "2.0.1"
       },
       "dependencies": {
-        "parse5": {
-          "version": "1.5.1",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
-          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
-          "dev": true
+        "whatwg-url": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.1.0.tgz",
+          "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "4.7.0",
+            "tr46": "0.0.3",
+            "webidl-conversions": "4.0.1"
+          }
         }
       }
     },
@@ -3764,12 +3967,28 @@
         "lodash.isarray": "3.0.4"
       }
     },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+    },
     "lodash.some": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
       "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=",
       "dev": true
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
+    },
     "longest": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -3795,6 +4014,11 @@
         "yallist": "2.1.2"
       }
     },
+    "macaddress": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz",
+      "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI="
+    },
     "magic-string": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.19.1.tgz",
@@ -3815,6 +4039,11 @@
       "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.0.tgz",
       "integrity": "sha1-9WHncJ/5oQW4XMYsa47nwVvyTzE="
     },
+    "math-expression-evaluator": {
+      "version": "1.2.17",
+      "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
+      "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -3914,14 +4143,12 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
@@ -4112,6 +4339,22 @@
         "remove-trailing-separator": "1.0.2"
       }
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+    },
+    "normalize-url": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+      "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+      "requires": {
+        "object-assign": "4.1.1",
+        "prepend-http": "1.0.4",
+        "query-string": "4.3.4",
+        "sort-keys": "1.1.2"
+      }
+    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -4125,6 +4368,11 @@
         "set-blocking": "2.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -4144,8 +4392,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object.omit": {
       "version": "2.0.1",
@@ -4374,11 +4621,303 @@
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz",
       "integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k="
     },
+    "postcss": {
+      "version": "5.2.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
+      "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
+      "requires": {
+        "chalk": "1.1.3",
+        "js-base64": "2.1.9",
+        "source-map": "0.5.7",
+        "supports-color": "3.2.3"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
+    "postcss-calc": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz",
+      "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=",
+      "requires": {
+        "postcss": "5.2.17",
+        "postcss-message-helpers": "2.0.0",
+        "reduce-css-calc": "1.3.0"
+      }
+    },
+    "postcss-colormin": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz",
+      "integrity": "sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=",
+      "requires": {
+        "colormin": "1.1.2",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-convert-values": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz",
+      "integrity": "sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=",
+      "requires": {
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
+      "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-discard-duplicates": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz",
+      "integrity": "sha1-uavye4isGIFYpesSq8riAmO5GTI=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-discard-empty": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz",
+      "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-discard-overridden": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz",
+      "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-discard-unused": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz",
+      "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=",
+      "requires": {
+        "postcss": "5.2.17",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-filter-plugins": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz",
+      "integrity": "sha1-bYWGJTTXNaxCDkqFgG4fXUKG2Ew=",
+      "requires": {
+        "postcss": "5.2.17",
+        "uniqid": "4.1.1"
+      }
+    },
+    "postcss-merge-idents": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz",
+      "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=",
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz",
+      "integrity": "sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz",
+      "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=",
+      "requires": {
+        "browserslist": "1.7.7",
+        "caniuse-api": "1.6.1",
+        "postcss": "5.2.17",
+        "postcss-selector-parser": "2.2.3",
+        "vendors": "1.0.1"
+      }
+    },
+    "postcss-message-helpers": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
+      "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4="
+    },
+    "postcss-minify-font-values": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz",
+      "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=",
+      "requires": {
+        "object-assign": "4.1.1",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz",
+      "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=",
+      "requires": {
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-minify-params": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz",
+      "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=",
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz",
+      "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=",
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "has": "1.0.1",
+        "postcss": "5.2.17",
+        "postcss-selector-parser": "2.2.3"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
+      "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz",
+      "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=",
+      "requires": {
+        "is-absolute-url": "2.1.0",
+        "normalize-url": "1.9.1",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz",
+      "integrity": "sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=",
+      "requires": {
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-reduce-idents": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz",
+      "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=",
+      "requires": {
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz",
+      "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=",
+      "requires": {
+        "postcss": "5.2.17"
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz",
+      "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=",
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=",
+      "requires": {
+        "flatten": "1.0.2",
+        "indexes-of": "1.0.1",
+        "uniq": "1.0.1"
+      }
+    },
+    "postcss-svgo": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz",
+      "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=",
+      "requires": {
+        "is-svg": "2.1.0",
+        "postcss": "5.2.17",
+        "postcss-value-parser": "3.3.0",
+        "svgo": "0.7.2"
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz",
+      "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=",
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "postcss": "5.2.17",
+        "uniqs": "2.0.0"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
+    },
+    "postcss-zindex": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz",
+      "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=",
+      "requires": {
+        "has": "1.0.1",
+        "postcss": "5.2.17",
+        "uniqs": "2.0.0"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
       "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
     },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
+    },
     "preserve": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
@@ -4448,11 +4987,25 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
     },
+    "q": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.0.tgz",
+      "integrity": "sha1-3QG6ydBtMObyGa7LglPunr3DCPE="
+    },
     "qs": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
       "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM="
     },
+    "query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "requires": {
+        "object-assign": "4.1.1",
+        "strict-uri-encode": "1.1.0"
+      }
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -4593,6 +5146,38 @@
         "set-immediate-shim": "1.0.1"
       }
     },
+    "reduce-css-calc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+      "requires": {
+        "balanced-match": "0.4.2",
+        "math-expression-evaluator": "1.2.17",
+        "reduce-function-call": "1.0.2"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
+        }
+      }
+    },
+    "reduce-function-call": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz",
+      "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=",
+      "requires": {
+        "balanced-match": "0.4.2"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
+        }
+      }
+    },
     "regenerator-runtime": {
       "version": "0.10.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
@@ -5026,6 +5611,14 @@
         "hoek": "2.16.3"
       }
     },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "requires": {
+        "is-plain-obj": "1.1.0"
+      }
+    },
     "source-list-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
@@ -5082,8 +5675,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.13.1",
@@ -5135,6 +5727,11 @@
         "xtend": "4.0.1"
       }
     },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+    },
     "string_decoder": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
@@ -5180,7 +5777,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -5203,8 +5799,32 @@
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+    },
+    "svgo": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",
+      "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
+      "requires": {
+        "coa": "1.0.4",
+        "colors": "1.1.2",
+        "csso": "2.3.2",
+        "js-yaml": "3.7.0",
+        "mkdirp": "0.5.1",
+        "sax": "1.2.4",
+        "whet.extend": "0.9.9"
+      },
+      "dependencies": {
+        "js-yaml": {
+          "version": "3.7.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
+          "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
+          "requires": {
+            "argparse": "1.0.9",
+            "esprima": "2.7.3"
+          }
+        }
+      }
     },
     "symbol-tree": {
       "version": "3.2.2",
@@ -5407,6 +6027,24 @@
       "dev": true,
       "optional": true
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
+    },
+    "uniqid": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-4.1.1.tgz",
+      "integrity": "sha1-iSIN32t1GuUrX3JISGNShZa7hME=",
+      "requires": {
+        "macaddress": "0.2.8"
+      }
+    },
+    "uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
+    },
     "universalify": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
@@ -5460,6 +6098,11 @@
         "spdx-expression-parse": "1.0.4"
       }
     },
+    "vendors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz",
+      "integrity": "sha1-N61zyO5Bf7PVgOeFMSMH0nSEfyI="
+    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
@@ -5666,6 +6309,11 @@
         }
       }
     },
+    "whet.extend": {
+      "version": "0.9.9",
+      "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
+      "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE="
+    },
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
diff --git a/package.json b/package.json
index 0101cdd..e321c50 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "eslint": "^4.3.0",
     "eslint-config-google": "^0.9.1",
     "js-yaml": "^3.7.0",
-    "jsdom": "^9.10.0",
+    "jsdom": "^11.2.0",
     "marked": "^0.3.6",
     "mocha": "^3.2.0",
     "prismjs": "^1.6.0",
diff --git a/src/components/d-math.js b/src/components/d-math.js
index 6fbf244..e0e511b 100644
--- a/src/components/d-math.js
+++ b/src/components/d-math.js
@@ -2,8 +2,11 @@
 import { Mutating } from '../mixins/mutating.js';
 import { Template } from '../mixins/template.js';
 
-const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
-const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
+// attaches renderMathInElement to window
+import { renderMathInElement } from '../helpers/katex-auto-render';
+
+export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
+export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
 
 const T = Template('d-math', `
 <style>
@@ -25,37 +28,65 @@ ${katexCSSTag}
 `);
 
 
-// DMath, not Math, because that's a JS built-in
+// DMath, not Math, because that would conflict with the JS built-in
 export class DMath extends Mutating(T(HTMLElement)) {
 
+  static set katexOptions(options) {
+    DMath._katexOptions = options;
+    if (DMath.katexOptions.delimiters && !DMath.katexAdded) {
+      DMath.addKatex();
+    }
+  }
+
+  static get katexOptions() {
+    if (!DMath._katexOptions) {
+      DMath._katexOptions = {};
+    }
+    return DMath._katexOptions;
+  }
+
   static katexLoadedCallback() {
+    // render all d-math tags
     const mathTags = document.querySelectorAll('d-math');
     for (const mathTag of mathTags) {
       mathTag.renderContent();
     }
+    // transform inline delimited math to d-math tags
+    if (DMath.katexOptions.delimiters) {
+      const article = document.querySelector('d-article');
+      renderMathInElement(article, DMath.katexOptions);
+    }
+  }
+
+  static addKatex() {
+    // script tag has to be created to work properly
+    const scriptTag = document.createElement('script');
+    scriptTag.src = katexJSURL;
+    scriptTag.async = true;
+    scriptTag.onload = DMath.katexLoadedCallback;
+    scriptTag.crossorigin = 'anonymous';
+    document.head.appendChild(scriptTag);
+    // css tag can use this convenience function
+    document.head.insertAdjacentHTML('beforeend', katexCSSTag);
+
+    DMath.katexAdded = true;
+  }
+
+  get options() {
+    const localOptions = { displayMode: this.hasAttribute('block') };
+    return Object.assign(localOptions, DMath.katexOptions);
   }
 
   connectedCallback() {
     if (!DMath.katexAdded) {
-      // script tag has to be created to work properly
-      const scriptTag = document.createElement('script');
-      scriptTag.src = katexJSURL;
-      scriptTag.async = true;
-      scriptTag.onload = DMath.katexLoadedCallback;
-      scriptTag.crossorigin = 'anonymous';
-      document.head.appendChild(scriptTag);
-      // css tag can use this convenience function
-      document.head.insertAdjacentHTML('beforeend', katexCSSTag);
-
-      DMath.katexAdded = true;
+      DMath.addKatex();
     }
   }
 
   renderContent() {
     if (typeof katex !== 'undefined') {
-      const options = { displayMode: this.hasAttribute('block') };
       const container = this.root.querySelector('#katex-container');
-      katex.render(this.textContent, container, options);
+      katex.render(this.textContent, container, this.options);
     }
   }
 
diff --git a/src/controller.js b/src/controller.js
index 831cb35..6b6f7e2 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -1,4 +1,5 @@
 import { FrontMatter } from './front-matter';
+import { DMath } from './components/d-math';
 import { collectCitations } from './components/d-cite';
 import { parseFrontmatter } from './components/d-front-matter';
 
@@ -116,6 +117,10 @@ export const Controller = {
       if (byline && !byline.getAttribute('prerendered')) {
         byline.frontMatter = frontMatter;
       }
+
+      if (data.katex) {
+        DMath.katexOptions = data.katex;
+      }
     },
 
     DOMContentLoaded() {
diff --git a/src/front-matter.js b/src/front-matter.js
index bcab128..dc33cfe 100644
--- a/src/front-matter.js
+++ b/src/front-matter.js
@@ -96,6 +96,8 @@ export class FrontMatter {
     //  issue: 9,
     this.publishedDate = new Date();
 
+    this.katex = {};
+
     //
     // Assigned from publishing process
     //
@@ -121,6 +123,7 @@ export class FrontMatter {
     this.publishedDate = new Date(data.published);
     this.description = data.description;
     this.authors = data.authors.map( (authorObject) => new Author(authorObject));
+    this.katex = data.katex;
   }
 
   //
diff --git a/src/helpers/katex-auto-render.js b/src/helpers/katex-auto-render.js
new file mode 100644
index 0000000..e9e5b7b
--- /dev/null
+++ b/src/helpers/katex-auto-render.js
@@ -0,0 +1,204 @@
+// This is a straight concatenation of code from KaTeX's contrib folder,
+// but we aren't using some of their helpers that don't work well outside a browser environment.
+
+/*global katex */
+
+const findEndOfMath = function(delimiter, text, startIndex) {
+  // Adapted from
+  // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
+  let index = startIndex;
+  let braceLevel = 0;
+
+  const delimLength = delimiter.length;
+
+  while (index < text.length) {
+    const character = text[index];
+
+    if (braceLevel <= 0 &&
+      text.slice(index, index + delimLength) === delimiter) {
+      return index;
+    } else if (character === '\\') {
+      index++;
+    } else if (character === '{') {
+      braceLevel++;
+    } else if (character === '}') {
+      braceLevel--;
+    }
+
+    index++;
+  }
+
+  return -1;
+};
+
+const splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
+  const finalData = [];
+
+  for (let i = 0; i < startData.length; i++) {
+    if (startData[i].type === 'text') {
+      const text = startData[i].data;
+
+      let lookingForLeft = true;
+      let currIndex = 0;
+      let nextIndex;
+
+      nextIndex = text.indexOf(leftDelim);
+      if (nextIndex !== -1) {
+        currIndex = nextIndex;
+        finalData.push({
+          type: 'text',
+          data: text.slice(0, currIndex),
+        });
+        lookingForLeft = false;
+      }
+
+      while (true) { // eslint-disable-line no-constant-condition
+        if (lookingForLeft) {
+          nextIndex = text.indexOf(leftDelim, currIndex);
+          if (nextIndex === -1) {
+            break;
+          }
+
+          finalData.push({
+            type: 'text',
+            data: text.slice(currIndex, nextIndex),
+          });
+
+          currIndex = nextIndex;
+        } else {
+          nextIndex = findEndOfMath(
+            rightDelim,
+            text,
+            currIndex + leftDelim.length);
+          if (nextIndex === -1) {
+            break;
+          }
+
+          finalData.push({
+            type: 'math',
+            data: text.slice(
+              currIndex + leftDelim.length,
+              nextIndex),
+            rawData: text.slice(
+              currIndex,
+              nextIndex + rightDelim.length),
+            display: display,
+          });
+
+          currIndex = nextIndex + rightDelim.length;
+        }
+
+        lookingForLeft = !lookingForLeft;
+      }
+
+      finalData.push({
+        type: 'text',
+        data: text.slice(currIndex),
+      });
+    } else {
+      finalData.push(startData[i]);
+    }
+  }
+
+  return finalData;
+};
+
+
+const splitWithDelimiters = function(text, delimiters) {
+  let data = [{type: 'text', data: text}];
+  for (let i = 0; i < delimiters.length; i++) {
+    const delimiter = delimiters[i];
+    data = splitAtDelimiters(
+      data, delimiter.left, delimiter.right,
+      delimiter.display || false);
+  }
+  return data;
+};
+
+/* Note: optionsCopy is mutated by this method. If it is ever exposed in the
+ * API, we should copy it before mutating.
+ */
+const renderMathInText = function(text, optionsCopy) {
+  const data = splitWithDelimiters(text, optionsCopy.delimiters);
+  const fragment = document.createDocumentFragment();
+
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].type === 'text') {
+      fragment.appendChild(document.createTextNode(data[i].data));
+    } else {
+      const tag = document.createElement('d-math');
+      const math = data[i].data;
+      // Override any display mode defined in the settings with that
+      // defined by the text itself
+      optionsCopy.displayMode = data[i].display;
+      try {
+        tag.textContent = math;
+        if (optionsCopy.displayMode) {
+          tag.setAttribute('block', '');
+        }
+      } catch (e) {
+        if (!(e instanceof katex.ParseError)) {
+          throw e;
+        }
+        optionsCopy.errorCallback(
+          'KaTeX auto-render: Failed to parse `' + data[i].data +
+          '` with ',
+          e
+        );
+        fragment.appendChild(document.createTextNode(data[i].rawData));
+        continue;
+      }
+      fragment.appendChild(tag);
+    }
+  }
+
+  return fragment;
+};
+
+const renderElem = function(elem, optionsCopy) {
+  for (let i = 0; i < elem.childNodes.length; i++) {
+    const childNode = elem.childNodes[i];
+    if (childNode.nodeType === 3) {
+      // Text node
+      const frag = renderMathInText(childNode.textContent, optionsCopy);
+      i += frag.childNodes.length - 1;
+      elem.replaceChild(frag, childNode);
+    } else if (childNode.nodeType === 1) {
+      // Element node
+      const shouldRender = optionsCopy.ignoredTags.indexOf(
+        childNode.nodeName.toLowerCase()) === -1;
+
+      if (shouldRender) {
+        renderElem(childNode, optionsCopy);
+      }
+    }
+    // Otherwise, it's something else, and ignore it.
+  }
+};
+
+const defaultAutoRenderOptions = {
+  delimiters: [
+    {left: '$$', right: '$$', display: true},
+    {left: '\\[', right: '\\]', display: true},
+    {left: '\\(', right: '\\)', display: false},
+    // LaTeX uses this, but it ruins the display of normal `$` in text:
+    // {left: '$', right: '$', display: false},
+  ],
+
+  ignoredTags: [
+    'script', 'noscript', 'style', 'textarea', 'pre', 'code', 'svg',
+  ],
+
+  errorCallback: function(msg, err) {
+    console.error(msg, err);
+  },
+};
+
+export const renderMathInElement = function(elem, options) {
+  if (!elem) {
+    throw new Error('No element provided to render');
+  }
+
+  const optionsCopy = Object.assign({}, defaultAutoRenderOptions, options);
+  renderElem(elem, optionsCopy);
+};
diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css
index 0c73176..eeb57f7 100644
--- a/src/styles/styles-article.css
+++ b/src/styles/styles-article.css
@@ -185,3 +185,10 @@ d-figure {
   overflow: hidden;
   height: 300px;
 }
+
+/* KaTeX */
+
+.katex, .katex-prerendered {
+  contain: content;
+  display: inline-block;
+}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b301def..98bde29 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -5,14 +5,18 @@ import print from './styles-print.css';
 import { style as byline } from '../components/d-byline.js';
 
 export const styles = base + layout + byline + article + print;
-const styleTagId = 'distill-prerendered-styles';
 
 export function makeStyleTag(dom) {
+
+  const styleTagId = 'distill-prerendered-styles';
   const prerenderedTag = dom.getElementById(styleTagId);
   if (!prerenderedTag) {
-    let styleTag = dom.createElement('style');
+    const styleTag = dom.createElement('style');
     styleTag.id = styleTagId;
-    styleTag.textContent =  styles;
+    styleTag.type = 'text/css';
+    const cssTextTag = dom.createTextNode(styles);
+    styleTag.appendChild(cssTextTag);
     dom.head.insertBefore(styleTag, dom.head.firstChild);
   }
+
 }
diff --git a/src/transforms.js b/src/transforms.js
index dcd6b83..c893499 100644
--- a/src/transforms.js
+++ b/src/transforms.js
@@ -17,14 +17,15 @@ const extractors = [
 import HTML from './transforms/html';
 import Byline from './transforms/byline';
 import Polyfills from './transforms/polyfills';
+import Mathematics from './transforms/mathematics';
 import Meta from './transforms/meta';
 import { makeStyleTag } from './styles/styles';
 import TOC from './transforms/toc';
-// import Typeset from './transforms/typeset';
+import Typeset from './transforms/typeset';
 // import Bibliography from './transforms/bibliography';
 
 const transforms = [
-  HTML, makeStyleTag, TOC, Byline, Polyfills, Meta//, Typeset//, Bibliography
+  HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset//, Bibliography
 ];
 
 /* Distill Transforms */
@@ -41,18 +42,21 @@ const distillTransforms = [
 export function render(dom, data) {
   // first, we collect static data from the dom
   for (const extract of extractors) {
+    // console.warn('Running extractor: ', extract);
     extract(dom, data);
   }
   // secondly we use it to transform parts of the dom
   for (const transform of transforms) {
+    // console.warn('Running transform: ', transform);
     transform(dom, data);
   }
   // the function calling us can now use the transformed dom and filled data object
 }
 
 export function distillify(dom, data) {
-  // thirdly, we optionally use these additional transforms when publishing on the Distill website
+  // thirdly, we can use these additional transforms when publishing on the Distill website
   for (const transform of distillTransforms) {
+    // console.warn('Running distillify: ', transform);
     transform(dom, data);
   }
 }
diff --git a/src/transforms/bibliography.js b/src/transforms/bibliography.js
index 633f29b..b04a88c 100644
--- a/src/transforms/bibliography.js
+++ b/src/transforms/bibliography.js
@@ -14,7 +14,6 @@ export default function(dom, data) {
 
   const prerenderedBibliography = dom.createElement('d-bibliography-prerendered');
 
-
   const template = dom.createElement('template');
   template.innerHTML = templateString;
   const clone = dom.importNode(template.content, true);
diff --git a/src/transforms/mathematics.js b/src/transforms/mathematics.js
new file mode 100644
index 0000000..7124bc4
--- /dev/null
+++ b/src/transforms/mathematics.js
@@ -0,0 +1,33 @@
+import katex from 'katex';
+import { renderMathInElement } from '../helpers/katex-auto-render';
+
+export default function(dom, data) {
+  let needsCSS = false;
+  const article = dom.querySelector('d-article');
+
+  if (data.katex && data.katex.delimiters) {
+    renderMathInElement(article, data.katex);
+  }
+
+  // render d-math tags
+  const mathTags = article.querySelectorAll('d-math');
+  if (mathTags.length > 0) {
+    needsCSS = true;
+    console.warn(`Prerendering ${mathTags.length} math tags...`);
+    for (const mathTag of mathTags) {
+      const localOptions = { displayMode: mathTag.hasAttribute('block') };
+      const options = Object.assign(localOptions, data.katex);
+      const html = katex.renderToString(mathTag.textContent, options);
+      const container = dom.createElement('span');
+      container.innerHTML = html;
+      mathTag.parentElement.insertBefore(container, mathTag);
+      mathTag.parentElement.removeChild(mathTag);
+    }
+  }
+
+  if (needsCSS) {
+    const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
+    dom.head.insertAdjacentHTML('beforeend', katexCSSTag);
+  }
+
+}
diff --git a/src/transforms/styles-article.css b/src/transforms/styles-article.css
deleted file mode 100644
index 379f46d..0000000
--- a/src/transforms/styles-article.css
+++ /dev/null
@@ -1,269 +0,0 @@
-dt-article {
-  display: block;
-  color: rgba(0, 0, 0, 0.8);
-  font: 17px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
-  padding-bottom: 72px;
-  overflow: hidden;
-  background: white;
-  min-height: calc(100vh - 70px - 182px);
-}
-
-@media(min-width: 1024px) {
-  dt-article {
-    font-size: 20px;
-  }
-}
-
-/* H1 */
-
-dt-article h1 {
-  margin-top: 18px;
-  font-weight: 400;
-  font-size: 40px;
-  line-height: 1em;
-  font-family: HoeflerText-Regular, Cochin, Georgia, serif;
-}
-@media(min-width: 768px) {
-  dt-article h1 {
-    font-size: 46px;
-    margin-top: 48px;
-    margin-bottom: 12px;
-  }
-}
-
-@media(min-width: 1080px) {
-  .centered h1 {
-    text-align: center;
-  }
-
-  dt-article h1 {
-    font-size: 50px;
-    letter-spacing: -0.02em;
-  }
-
-  dt-article > h1:first-of-type,
-  dt-article section > h1:first-of-type {
-    margin-top: 80px;
-  }
-}
-
-
-@media(min-width: 1200px) {
-  dt-article h1 {
-    font-size: 56px;
-  }
-
-  dt-article > h1:first-of-type {
-    margin-top: 100px;
-  }
-}
-
-/* H2 */
-
-dt-article h2 {
-  font-family: HoeflerText-Regular, Cochin, Georgia, serif;
-  font-weight: 400;
-  font-size: 26px;
-  line-height: 1.25em;
-  margin-top: 36px;
-  margin-bottom: 24px;
-}
-
-@media(min-width: 1024px) {
-  dt-article h2 {
-    margin-top: 48px;
-    font-size: 30px;
-  }
-}
-
-dt-article h1 + h2 {
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 1.4em;
-  margin-top: 8px;
-  font-style: normal;
-}
-
-
-@media(min-width: 1080px) {
-  .centered h1 + h2 {
-    text-align: center;
-  }
-  dt-article h1 + h2 {
-    margin-top: 12px;
-    font-size: 24px;
-  }
-}
-
-/* H3 */
-
-dt-article h3 {
-  font-family: HoeflerText-Regular, Georgia, serif;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 1.4em;
-  margin-top: 36px;
-  margin-bottom: 18px;
-  font-style: italic;
-}
-
-dt-article h1 + h3 {
-  margin-top: 48px;
-}
-
-@media(min-width: 1024px) {
-  dt-article h3 {
-    font-size: 26px;
-  }
-}
-
-/* H4 */
-
-dt-article h4 {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 1.4em;
-}
-
-dt-article a {
-  color: inherit;
-}
-
-dt-article p,
-dt-article ul,
-dt-article ol {
-  margin-bottom: 24px;
-  font-family: Georgia, serif;
-}
-
-dt-article p b,
-dt-article ul b,
-dt-article ol b {
-  -webkit-font-smoothing: antialiased;
-}
-
-dt-article a {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-  text-decoration: none;
-}
-
-dt-article a:hover {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
-}
-
-dt-article .link {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-dt-article ul,
-dt-article ol {
-  padding-left: 24px;
-}
-
-dt-article li {
-  margin-bottom: 24px;
-  margin-left: 0;
-  padding-left: 0;
-}
-
-dt-article pre {
-  font-size: 14px;
-  margin-bottom: 20px;
-}
-
-
-dt-article hr {
-  border: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin-top: 60px;
-  margin-bottom: 60px;
-}
-
-dt-article section {
-  margin-top: 60px;
-  margin-bottom: 60px;
-}
-
-
-/* Figure */
-
-dt-article figure {
-  position: relative;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-@media(min-width: 1024px) {
-  dt-article figure {
-    margin-top: 48px;
-    margin-bottom: 48px;
-  }
-}
-
-dt-article figure img {
-  width: 100%;
-}
-
-dt-article figure svg text,
-dt-article figure svg tspan {
-}
-
-dt-article figure figcaption {
-  color: rgba(0, 0, 0, 0.6);
-  font-size: 12px;
-  line-height: 1.5em;
-}
-@media(min-width: 1024px) {
-  dt-article figure figcaption {
-    font-size: 13px;
-  }
-}
-
-dt-article figure.external img {
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
-  padding: 18px;
-  box-sizing: border-box;
-}
-
-dt-article figure figcaption a {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-/*dt-article figure figcaption::before {
-  position: relative;
-  display: block;
-  top: -20px;
-  content: "";
-  width: 25px;
-  border-top: 1px solid rgba(0, 0, 0, 0.3);
-}*/
-
-dt-article span.equation-mimic {
-  font-family: georgia;
-  font-size: 115%;
-  font-style: italic;
-}
-
-dt-article figure figcaption b {
-  font-weight: 600;
-  color: rgba(0, 0, 0, 1.0);
-}
-
-dt-article > dt-code,
-dt-article section > dt-code  {
-  display: block;
-}
-
-dt-article .citation {
-  color: #668;
-  cursor: pointer;
-}
-
-dt-include {
-  width: auto;
-  display: block;
-}
diff --git a/src/transforms/styles-base.css b/src/transforms/styles-base.css
deleted file mode 100644
index 5ac85ac..0000000
--- a/src/transforms/styles-base.css
+++ /dev/null
@@ -1,67 +0,0 @@
-html {
-  font: 400 16px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
-  /*background-color: hsl(223, 9%, 25%);*/
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  /*background-color: hsl(223, 9%, 25%);*/
-}
-
-a {
-  color: #004276;
-}
-
-figure {
-  margin: 0;
-}
-
-h1 {
-  font-family: Cochin, Georgia, serif;
-}
-
-/*
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}*/
diff --git a/src/transforms/styles-code.css b/src/transforms/styles-code.css
deleted file mode 100644
index 64d0168..0000000
--- a/src/transforms/styles-code.css
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code {
-  white-space: nowrap;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 2px;
-  padding: 4px 7px;
-  font-size: 15px;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-pre code {
-  display: block;
-  background: white;
-  border-left: 3px solid rgba(0, 0, 0, 0.05);
-  padding: 0 0 0 24px;
-}
-
-
-code[class*="language-"],
-pre[class*="language-"] {
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-  text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
diff --git a/src/transforms/styles-layout.css b/src/transforms/styles-layout.css
deleted file mode 100644
index bd63ce5..0000000
--- a/src/transforms/styles-layout.css
+++ /dev/null
@@ -1,353 +0,0 @@
-/*
-  Column: 60px
-  Gutter: 24px
-
-  Body: 648px
-    - 8 columns
-    - 7 gutters
-  Middle: 816px
-  Page: 984px
-    - 12 columns
-    - 11 gutters
-*/
-
-.l-body,
-.l-body-outset,
-.l-page,
-.l-page-outset,
-.l-middle,
-.l-middle-outset,
-dt-article > div,
-dt-article > p,
-dt-article > h1,
-dt-article > h2,
-dt-article > h3,
-dt-article > h4,
-dt-article > figure,
-dt-article > ul,
-dt-article > dt-byline,
-dt-article > dt-code,
-dt-article section > div,
-dt-article section > p,
-dt-article section > h1,
-dt-article section > h2,
-dt-article section > h3,
-dt-article section > h4,
-dt-article section > figure,
-dt-article section > ul,
-dt-article section > dt-byline,
-dt-article section > dt-code {
-  width: auto;
-  margin-left: 24px;
-  margin-right: 24px;
-  box-sizing: border-box;
-}
-
-@media(min-width: 768px) {
-  .l-body,
-  .l-body-outset,
-  .l-page,
-  .l-page-outset,
-  .l-middle,
-  .l-middle-outset,
-  dt-article > div,
-  dt-article > p,
-  dt-article > h1,
-  dt-article > h2,
-  dt-article > h3,
-  dt-article > h4,
-  dt-article > figure,
-  dt-article > ul,
-  dt-article > dt-byline,
-  dt-article > dt-code,
-  dt-article section > div,
-  dt-article section > p,
-  dt-article section > h1,
-  dt-article section > h2,
-  dt-article section > h3,
-  dt-article section > h4,
-  dt-article section > figure,
-  dt-article section > ul,
-  dt-article section > dt-byline,
-  dt-article section > dt-code {
-    margin-left: 72px;
-    margin-right: 72px;
-  }
-}
-
-@media(min-width: 1080px) {
-  .l-body,
-  dt-article > div,
-  dt-article > p,
-  dt-article > h2,
-  dt-article > h3,
-  dt-article > h4,
-  dt-article > figure,
-  dt-article > ul,
-  dt-article > dt-byline,
-  dt-article > dt-code,
-  dt-article section > div,
-  dt-article section > p,
-  dt-article section > h2,
-  dt-article section > h3,
-  dt-article section > h4,
-  dt-article section > figure,
-  dt-article section > ul,
-  dt-article section > dt-byline,
-  dt-article section > dt-code {
-    margin-left: calc(50% - 984px / 2);
-    width: 648px;
-  }
-  .l-body-outset,
-  dt-article .l-body-outset {
-    margin-left: calc(50% - 984px / 2 - 96px/2);
-    width: calc(648px + 96px);
-  }
-  .l-middle,
-  dt-article .l-middle {
-    width: 816px;
-    margin-left: calc(50% - 984px / 2);
-    margin-right: auto;
-  }
-  .l-middle-outset,
-  dt-article .l-middle-outset {
-    width: calc(816px + 96px);
-    margin-left: calc(50% - 984px / 2 - 48px);
-    margin-right: auto;
-  }
-  dt-article > h1,
-  dt-article section > h1,
-  .l-page,
-  dt-article .l-page,
-  dt-article.centered .l-page {
-    width: 984px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .l-page-outset,
-  dt-article .l-page-outset,
-  dt-article.centered .l-page-outset {
-    width: 1080px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .l-screen,
-  dt-article .l-screen,
-  dt-article.centered .l-screen {
-    margin-left: auto;
-    margin-right: auto;
-    width: auto;
-  }
-  .l-screen-inset,
-  dt-article .l-screen-inset,
-  dt-article.centered .l-screen-inset {
-    margin-left: 24px;
-    margin-right: 24px;
-    width: auto;
-  }
-  .l-gutter,
-  dt-article .l-gutter {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 24px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-    width: calc((984px - 648px) / 2 - 24px);
-  }
-
-  /* Side */
-  .side.l-body,
-  dt-article .side.l-body {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px + 648px) / 2);
-    width: calc(648px / 2 - 24px - 84px);
-  }
-  .side.l-body-outset,
-  dt-article .side.l-body-outset {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px + 648px - 48px) / 2);
-    width: calc(648px / 2 - 48px + 24px);
-  }
-  .side.l-middle,
-  dt-article .side.l-middle {
-    clear: both;
-    float: right;
-    width: calc(456px - 84px);
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .side.l-middle-outset,
-  dt-article .side.l-middle-outset {
-    clear: both;
-    float: right;
-    width: 456px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .side.l-page,
-  dt-article .side.l-page {
-    clear: both;
-    float: right;
-    margin-left: 48px;
-    width: calc(624px - 84px);
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .side.l-page-outset,
-  dt-article .side.l-page-outset {
-    clear: both;
-    float: right;
-    width: 624px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-}
-
-/* Centered */
-
-@media(min-width: 1080px) {
-  .centered .l-body,
-  .centered.l-body,
-  dt-article.centered > div,
-  dt-article.centered > p,
-  dt-article.centered > h2,
-  dt-article.centered > h3,
-  dt-article.centered > h4,
-  dt-article.centered > figure,
-  dt-article.centered > ul,
-  dt-article.centered > dt-byline,
-  dt-article.centered > dt-code,
-  dt-article.centered section > div,
-  dt-article.centered section > p,
-  dt-article.centered section > h2,
-  dt-article.centered section > h3,
-  dt-article.centered section > h4,
-  dt-article.centered section > figure,
-  dt-article.centered section > ul,
-  dt-article.centered section > dt-byline,
-  dt-article.centered section > dt-code,
-  dt-article section.centered > div,
-  dt-article section.centered > p,
-  dt-article section.centered > h2,
-  dt-article section.centered > h3,
-  dt-article section.centered > h4,
-  dt-article section.centered > figure,
-  dt-article section.centered > ul,
-  dt-article section.centered > dt-byline,
-  dt-article section.centered > dt-code {
-    margin-left: auto;
-    margin-right: auto;
-    width: 648px;
-  }
-  .centered .l-body-outset,
-  .centered.l-body-outset,
-  dt-article.centered .l-body-outset {
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(648px + 96px);
-  }
-  dt-article.centered > h1,
-  dt-article.centered section > h1,
-  dt-article section.centered > h1,
-  .centered .l-middle,
-  .centered.l-middle,
-  dt-article.centered .l-middle {
-    width: 816px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .centered .l-middle-outset,
-  .centered.l-middle-outset,
-  dt-article.centered .l-middle-outset {
-    width: calc(816px + 96px);
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  /* page and screen are already centered */
-
-  /* Side */
-
-  .centered .side.l-body,
-  .centered dt-article .side.l-body {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 648px) / 2);
-    width: calc(4 * 60px + 3 * 24px);
-  }
-  .centered .side.l-body-outset,
-  .centered dt-article .side.l-body-outset {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 48px;
-    margin-right: calc((100vw - 648px) / 2);
-    width: calc(4 * 60px + 3 * 24px);
-  }
-  .centered .side.l-middle,
-  .centered dt-article .side.l-middle {
-    clear: both;
-    float: right;
-    width: 396px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px / 2);
-  }
-  .centered .side.l-middle-outset,
-  .centered dt-article .side.l-middle-outset {
-    clear: both;
-    float: right;
-    width: 456px;
-    margin-left: 48px;
-    margin-right: calc((100vw - 984px) / 2 + 168px);
-  }
-  .centered .side.l-page,
-  .centered dt-article .side.l-page {
-    clear: both;
-    float: right;
-    width: 480px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .centered .side.l-page-outset,
-  .centered dt-article .side.l-page-outset {
-    clear: both;
-    float: right;
-    width: 480px;
-    margin-right: calc((100vw - 984px) / 2);
-  }
-  .centered .l-gutter,
-  .centered.l-gutter,
-  dt-article.centered .l-gutter {
-    clear: both;
-    float: right;
-    margin-top: 0;
-    margin-left: 24px;
-    margin-right: calc((100vw - 984px) / 2);
-    width: calc((984px - 648px) / 2 - 24px);
-  }
-
-}
-
-/* Rows and Columns */
-
-.row {
-  display: flex;
-}
-.column {
-  flex: 1;
-  box-sizing: border-box;
-  margin-right: 24px;
-  margin-left: 24px;
-}
-.row > .column:first-of-type {
-  margin-left: 0;
-}
-.row > .column:last-of-type {
-  margin-right: 0;
-}
diff --git a/src/transforms/styles-print.css b/src/transforms/styles-print.css
deleted file mode 100644
index ea5d50e..0000000
--- a/src/transforms/styles-print.css
+++ /dev/null
@@ -1,20 +0,0 @@
-
-@media print {
-  @page {
-    size: 8in 11in;
-  }
-  html {
-  }
-  p, code {
-    page-break-inside: avoid;
-  }
-  h2, h3 {
-    page-break-after: avoid;
-  }
-  dt-header {
-    visibility: hidden;
-  }
-  dt-footer {
-    display: none!important;
-  }
-}
diff --git a/src/transforms/styles.js b/src/transforms/styles.js
deleted file mode 100644
index 206e9b6..0000000
--- a/src/transforms/styles.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import base from './styles-base.css';
-import layout from './styles-layout.css';
-import article from './styles-article.css';
-import code from './styles-code.css';
-import print from './styles-print.css';
-
-export default function(dom) {
-  let s = dom.createElement('style');
-  s.textContent = base + layout + article + code + print;
-  dom.querySelector('head').appendChild(s);
-}

From b8c87b1baf29a673c89fce69b1550f9f32c32896 Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Wed, 30 Aug 2017 16:51:07 -0700
Subject: [PATCH 2/2] Resolve errors from merge + move math styles

---
 bin/render                    |  2 +-
 src/components/d-math.js      | 12 ------------
 src/styles/styles-article.css | 12 ++++++++++++
 src/transforms/mathematics.js |  1 +
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/bin/render b/bin/render
index 68c7b3e..3702d39 100755
--- a/bin/render
+++ b/bin/render
@@ -25,4 +25,4 @@ JSDOM.fromFile(program.input, options).then(dom => {
 
   const transformedHtml = dom.serialize();
   process.stdout.write(transformedHtml);
-});
+}).catch(console.error);
diff --git a/src/components/d-math.js b/src/components/d-math.js
index e40a560..1662b06 100644
--- a/src/components/d-math.js
+++ b/src/components/d-math.js
@@ -20,18 +20,6 @@ const T = Template('d-math', `
   display: block;
 }
 
-#katex-container .katex-display {
-  text-align: left;
-  padding: 8px 0 8px 0;
-  margin: 20px 0;
-}
-
-#katex-container .katex {
-  -webkit-font-smoothing: antialiased;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 1.18em;
-}
-
 </style>
 
 ${katexCSSTag}
diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css
index 825f50c..f8445a5 100644
--- a/src/styles/styles-article.css
+++ b/src/styles/styles-article.css
@@ -187,6 +187,18 @@ d-figure {
 
 /* KaTeX */
 
+d-article .katex-display {
+  text-align: left;
+  padding: 8px 0 8px 0;
+  margin: 20px 0;
+}
+
+d-article .katex {
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 1.18em;
+}
+
 .katex, .katex-prerendered {
   contain: content;
   display: inline-block;
diff --git a/src/transforms/mathematics.js b/src/transforms/mathematics.js
index 7124bc4..a498b1a 100644
--- a/src/transforms/mathematics.js
+++ b/src/transforms/mathematics.js
@@ -6,6 +6,7 @@ export default function(dom, data) {
   const article = dom.querySelector('d-article');
 
   if (data.katex && data.katex.delimiters) {
+    global.document = dom;
     renderMathInElement(article, data.katex);
   }