1.2.3

Fixed blank text-fields with dark browser theme (#365 )
When using dark browser themes the text-fields' text-color becomes white, so the text in those white background text-fields is unreadable. Patched text-color so that it now is readable.
2018-12-10 12:25:27 +00:00 · 2018-12-10 12:24:12 +00:00 · 2018-12-09 07:11:11 +00:00 · 2018-12-04 10:57:07 +00:00 · 2018-12-04 10:55:32 +00:00 · 2018-11-30 11:44:33 +00:00
30 changed files with 936 additions and 379 deletions
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels: 
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Does other service/app have this feature?**
+Add any service you know/use that has this feature (We want to know for research)
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/.travis.yml
+++ b/.travis.yml
@ -4,4 +4,4 @@ node_js:
 - 10
 - 8
 cache: npm
-script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
+script: npm run build
--- a/README.md
+++ b/README.md
@ -22,9 +22,6 @@ npm install
 npm run build
 ```

-You'll get an error on first build because of [a stupid bug we haven't fixed
-yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
-
 You can run the development server with:

 ```sh
--- a/config/add-css-types.js
+++ b/config/add-css-types.js
@ -0,0 +1,74 @@
+const DtsCreator = require('typed-css-modules');
+const chokidar = require('chokidar');
+const util = require('util');
+const sass = require('node-sass');
+
+const sassRender = util.promisify(sass.render);
+
+async function sassToCss(path) {
+  const result = await sassRender({ file: path });
+  return result.css;
+}
+
+/**
+ * @typedef {Object} Opts
+ * @property {boolean} watch Watch for changes
+ */
+/**
+ * Create typing files for CSS & SCSS.
+ *
+ * @param {string[]} rootPaths Paths to search within
+ * @param {Opts} [opts={}] Options.
+ */
+function addCssTypes(rootPaths, opts = {}) {
+  return new Promise((resolve) => {
+    const { watch = false } = opts;
+
+    const paths = [];
+    const preReadyPromises = [];
+    let ready = false;
+
+    for (const rootPath of rootPaths) {
+      // Look for scss & css in each path.
+      paths.push(rootPath + '/**/*.scss');
+      paths.push(rootPath + '/**/*.css');
+    }
+
+    // For simplicity, the watcher is used even if we're not watching.
+    // If we're not watching, we stop the watcher after the initial files are found.
+    const watcher = chokidar.watch(paths, {
+      // Avoid processing already-processed files.
+      ignored: '*.d.*',
+      // Without this, travis and netlify builds never complete. I'm not sure why, but it might be
+      // related to https://github.com/paulmillr/chokidar/pull/758
+      persistent: watch,
+    });
+
+    function change(path) {
+      const promise = (async function() {
+        const creator = new DtsCreator({ camelCase: true });
+        const result = path.endsWith('.scss') ?
+          await creator.create(path, await sassToCss(path)) :
+          await creator.create(path);
+
+        await result.writeFile();
+      })();
+
+      if (!ready) preReadyPromises.push(promise);
+    }
+
+    watcher.on('change', change);
+    watcher.on('add', change);
+
+    // 'ready' is when events have been fired for file discovery.
+    watcher.on('ready', () => {
+      ready = true;
+      // Wait for the current set of processing to finish.
+      Promise.all(preReadyPromises).then(resolve);
+      // And if we're not watching, close the watcher.
+      if (!watch) watcher.close();
+    });
+  })
+}
+
+module.exports = addCssTypes;
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "squoosh",
-  "version": "1.0.2",
+  "version": "1.2.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -618,12 +618,6 @@
      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
      "dev": true
    },
-    "array-filter": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
-      "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=",
-      "dev": true
-    },
    "array-find-index": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@ -636,18 +630,6 @@
      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
      "dev": true
    },
-    "array-map": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
-      "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=",
-      "dev": true
-    },
-    "array-reduce": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
-      "integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=",
-      "dev": true
-    },
    "array-union": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@ -1503,25 +1485,6 @@
        "babel-types": "^6.24.1"
      }
    },
-    "babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-          "dev": true
-        }
-      }
-    },
    "babel-preset-es2015": {
      "version": "6.24.1",
      "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
@ -2458,12 +2421,6 @@
      "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
      "dev": true
    },
-    "colour": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
-      "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g=",
-      "dev": true
-    },
    "combined-stream": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
@ -2952,6 +2909,57 @@
        "source-list-map": "^2.0.0"
      }
    },
+    "css-modules-loader-core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
+      "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.1",
+        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
+          "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.3",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "postcss-modules-extract-imports": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+          "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+          "dev": true,
+          "requires": {
+            "postcss": "^6.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
    "css-select": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@ -4443,22 +4451,6 @@
      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
      "dev": true
    },
-    "event-stream": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.6.tgz",
-      "integrity": "sha512-dGXNg4F/FgVzlApjzItL+7naHutA3fDqbV/zAZqDDlXTjiMnQmZKu+prImWKszeBM5UQeGvAl3u1wBiKeDh61g==",
-      "dev": true,
-      "requires": {
-        "duplexer": "^0.1.1",
-        "flatmap-stream": "^0.1.0",
-        "from": "^0.1.7",
-        "map-stream": "0.0.7",
-        "pause-stream": "^0.0.11",
-        "split": "^1.0.1",
-        "stream-combiner": "^0.2.2",
-        "through": "^2.3.8"
-      }
-    },
    "eventemitter3": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
@ -4992,12 +4984,6 @@
        "readable-stream": "^2.0.2"
      }
    },
-    "flatmap-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/flatmap-stream/-/flatmap-stream-0.1.0.tgz",
-      "integrity": "sha512-Nlic4ZRYxikqnK5rj3YoxDVKGGtUjcNDUtvQ7XsdGLZmMwdUYnXf10o1zcXtzEZTBgc6GxeRpQxV/Wu3WPIIHA==",
-      "dev": true
-    },
    "flow-parser": {
      "version": "0.86.0",
      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.86.0.tgz",
@ -5098,12 +5084,6 @@
      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
      "dev": true
    },
-    "from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
-      "dev": true
-    },
    "from2": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@ -6584,15 +6564,6 @@
      "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
      "dev": true
    },
-    "if-env": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/if-env/-/if-env-1.0.4.tgz",
-      "integrity": "sha1-iytr0wivhqOhm7JzQmdhCFEEh4s=",
-      "dev": true,
-      "requires": {
-        "npm-run-all": "1.4.0"
-      }
-    },
    "iferr": {
      "version": "0.1.5",
      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
@ -7199,6 +7170,12 @@
      "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
      "dev": true
    },
+    "is-there": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/is-there/-/is-there-4.4.3.tgz",
+      "integrity": "sha1-osSTZsakh/cZ28rYDL3iEkjSwY0=",
+      "dev": true
+    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@ -9337,12 +9314,6 @@
      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
      "dev": true
    },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
-      "dev": true
-    },
    "jsprim": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@ -9672,12 +9643,6 @@
      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
      "dev": true
    },
-    "map-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
-      "integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=",
-      "dev": true
-    },
    "map-visit": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@ -10260,9 +10225,9 @@
      }
    },
    "node-sass": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.10.0.tgz",
-      "integrity": "sha512-fDQJfXszw6vek63Fe/ldkYXmRYK/QS6NbvM3i5oEo9ntPDy4XX7BcKZyTKv+/kSSxRtXXc7l+MSwEmYc0CSy6Q==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
+      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
@ -10315,9 +10280,9 @@
          "dev": true
        },
        "har-validator": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.2.tgz",
-          "integrity": "sha512-OFxb5MZXCUMx43X7O8LK4FKggEQx6yC5QPmOcBnYbJ9UjxEcMcrMbaR0af5HZpqeFopw2GwQRQi34ZXI7YLM5w==",
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+          "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
          "dev": true,
          "requires": {
            "ajv": "^6.5.5",
@ -10452,19 +10417,6 @@
        "sort-keys": "^2.0.0"
      }
    },
-    "npm-run-all": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-1.4.0.tgz",
-      "integrity": "sha1-pGm7n+q+W/OqmRaDO69ndlguiUg=",
-      "dev": true,
-      "requires": {
-        "babel-polyfill": "^6.2.0",
-        "minimatch": "^3.0.0",
-        "ps-tree": "^1.0.1",
-        "shell-quote": "^1.4.3",
-        "which": "^1.2.0"
-      }
-    },
    "npm-run-path": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@ -11008,15 +10960,6 @@
        "pify": "^3.0.0"
      }
    },
-    "pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
-      "dev": true,
-      "requires": {
-        "through": "~2.3"
-      }
-    },
    "pbkdf2": {
      "version": "3.0.17",
      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
@ -11890,15 +11833,6 @@
      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
      "dev": true
    },
-    "ps-tree": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.1.0.tgz",
-      "integrity": "sha1-tCGyQUDWID8e08dplrRCewjowBQ=",
-      "dev": true,
-      "requires": {
-        "event-stream": "~3.3.0"
-      }
-    },
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@ -12867,18 +12801,6 @@
      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
      "dev": true
    },
-    "shell-quote": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
-      "integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
-      "dev": true,
-      "requires": {
-        "array-filter": "~0.0.0",
-        "array-map": "~0.0.0",
-        "array-reduce": "~0.0.0",
-        "jsonify": "~0.0.0"
-      }
-    },
    "shelljs": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
@ -13214,15 +13136,6 @@
        "wbuf": "^1.7.2"
      }
    },
-    "split": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
-      "dev": true,
-      "requires": {
-        "through": "2"
-      }
-    },
    "split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@ -13328,16 +13241,6 @@
        "readable-stream": "^2.0.2"
      }
    },
-    "stream-combiner": {
-      "version": "0.2.2",
-      "resolved": "http://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
-      "integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
-      "dev": true,
-      "requires": {
-        "duplexer": "~0.1.1",
-        "through": "~2.3.4"
-      }
-    },
    "stream-each": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
@ -14386,6 +14289,247 @@
        "mime-types": "~2.1.18"
      }
    },
+    "typed-css-modules": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/typed-css-modules/-/typed-css-modules-0.3.7.tgz",
+      "integrity": "sha512-KR1VG/U0rgFWaiQtXKtFMgKaurs80nvlBvZ7BfuYGLldw6kss/97sd+aMG4CI73BbujvefG7DBjnsBqq2Aowcw==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^4.1.0",
+        "chalk": "^2.1.0",
+        "chokidar": "^2.0.3",
+        "css-modules-loader-core": "^1.1.0",
+        "glob": "^7.1.2",
+        "is-there": "^4.4.2",
+        "mkdirp": "^0.5.1",
+        "yargs": "^8.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
+          "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^4.0.1",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
+        "execa": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^5.0.1",
+            "get-stream": "^3.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "load-json-file": {
+          "version": "2.0.0",
+          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "parse-json": "^2.2.0",
+            "pify": "^2.0.0",
+            "strip-bom": "^3.0.0"
+          }
+        },
+        "mem": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
+          "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
+          "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+          "dev": true,
+          "requires": {
+            "execa": "^0.7.0",
+            "lcid": "^1.0.0",
+            "mem": "^1.1.0"
+          }
+        },
+        "parse-json": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.2.0"
+          }
+        },
+        "path-type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
+          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "dev": true,
+          "requires": {
+            "pify": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        },
+        "read-pkg": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
+          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^2.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^2.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
+          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "dev": true,
+          "requires": {
+            "find-up": "^2.0.0",
+            "read-pkg": "^2.0.0"
+          }
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+          "dev": true
+        },
+        "yargs": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "read-pkg-up": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^7.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
+          "integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
+      }
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@ -14398,37 +14542,6 @@
      "integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==",
      "dev": true
    },
-    "typings-for-css-modules-loader": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/typings-for-css-modules-loader/-/typings-for-css-modules-loader-1.7.0.tgz",
-      "integrity": "sha512-Mp7zDrcUmbUKl3JTLamTsMX+lntMotEm5I05j2RHB5EHb0WL1dAXlynpdlGR5Ye/QTvtL5w+RGB2jP32YoUpZw==",
-      "dev": true,
-      "requires": {
-        "colour": "0.7.1",
-        "graceful-fs": "4.1.4",
-        "loader-utils": "0.2.16"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.4",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.4.tgz",
-          "integrity": "sha1-7widKIDwM7ARgjzlyPrnmNp3Xb0=",
-          "dev": true
-        },
-        "loader-utils": {
-          "version": "0.2.16",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.16.tgz",
-          "integrity": "sha1-8IYyBm7YKCg13/iN+1JwR2Wt7m0=",
-          "dev": true,
-          "requires": {
-            "big.js": "^3.1.3",
-            "emojis-list": "^2.0.0",
-            "json5": "^0.5.0",
-            "object-assign": "^4.0.1"
-          }
-        }
-      }
-    },
    "uglify-js": {
      "version": "3.4.9",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "squoosh",
-  "version": "1.0.2",
+  "version": "1.2.3",
  "license": "apache-2.0",
  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --hot",
@ -21,6 +21,7 @@
    "@webcomponents/custom-elements": "^1.2.1",
    "@webpack-cli/serve": "^0.1.2",
    "assets-webpack-plugin": "^3.9.7",
+    "chokidar": "^2.0.4",
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^1.0.0",
    "comlink": "^3.0.3",
@ -34,12 +35,11 @@
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.1.4",
    "idb-keyval": "^3.1.0",
-    "if-env": "^1.0.4",
    "linkstate": "^1.1.1",
    "loader-utils": "^1.1.0",
    "mini-css-extract-plugin": "^0.4.4",
    "minimatch": "^3.0.4",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "pointer-tracker": "^2.0.3",
    "preact": "^8.3.1",
@ -57,8 +57,8 @@
    "tslint-config-airbnb": "^5.11.0",
    "tslint-config-semistandard": "^7.0.0",
    "tslint-react": "^3.6.0",
+    "typed-css-modules": "^0.3.7",
    "typescript": "^3.1.6",
-    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^1.1.2",
    "webpack": "^4.25.1",
    "webpack-bundle-analyzer": "^3.0.3",
--- a/src/codecs/imagequant/options.tsx
+++ b/src/codecs/imagequant/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, konami } from '../../lib/util';
+import { inputFieldValueAsNumber, konami, preventDefault } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Expander from '../../components/expander';
@ -42,7 +42,7 @@ export default class QuantizerOptions extends Component<Props, State> {

  render({ options }: Props, { extendedSettings }: State) {
    return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
        <Expander>
          {extendedSettings ?
            <label class={style.optionTextFirst}>
--- a/src/codecs/input-processors.ts
+++ b/src/codecs/input-processors.ts
@ -0,0 +1,9 @@
+import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
+
+export interface InputProcessorState {
+  rotate: import('./rotate/processor-meta').RotateOptions;
+}
+
+export const defaultInputProcessorState: InputProcessorState = {
+  rotate: rotateDefaultOptions,
+};
--- a/src/codecs/mozjpeg/options.tsx
+++ b/src/codecs/mozjpeg/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldChecked, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -58,7 +58,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
        <div class={style.optionOneCell}>
          <Range
            name="quality"
--- a/src/codecs/optipng/options.tsx
+++ b/src/codecs/optipng/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
 import * as style from '../../components/Options/style.scss';
@ -23,7 +23,7 @@ export default class OptiPNGEncoderOptions extends Component<Props, {}> {

  render({ options }: Props) {
    return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
        <div class={style.optionOneCell}>
          <Range
            name="level"
--- a/src/codecs/processor-worker/index.ts
+++ b/src/codecs/processor-worker/index.ts
@ -1,43 +1,52 @@
 import { expose } from 'comlink';
-import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
-import { QuantizeOptions } from './imagequant/processor-meta';
-import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
-import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';

 async function mozjpegEncode(
-  data: ImageData, options: MozJPEGEncoderOptions,
+  data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-mozjpeg-enc" */
-    './mozjpeg/encoder',
+    '../mozjpeg/encoder',
  );
  return encode(data, options);
 }

-async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
+async function quantize(
+  data: ImageData, opts: import('../imagequant/processor-meta').QuantizeOptions,
+): Promise<ImageData> {
  const { process } = await import(
    /* webpackChunkName: "process-imagequant" */
-    './imagequant/processor',
+    '../imagequant/processor',
  );
  return process(data, opts);
 }

+async function rotate(
+  data: ImageData, opts: import('../rotate/processor-meta').RotateOptions,
+): Promise<ImageData> {
+  const { rotate } = await import(
+    /* webpackChunkName: "process-rotate" */
+    '../rotate/processor',
+  );
+
+  return rotate(data, opts);
+}
+
 async function optiPngEncode(
-  data: BufferSource, options: OptiPNGEncoderOptions,
+  data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
  const { compress } = await import(
    /* webpackChunkName: "process-optipng" */
-    './optipng/encoder',
+    '../optipng/encoder',
  );
  return compress(data, options);
 }

 async function webpEncode(
-  data: ImageData, options: WebPEncoderOptions,
+  data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
  const { encode } = await import(
    /* webpackChunkName: "process-webp-enc" */
-    './webp/encoder',
+    '../webp/encoder',
  );
  return encode(data, options);
 }
@ -45,12 +54,12 @@ async function webpEncode(
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
  const { decode } = await import(
    /* webpackChunkName: "process-webp-dec" */
-    './webp/decoder',
+    '../webp/decoder',
  );
  return decode(data);
 }

-const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
+const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
 export type ProcessorWorkerApi = typeof exports;

 expose(exports, self);
--- a/src/codecs/processor-worker/tsconfig.json
+++ b/src/codecs/processor-worker/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": [
+      "webworker",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noUnusedLocals": true,
+    "sourceMap": true,
+    "allowJs": false,
+    "baseUrl": "."
+  }
+}
--- a/src/codecs/processor.ts
+++ b/src/codecs/processor.ts
@ -1,6 +1,5 @@
 import { proxy } from 'comlink';
 import { QuantizeOptions } from './imagequant/processor-meta';
-import { ProcessorWorkerApi } from './processor-worker';
 import { canvasEncode, blobToArrayBuffer } from '../lib/util';
 import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
 import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
@ -18,8 +17,10 @@ import * as browserTIFF from './browser-tiff/encoder';
 import * as browserJP2 from './browser-jp2/encoder';
 import * as browserPDF from './browser-pdf/encoder';

+type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
+
 /** How long the worker should be idle before terminating. */
-const workerTimeout = 1000;
+const workerTimeout = 10000;

 interface ProcessingJobOptions {
  needsWorker?: boolean;
@ -62,7 +63,7 @@ export default class Processor {
          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
          // definition can't be overwritten.
          this._worker = new Worker(
-            './processor-worker.ts',
+            './processor-worker',
            { name: 'processor-worker', type: 'module' },
          ) as Worker;
          // Need to do some TypeScript trickery to make the type match.
@ -117,12 +118,18 @@ export default class Processor {
  }

  // Off main thread jobs:
-
  @Processor._processingJob({ needsWorker: true })
  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
    return this._workerApi!.quantize(data, opts);
  }

+  @Processor._processingJob({ needsWorker: true })
+  rotate(
+    data: ImageData, opts: import('./rotate/processor-meta').RotateOptions,
+  ): Promise<ImageData> {
+    return this._workerApi!.rotate(data, opts);
+  }
+
  @Processor._processingJob({ needsWorker: true })
  mozjpegEncode(
    data: ImageData, opts: MozJPEGEncoderOptions,
--- a/src/codecs/resize/options.tsx
+++ b/src/codecs/resize/options.tsx
@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import linkState from 'linkstate';
 import { bind, linkRef } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
+import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
 import { ResizeOptions } from './processor-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -78,7 +78,7 @@ export default class ResizerOptions extends Component<Props, State> {

  render({ options, isVector }: Props, { maintainAspect }: State) {
    return (
-      <form ref={linkRef(this, 'form')} class={style.optionsSection}>
+      <form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
        <label class={style.optionTextFirst}>
          Method:
          <Select
@ -135,7 +135,7 @@ export default class ResizerOptions extends Component<Props, State> {
                onChange={this.onChange}
              >
                <option value="stretch">Stretch</option>
-                <option value="cover">Cover</option>
+                <option value="contain">Contain</option>
              </Select>
            </label>
          }
--- a/src/codecs/resize/processor-meta.ts
+++ b/src/codecs/resize/processor-meta.ts
@ -4,7 +4,7 @@ export interface ResizeOptions {
  width: number;
  height: number;
  method: 'vector' | BitmapResizeMethods;
-  fitMethod: 'stretch' | 'cover';
+  fitMethod: 'stretch' | 'contain';
 }

 export interface BitmapResizeOptions extends ResizeOptions {
--- a/src/codecs/resize/processor.ts
+++ b/src/codecs/resize/processor.ts
@ -1,7 +1,7 @@
 import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';

-function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
+function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
  const currentAspect = sw / sh;
  const endAspect = dw / dh;

@ -22,8 +22,8 @@ export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'cover') {
-    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'contain') {
+    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
  }

  return nativeResize(
@ -38,8 +38,8 @@ export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions):
  let sw = data.width;
  let sh = data.height;

-  if (opts.fitMethod === 'cover') {
-    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
+  if (opts.fitMethod === 'contain') {
+    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
  }

  return drawableToImageData(data, {
--- a/src/codecs/rotate/processor-meta.ts
+++ b/src/codecs/rotate/processor-meta.ts
@ -0,0 +1,5 @@
+export interface RotateOptions {
+  rotate: 0 | 90 | 180 | 270;
+}
+
+export const defaultOptions: RotateOptions = { rotate: 0 };
--- a/src/codecs/rotate/processor.ts
+++ b/src/codecs/rotate/processor.ts
@ -0,0 +1,76 @@
+import { RotateOptions } from './processor-meta';
+
+const bpp = 4;
+
+export function rotate(data: ImageData, opts: RotateOptions): ImageData {
+  const { rotate } = opts;
+  const flipDimensions = rotate % 180 !== 0;
+  const { width: inputWidth, height: inputHeight } = data;
+  const outputWidth = flipDimensions ? inputHeight : inputWidth;
+  const outputHeight = flipDimensions ? inputWidth : inputHeight;
+  const out = new ImageData(outputWidth, outputHeight);
+  let i = 0;
+
+  // In the straight-copy case, d1 is x, d2 is y.
+  // x starts at 0 and increases.
+  // y starts at 0 and increases.
+  let d1Start = 0;
+  let d1Limit = inputWidth;
+  let d1Advance = 1;
+  let d1Multiplier = 1;
+  let d2Start = 0;
+  let d2Limit = inputHeight;
+  let d2Advance = 1;
+  let d2Multiplier = inputWidth;
+
+  if (rotate === 90) {
+    // d1 is y, d2 is x.
+    // y starts at its max value and decreases.
+    // x starts at 0 and increases.
+    d1Start = inputHeight - 1;
+    d1Limit = inputHeight;
+    d1Advance = -1;
+    d1Multiplier = inputWidth;
+    d2Start = 0;
+    d2Limit = inputWidth;
+    d2Advance = 1;
+    d2Multiplier = 1;
+  } else if (rotate === 180) {
+    // d1 is x, d2 is y.
+    // x starts at its max and decreases.
+    // y starts at its max and decreases.
+    d1Start = inputWidth - 1;
+    d1Limit = inputWidth;
+    d1Advance = -1;
+    d1Multiplier = 1;
+    d2Start = inputHeight - 1;
+    d2Limit = inputHeight;
+    d2Advance = -1;
+    d2Multiplier = inputWidth;
+  } else if (rotate === 270) {
+    // d1 is y, d2 is x.
+    // y starts at 0 and increases.
+    // x starts at its max and decreases.
+    d1Start = 0;
+    d1Limit = inputHeight;
+    d1Advance = 1;
+    d1Multiplier = inputWidth;
+    d2Start = inputWidth - 1;
+    d2Limit = inputWidth;
+    d2Advance = -1;
+    d2Multiplier = 1;
+  }
+
+  for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
+    for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
+      // Iterate over channels:
+      const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier)) * bpp;
+      for (let j = 0; j < bpp; j += 1) {
+        out.data[i] = data.data[start + j];
+        i += 1;
+      }
+    }
+  }
+
+  return out;
+}
--- a/src/codecs/webp/options.tsx
+++ b/src/codecs/webp/options.tsx
@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import { inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
+import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, WebPImageHint } from './encoder-meta';
 import * as style from '../../components/Options/style.scss';
 import Checkbox from '../../components/checkbox';
@ -319,7 +319,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
    // I'm rendering both lossy and lossless forms, as it becomes much easier when
    // gathering the data.
    return (
-      <form class={style.optionsSection}>
+      <form class={style.optionsSection} onSubmit={preventDefault}>
        <label class={style.optionInputFirst}>
          <Checkbox
            name="lossless"
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -9,9 +9,6 @@ import '../../lib/SnackBar';
 import Intro from '../intro';
 import '../custom-els/LoadingSpinner';

-// This is imported for TypeScript only. It isn't used.
-import Compress from '../compress';
-
 const compressPromise = import(
  /* webpackChunkName: "main-app" */
  '../compress',
@ -21,17 +18,11 @@ const offlinerPromise = import(
  '../../lib/offliner',
 );

-export interface SourceImage {
-  file: File | Fileish;
-  data: ImageData;
-  vectorImage?: HTMLImageElement;
-}
-
 interface Props {}

 interface State {
  file?: File | Fileish;
-  Compress?: typeof Compress;
+  Compress?: typeof import('../compress').default;
 }

 export default class App extends Component<Props, State> {
--- a/src/components/Options/index.tsx
+++ b/src/components/Options/index.tsx
@ -35,7 +35,7 @@ import {
 import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
 import { ResizeOptions } from '../../codecs/resize/processor-meta';
 import { PreprocessorState } from '../../codecs/preprocessors';
-import { SourceImage } from '../App';
+import { SourceImage } from '../compress';
 import Checkbox from '../checkbox';
 import Expander from '../expander';
 import Select from '../select';
@ -81,7 +81,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  onEncoderTypeChange(event: Event) {
+  private onEncoderTypeChange(event: Event) {
    const el = event.currentTarget as HTMLSelectElement;

    // The select element only has values matching encoder types,
@ -91,7 +91,7 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  onPreprocessorEnabledChange(event: Event) {
+  private onPreprocessorEnabledChange(event: Event) {
    const el = event.currentTarget as HTMLInputElement;
    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;

@ -101,14 +101,14 @@ export default class Options extends Component<Props, State> {
  }

  @bind
-  onQuantizerOptionsChange(opts: QuantizeOptions) {
+  private onQuantizerOptionsChange(opts: QuantizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
    );
  }

  @bind
-  onResizeOptionsChange(opts: ResizeOptions) {
+  private onResizeOptionsChange(opts: ResizeOptions) {
    this.props.onPreprocessorOptionsChange(
      cleanMerge(this.props.preprocessorState, 'resize', opts),
    );
@ -144,7 +144,7 @@ export default class Options extends Component<Props, State> {
                {preprocessorState.resize.enabled ?
                  <ResizeOptionsComponent
                    isVector={Boolean(source && source.vectorImage)}
-                    aspect={source ? (source.data.width / source.data.height) : 1}
+                    aspect={source ? source.processed.width / source.processed.height : 1}
                    options={preprocessorState.resize}
                    onChange={this.onResizeOptionsChange}
                  />
--- a/src/components/Options/style.scss
+++ b/src/components/Options/style.scss
@ -43,6 +43,7 @@ $horizontalPadding: 15px;

 .text-field {
  background: #fff;
+  color: #000;
  font: inherit;
  border: none;
  padding: 2px 0 2px 10px;
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@ -5,17 +5,29 @@ import './custom-els/TwoUp';
 import * as style from './style.scss';
 import { bind, linkRef } from '../../lib/initial-util';
 import { shallowEqual, drawDataToCanvas } from '../../lib/util';
-import { ToggleIcon, AddIcon, RemoveIcon, BackIcon } from '../../lib/icons';
+import {
+    ToggleBackgroundIcon,
+    AddIcon,
+    RemoveIcon,
+    BackIcon,
+    ToggleBackgroundActiveIcon,
+    RotateIcon,
+} from '../../lib/icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
+import { InputProcessorState } from '../../codecs/input-processors';
+import { cleanSet } from '../../lib/clean-modify';
+import { SourceImage } from '../compress';

 interface Props {
-  originalImage?: ImageData;
+  source?: SourceImage;
+  inputProcessorState?: InputProcessorState;
  mobileView: boolean;
  leftCompressed?: ImageData;
  rightCompressed?: ImageData;
  leftImgContain: boolean;
  rightImgContain: boolean;
  onBack: () => void;
+  onInputProcessorChange: (newState: InputProcessorState) => void;
 }

 interface State {
@ -70,6 +82,38 @@ export default class Output extends Component<Props, State> {
    const prevRightDraw = this.rightDrawable(prevProps);
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
+    const sourceFileChanged =
+      // Has the value become (un)defined?
+      (!!this.props.source !== !!prevProps.source) ||
+      // Or has the file changed?
+      (this.props.source && prevProps.source && this.props.source.file !== prevProps.source.file);
+
+    const oldSourceData = prevProps.source && prevProps.source.processed;
+    const newSourceData = this.props.source && this.props.source.processed;
+    const pinchZoom = this.pinchZoomLeft!;
+
+    if (sourceFileChanged) {
+      // New image? Reset the pinch-zoom.
+      pinchZoom.setTransform({
+        allowChangeEvent: true,
+        x: 0,
+        y: 0,
+        scale: 1,
+      });
+    } else if (oldSourceData && newSourceData && oldSourceData !== newSourceData) {
+      // Since the pinch zoom transform origin is the top-left of the content, we need to flip
+      // things around a bit when the content size changes, so the new content appears as if it were
+      // central to the previous content.
+      const scaleChange = 1 - pinchZoom.scale;
+      const oldXScaleOffset = oldSourceData.width / 2 * scaleChange;
+      const oldYScaleOffset = oldSourceData.height / 2 * scaleChange;
+
+      pinchZoom.setTransform({
+        allowChangeEvent: true,
+        x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
+        y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
+      });
+    }

    if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
      drawDataToCanvas(this.canvasLeft, leftDraw);
@ -77,16 +121,6 @@ export default class Output extends Component<Props, State> {
    if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
      drawDataToCanvas(this.canvasRight, rightDraw);
    }
-
-    if (this.props.originalImage !== prevProps.originalImage && this.pinchZoomLeft) {
-      // New image? Reset the pinch-zoom.
-      this.pinchZoomLeft.setTransform({
-        allowChangeEvent: true,
-        x: 0,
-        y: 0,
-        scale: 1,
-      });
-    }
  }

  shouldComponentUpdate(nextProps: Props, nextState: State) {
@ -94,11 +128,11 @@ export default class Output extends Component<Props, State> {
  }

  private leftDrawable(props: Props = this.props): ImageData | undefined {
-    return props.leftCompressed || props.originalImage;
+    return props.leftCompressed || (props.source && props.source.processed);
  }

  private rightDrawable(props: Props = this.props): ImageData | undefined {
-    return props.rightCompressed || props.originalImage;
+    return props.rightCompressed || (props.source && props.source.processed);
  }

  @bind
@ -122,6 +156,20 @@ export default class Output extends Component<Props, State> {
    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
  }

+  @bind
+  private onRotateClick() {
+    const { inputProcessorState } = this.props;
+    if (!inputProcessorState) return;
+
+    const newState = cleanSet(
+      inputProcessorState,
+      'rotate.rotate',
+      (inputProcessorState.rotate.rotate + 90) % 360,
+    );
+
+    this.props.onInputProcessorChange(newState);
+  }
+
  @bind
  private onScaleValueFocus() {
    this.setState({ editingScale: true }, () => {
@ -201,11 +249,13 @@ export default class Output extends Component<Props, State> {
  }

  render(
-    { mobileView, leftImgContain, rightImgContain, originalImage, onBack }: Props,
+    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
    { scale, editingScale, altBackground }: State,
  ) {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
+    // To keep position stable, the output is put in a square using the longest dimension.
+    const originalImage = source && source.processed;

    return (
      <div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
@ -227,7 +277,7 @@ export default class Output extends Component<Props, State> {
            ref={linkRef(this, 'pinchZoomLeft')}
          >
            <canvas
-              class={style.outputCanvas}
+              class={style.pinchTarget}
              ref={linkRef(this, 'canvasLeft')}
              width={leftDraw && leftDraw.width}
              height={leftDraw && leftDraw.height}
@ -240,7 +290,7 @@ export default class Output extends Component<Props, State> {
          </pinch-zoom>
          <pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
            <canvas
-              class={style.outputCanvas}
+              class={style.pinchTarget}
              ref={linkRef(this, 'canvasRight')}
              width={rightDraw && rightDraw.width}
              height={rightDraw && rightDraw.height}
@ -286,10 +336,21 @@ export default class Output extends Component<Props, State> {
              <AddIcon />
            </button>
          </div>
-          <button class={style.button} onClick={this.toggleBackground}>
-            <ToggleIcon />
-            Toggle Background
-          </button>
+          <div class={style.buttonsNoWrap}>
+            <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
+              <RotateIcon />
+            </button>
+            <button
+              class={`${style.button} ${altBackground ? style.active : ''}`}
+              onClick={this.toggleBackground}
+              title="Change canvas color"
+            >
+              {altBackground
+                ? <ToggleBackgroundActiveIcon />
+                : <ToggleBackgroundIcon />
+              }
+            </button>
+          </div>
        </div>
      </div>
    );
--- a/src/components/Output/style.scss
+++ b/src/components/Output/style.scss
@ -31,6 +31,15 @@
  align-items: center;
 }

+.pinch-target {
+  // This fixes a severe painting bug in Chrome.
+  // We should try to remove this once the issue is fixed.
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
+  will-change: auto;
+  // Prevent the image becoming misshapen due to default flexbox layout.
+  flex-shrink: 0;
+}
+
 .controls {
  position: absolute;
  display: flex;
@ -55,6 +64,7 @@
    left: 320px;
    right: 320px;
    bottom: 0;
+    flex-wrap: wrap-reverse;
  }
 }

@ -87,6 +97,7 @@
  white-space: nowrap;
  height: 36px;
  padding: 0 8px;
+  cursor: pointer;

  @media (min-width: 600px) {
    height: 48px;
@ -101,15 +112,20 @@
 }

 .button {
-  text-transform: uppercase;
  color: var(--button-fg);
-  cursor: pointer;
-  text-indent: 6px;
-  font-size: 110%;

  &:hover {
    background-color: #eee;
  }
+
+  &.active {
+    background: #34B9EB;
+    color: #fff;
+
+    &:hover {
+      background: #32a3ce;
+    }
+  }
 }

 .zoom {
@ -133,17 +149,18 @@
  border-bottom: 1px dashed #999;
 }

-.output-canvas {
-  flex-shrink: 0;
-  // This fixes a severe painting bug in Chrome.
-  // We should try to remove this once the issue is fixed.
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
-  will-change: auto;
-}
-
 .back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px;
 }
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}
--- a/src/components/compress/index.tsx
+++ b/src/components/compress/index.tsx
@ -35,21 +35,29 @@ import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/pr
 import './custom-els/MultiPanel';
 import Results from '../results';
 import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
-import SnackBarElement from 'src/lib/SnackBar';
+import SnackBarElement from '../../lib/SnackBar';
+import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';

 export interface SourceImage {
  file: File | Fileish;
-  data: ImageData;
+  decoded: ImageData;
+  processed: ImageData;
  vectorImage?: HTMLImageElement;
+  inputProcessorState: InputProcessorState;
 }

-interface EncodedImage {
+interface SideSettings {
+  preprocessorState: PreprocessorState;
+  encoderState: EncoderState;
+}
+
+interface Side {
  preprocessed?: ImageData;
  file?: Fileish;
  downloadUrl?: string;
  data?: ImageData;
-  preprocessorState: PreprocessorState;
-  encoderState: EncoderState;
+  latestSettings: SideSettings;
+  encodedSettings?: SideSettings;
  loading: boolean;
  /** Counter of the latest bmp currently encoding */
  loadingCounter: number;
@ -65,7 +73,7 @@ interface Props {

 interface State {
  source?: SourceImage;
-  images: [EncodedImage, EncodedImage];
+  sides: [Side, Side];
  /** Source image load */
  loading: boolean;
  loadingCounter: number;
@ -77,12 +85,27 @@ interface UpdateImageOptions {
  skipPreprocessing?: boolean;
 }

+async function processInput(
+  data: ImageData,
+  inputProcessData: InputProcessorState,
+  processor: Processor,
+) {
+  let processedData = data;
+
+  if (inputProcessData.rotate.rotate !== 0) {
+    processedData = await processor.rotate(processedData, inputProcessData.rotate);
+  }
+
+  return processedData;
+}
+
 async function preprocessImage(
  source: SourceImage,
  preprocessData: PreprocessorState,
  processor: Processor,
 ): Promise<ImageData> {
-  let result = source.data;
+  let result = source.processed;
+
  if (preprocessData.resize.enabled) {
    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
      result = processor.vectorResize(
@ -131,6 +154,26 @@ async function compressImage(
  );
 }

+function stateForNewSourceData(state: State, newSource: SourceImage): State {
+  let newState = { ...state };
+
+  for (const i of [0, 1]) {
+    // Ditch previous encodings
+    const downloadUrl = state.sides[i].downloadUrl;
+    if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
+
+    newState = cleanMerge(state, `sides.${i}`, {
+      preprocessed: undefined,
+      file: undefined,
+      downloadUrl: undefined,
+      data: undefined,
+      encodedSettings: undefined,
+    });
+  }
+
+  return newState;
+}
+
 async function processSvg(blob: Blob): Promise<HTMLImageElement> {
  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
  // In Chrome it loads, but drawImage behaves weirdly.
@ -162,6 +205,8 @@ const resultTitles = ['Top', 'Bottom'];
 const buttonPositions =
  ['download-left', 'download-right'] as ('download-left' | 'download-right')[];

+const originalDocumentTitle = document.title;
+
 export default class Compress extends Component<Props, State> {
  widthQuery = window.matchMedia('(max-width: 599px)');

@ -169,17 +214,21 @@ export default class Compress extends Component<Props, State> {
    source: undefined,
    loading: false,
    loadingCounter: 0,
-    images: [
+    sides: [
      {
-        preprocessorState: defaultPreprocessorState,
-        encoderState: { type: identity.type, options: identity.defaultOptions },
+        latestSettings: {
+          preprocessorState: defaultPreprocessorState,
+          encoderState: { type: identity.type, options: identity.defaultOptions },
+        },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
      },
      {
-        preprocessorState: defaultPreprocessorState,
-        encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
+        latestSettings: {
+          preprocessorState: defaultPreprocessorState,
+          encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
+        },
        loadingCounter: 0,
        loadedCounter: 0,
        loading: false,
@ -207,7 +256,7 @@ export default class Compress extends Component<Props, State> {

  private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
    this.setState({
-      images: cleanSet(this.state.images, `${index}.encoderState`, {
+      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState`, {
        type: newType,
        options: encoderMap[newType].defaultOptions,
      }),
@ -216,37 +265,50 @@ export default class Compress extends Component<Props, State> {

  private onPreprocessorOptionsChange(index: 0 | 1, options: PreprocessorState): void {
    this.setState({
-      images: cleanSet(this.state.images, `${index}.preprocessorState`, options),
+      sides: cleanSet(this.state.sides, `${index}.latestSettings.preprocessorState`, options),
    });
  }

  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
    this.setState({
-      images: cleanSet(this.state.images, `${index}.encoderState.options`, options),
+      sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState.options`, options),
    });
  }

+  private updateDocumentTitle(filename: string = ''): void {
+    document.title = filename ? `${filename} - ${originalDocumentTitle}` : originalDocumentTitle;
+  }
+
  componentWillReceiveProps(nextProps: Props): void {
    if (nextProps.file !== this.props.file) {
      this.updateFile(nextProps.file);
    }
  }

-  componentDidUpdate(prevProps: Props, prevState: State): void {
-    const { source, images } = this.state;
+  componentWillUnmount(): void {
+    this.updateDocumentTitle();
+  }

-    for (const [i, image] of images.entries()) {
-      const prevImage = prevState.images[i];
-      const sourceChanged = source !== prevState.source;
-      const encoderChanged = image.encoderState !== prevImage.encoderState;
-      const preprocessorChanged = image.preprocessorState !== prevImage.preprocessorState;
+  componentDidUpdate(prevProps: Props, prevState: State): void {
+    const { source, sides } = this.state;
+
+    const sourceDataChanged =
+      // Has the source object become set/unset?
+      !!source !== !!prevState.source ||
+      // Or has the processed data changed?
+      (source && prevState.source && source.processed !== prevState.source.processed);
+
+    for (const [i, side] of sides.entries()) {
+      const prevSettings = prevState.sides[i].latestSettings;
+      const encoderChanged = side.latestSettings.encoderState !== prevSettings.encoderState;
+      const preprocessorChanged =
+        side.latestSettings.preprocessorState !== prevSettings.preprocessorState;

      // The image only needs updated if the encoder/preprocessor settings have changed, or the
      // source has changed.
-      if (sourceChanged || encoderChanged || preprocessorChanged) {
-        if (prevImage.downloadUrl) URL.revokeObjectURL(prevImage.downloadUrl);
+      if (sourceDataChanged || encoderChanged || preprocessorChanged) {
        this.updateImage(i, {
-          skipPreprocessing: !sourceChanged && !preprocessorChanged,
+          skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
        }).catch((err) => {
          console.error(err);
        });
@ -256,10 +318,10 @@ export default class Compress extends Component<Props, State> {

  private async onCopyToOtherClick(index: 0 | 1) {
    const otherIndex = (index + 1) % 2;
-    const oldSettings = this.state.images[otherIndex];
+    const oldSettings = this.state.sides[otherIndex];

    this.setState({
-      images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
+      sides: cleanSet(this.state.sides, otherIndex, this.state.sides[index]),
    });

    const result = await this.props.showSnack('Settings copied across', {
@ -270,13 +332,67 @@ export default class Compress extends Component<Props, State> {
    if (result !== 'undo') return;

    this.setState({
-      images: cleanSet(this.state.images, otherIndex, oldSettings),
+      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
    });
  }

+  @bind
+  private async onInputProcessorChange(options: InputProcessorState): Promise<void> {
+    const source = this.state.source;
+    if (!source) return;
+
+    const oldRotate = source.inputProcessorState.rotate.rotate;
+    const newRotate = options.rotate.rotate;
+    const orientationChanged = oldRotate % 180 !== newRotate % 180;
+    const loadingCounter = this.state.loadingCounter + 1;
+    // Either processor is good enough here.
+    const processor = this.leftProcessor;
+
+    this.setState({
+      loadingCounter, loading: true,
+      source: cleanSet(source, 'inputProcessorState', options),
+    });
+
+    // Abort any current encode jobs, as they're redundant now.
+    this.leftProcessor.abortCurrent();
+    this.rightProcessor.abortCurrent();
+
+    try {
+      const processed = await processInput(source.decoded, options, processor);
+
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+
+      let newState = { ...this.state, loading: false };
+      newState = cleanSet(newState, 'source.processed', processed);
+      newState = stateForNewSourceData(newState, newState.source!);
+
+      if (orientationChanged) {
+        // If orientation has changed, we should flip the resize values.
+        for (const i of [0, 1]) {
+          const resizeSettings = newState.sides[i].latestSettings.preprocessorState.resize;
+          newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
+            width: resizeSettings.height,
+            height: resizeSettings.width,
+          });
+        }
+      }
+      this.setState(newState);
+    } catch (err) {
+      if (err.name === 'AbortError') return;
+      console.error(err);
+      // Another file has been opened/processed before this one processed.
+      if (this.state.loadingCounter !== loadingCounter) return;
+      this.props.showSnack('Processing error');
+      this.setState({ loading: false });
+    }
+  }
+
  @bind
  private async updateFile(file: File | Fileish) {
    const loadingCounter = this.state.loadingCounter + 1;
+    // Either processor is good enough here.
+    const processor = this.leftProcessor;

    this.setState({ loadingCounter, loading: true });

@ -285,7 +401,7 @@ export default class Compress extends Component<Props, State> {
    this.rightProcessor.abortCurrent();

    try {
-      let data: ImageData;
+      let decoded: ImageData;
      let vectorImage: HTMLImageElement | undefined;

      // Special-case SVG. We need to avoid createImageBitmap because of
@ -293,46 +409,43 @@ export default class Compress extends Component<Props, State> {
      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
      if (file.type.startsWith('image/svg+xml')) {
        vectorImage = await processSvg(file);
-        data = drawableToImageData(vectorImage);
+        decoded = drawableToImageData(vectorImage);
      } else {
        // Either processor is good enough here.
-        data = await decodeImage(file, this.leftProcessor);
+        decoded = await decodeImage(file, processor);
      }

-      // Another file has been opened before this one processed.
+      const processed = await processInput(decoded, defaultInputProcessorState, processor);
+
+      // Another file has been opened/processed before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;

      let newState: State = {
        ...this.state,
-        source: { data, file, vectorImage },
+        source: {
+          decoded, file, vectorImage, processed,
+          inputProcessorState: defaultInputProcessorState,
+        },
        loading: false,
      };

+      newState = stateForNewSourceData(newState, newState.source!);
+
      for (const i of [0, 1]) {
-        // Ditch previous encodings
-        const downloadUrl = this.state.images[i].downloadUrl;
-        if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
-
-        newState = cleanMerge(newState, `images.${i}`, {
-          preprocessed: undefined,
-          file: undefined,
-          downloadUrl: undefined,
-          data: undefined,
-        });
-
        // Default resize values come from the image:
-        newState = cleanMerge(newState, `images.${i}.preprocessorState.resize`, {
-          width: data.width,
-          height: data.height,
+        newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
+          width: processed.width,
+          height: processed.height,
          method: vectorImage ? 'vector' : 'browser-high',
        });
      }

+      this.updateDocumentTitle(file.name);
      this.setState(newState);
    } catch (err) {
      if (err.name === 'AbortError') return;
      console.error(err);
-      // Another file has been opened before this one processed.
+      // Another file has been opened/processed before this one processed.
      if (this.state.loadingCounter !== loadingCounter) return;
      this.props.showSnack('Invalid image');
      this.setState({ loading: false });
@ -340,26 +453,31 @@ export default class Compress extends Component<Props, State> {
  }

  private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
-    const { skipPreprocessing = false } = options;
+    const {
+      skipPreprocessing = false,
+    } = options;
    const { source } = this.state;
    if (!source) return;

    // Each time we trigger an async encode, the counter changes.
-    const loadingCounter = this.state.images[index].loadingCounter + 1;
+    const loadingCounter = this.state.sides[index].loadingCounter + 1;

-    let images = cleanMerge(this.state.images, index, {
+    let sides = cleanMerge(this.state.sides, index, {
      loadingCounter,
      loading: true,
    });

-    this.setState({ images });
+    this.setState({ sides });

-    const image = images[index];
+    const side = sides[index];
+    const settings = side.latestSettings;

    let file: File | Fileish | undefined;
    let preprocessed: ImageData | undefined;
    let data: ImageData | undefined;
-    const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
+    const cacheResult = this.encodeCache.match(
+      source.processed, settings.preprocessorState, settings.encoderState,
+    );
    const processor = (index === 0) ? this.leftProcessor : this.rightProcessor;

    // Abort anything the processor is currently doing.
@ -372,60 +490,66 @@ export default class Compress extends Component<Props, State> {
    } else {
      try {
        // Special case for identity
-        if (image.encoderState.type === identity.type) {
-          ({ file, data } = source);
+        if (settings.encoderState.type === identity.type) {
+          file = source.file;
+          data = source.processed;
        } else {
-          preprocessed = (skipPreprocessing && image.preprocessed)
-            ? image.preprocessed
-            : await preprocessImage(source, image.preprocessorState, processor);
+          preprocessed = (skipPreprocessing && side.preprocessed)
+            ? side.preprocessed
+            : await preprocessImage(source, settings.preprocessorState, processor);

-          file = await compressImage(preprocessed, image.encoderState, source.file.name, processor);
+          file = await compressImage(
+            preprocessed, settings.encoderState, source.file.name, processor,
+          );
          data = await decodeImage(file, processor);

          this.encodeCache.add({
-            source,
            data,
            preprocessed,
            file,
-            encoderState: image.encoderState,
-            preprocessorState: image.preprocessorState,
+            sourceData: source.processed,
+            encoderState: settings.encoderState,
+            preprocessorState: settings.preprocessorState,
          });
        }
      } catch (err) {
        if (err.name === 'AbortError') return;
-        this.props.showSnack(`Processing error (type=${image.encoderState.type}): ${err}`);
+        this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
        throw err;
      }
    }

-    const latestImage = this.state.images[index];
+    const latestData = this.state.sides[index];
    // If a later encode has landed before this one, return.
-    if (loadingCounter < latestImage.loadedCounter) {
+    if (loadingCounter < latestData.loadedCounter) {
      return;
    }

-    images = cleanMerge(this.state.images, index, {
+    if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
+
+    sides = cleanMerge(this.state.sides, index, {
      file,
      data,
      preprocessed,
      downloadUrl: URL.createObjectURL(file),
-      loading: images[index].loadingCounter !== loadingCounter,
+      loading: sides[index].loadingCounter !== loadingCounter,
      loadedCounter: loadingCounter,
+      encodedSettings: settings,
    });

-    this.setState({ images });
+    this.setState({ sides });
  }

-  render({ onBack }: Props, { loading, images, source, mobileView }: State) {
-    const [leftImage, rightImage] = images;
-    const [leftImageData, rightImageData] = images.map(i => i.data);
+  render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
+    const [leftSide, rightSide] = sides;
+    const [leftImageData, rightImageData] = sides.map(i => i.data);

-    const options = images.map((image, index) => (
+    const options = sides.map((side, index) => (
      <Options
        source={source}
        mobileView={mobileView}
-        preprocessorState={image.preprocessorState}
-        encoderState={image.encoderState}
+        preprocessorState={side.latestSettings.preprocessorState}
+        encoderState={side.latestSettings.encoderState}
        onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
@ -435,33 +559,44 @@ export default class Compress extends Component<Props, State> {
    const copyDirections =
      (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];

-    const results = images.map((image, index) => (
+    const results = sides.map((side, index) => (
      <Results
-        downloadUrl={image.downloadUrl}
-        imageFile={image.file}
+        downloadUrl={side.downloadUrl}
+        imageFile={side.file}
        source={source}
-        loading={loading || image.loading}
+        loading={loading || side.loading}
        copyDirection={copyDirections[index]}
        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
      >
        {!mobileView ? null : [
          <ExpandIcon class={style.expandIcon} key="expand-icon"/>,
-          `${resultTitles[index]} (${encoderMap[image.encoderState.type].label})`,
+          `${resultTitles[index]} (${encoderMap[side.latestSettings.encoderState.type].label})`,
        ]}
      </Results>
    ));

+    // For rendering, we ideally want the settings that were used to create the data, not the latest
+    // settings.
+    const leftDisplaySettings = leftSide.encodedSettings || leftSide.latestSettings;
+    const rightDisplaySettings = rightSide.encodedSettings || rightSide.latestSettings;
+    const leftImgContain = leftDisplaySettings.preprocessorState.resize.enabled &&
+      leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
+    const rightImgContain = rightDisplaySettings.preprocessorState.resize.enabled &&
+      rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
+
    return (
      <div class={style.compress}>
        <Output
-          originalImage={source && source.data}
+          source={source}
          mobileView={mobileView}
          leftCompressed={leftImageData}
          rightCompressed={rightImageData}
-          leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
-          rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
+          leftImgContain={leftImgContain}
+          rightImgContain={rightImgContain}
          onBack={onBack}
+          inputProcessorState={source && source.inputProcessorState}
+          onInputProcessorChange={this.onInputProcessorChange}
        />
        {mobileView
          ? (
--- a/src/components/compress/result-cache.ts
+++ b/src/components/compress/result-cache.ts
@ -1,7 +1,6 @@
 import { EncoderState } from '../../codecs/encoders';
 import { Fileish } from '../../lib/initial-util';
 import { shallowEqual } from '../../lib/util';
-import { SourceImage } from '.';
 import { PreprocessorState } from '../../codecs/preprocessors';

 import * as identity from '../../codecs/identity/encoder-meta';
@ -15,7 +14,7 @@ interface CacheResult {
 interface CacheEntry extends CacheResult {
  preprocessorState: PreprocessorState;
  encoderState: EncoderState;
-  source: SourceImage;
+  sourceData: ImageData;
 }

 const SIZE = 5;
@ -32,13 +31,13 @@ export default class ResultCache {
  }

  match(
-    source: SourceImage,
+    sourceData: ImageData,
    preprocessorState: PreprocessorState,
    encoderState: EncoderState,
  ): CacheResult | undefined {
    const matchingIndex = this._entries.findIndex((entry) => {
      // Check for quick exits:
-      if (entry.source !== source) return false;
+      if (entry.sourceData !== sourceData) return false;
      if (entry.encoderState.type !== encoderState.type) return false;

      // Check that each set of options in the preprocessor are the same
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@ -12,9 +12,21 @@ export const DownloadIcon = (props: JSX.HTMLAttributes) => (
  </Icon>
 );

-export const ToggleIcon = (props: JSX.HTMLAttributes) => (
+export const ToggleBackgroundIcon = (props: JSX.HTMLAttributes) => (
  <Icon {...props}>
-    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
+    <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
+  </Icon>
+);
+
+export const ToggleBackgroundActiveIcon = (props: JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"/>
+  </Icon>
+);
+
+export const RotateIcon = (props: JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z"/>
  </Icon>
 );

--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@ -297,3 +297,10 @@ export async function transitionHeight(el: HTMLElement, opts: TransitionOptions)
    el.addEventListener('transitioncancel', listener);
  });
 }
+
+/**
+ * Simple event listener that prevents the default.
+ */
+export function preventDefault(event: Event) {
+  event.preventDefault();
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,5 +13,8 @@
    "allowJs": false,
    "baseUrl": "."
  },
-  "exclude": ["src/sw/**/*"]
+  "exclude": [
+    "src/sw/**/*",
+    "src/codecs/processor-worker/**/*"
+  ]
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -15,6 +15,7 @@ const WorkerPlugin = require('worker-plugin');
 const AutoSWPlugin = require('./config/auto-sw-plugin');
 const CrittersPlugin = require('critters-webpack-plugin');
 const AssetTemplatePlugin = require('./config/asset-template-plugin');
+const addCssTypes = require('./config/add-css-types');

 function readJson (filename) {
  return JSON.parse(fs.readFileSync(filename));
@ -22,7 +23,7 @@ function readJson (filename) {

 const VERSION = readJson('./package.json').version;

-module.exports = function (_, env) {
+module.exports = async function (_, env) {
  const isProd = env.mode === 'production';
  const nodeModules = path.join(__dirname, 'node_modules');
  const componentStyleDirs = [
@ -32,6 +33,8 @@ module.exports = function (_, env) {
    path.join(__dirname, 'src/lib'),
  ];

+  await addCssTypes(componentStyleDirs, { watch: !isProd });
+
  return {
    mode: isProd ? 'production' : 'development',
    entry: {
@ -109,9 +112,7 @@ module.exports = function (_, env) {
            // In production, CSS is extracted to files on disk. In development, it's inlined into JS:
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            {
-              // This is a fork of css-loader that auto-generates .d.ts files for CSS module imports.
-              // The result is a definition file with the exported String classname mappings.
-              loader: 'typings-for-css-modules-loader',
+              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: isProd ? '[hash:base64:5]' : '[local]__[hash:base64:5]',
@ -169,7 +170,11 @@ module.exports = function (_, env) {
      ]
    },
    plugins: [
-      new webpack.IgnorePlugin(/(fs|crypto|path)/, /\/codecs\//),
+      new webpack.IgnorePlugin(
+        /(fs|crypto|path)/,
+        new RegExp(`${path.sep}codecs${path.sep}`)
+      ),
+
      // Pretty progressbar showing build progress:
      new ProgressBarPlugin({
        format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
Author	SHA1	Message	Date
Jake Archibald	593ad62cbb	1.2.3	2018-12-10 12:25:27 +00:00
Andrea Somaini	a625a76e9e	Fixed blank text-fields with dark browser theme (#365 ) When using dark browser themes the text-fields' text-color becomes white, so the text in those white background text-fields is unreadable. Patched text-color so that it now is readable.	2018-12-10 12:24:12 +00:00
Jake Archibald	c2a305304b	Rotation optimise. Fixes #362 (#363 ) * Move early exit for no-rotation. * lol this was meant to be 10 seconds.	2018-12-09 07:11:11 +00:00
Jake Archibald	7389c507fb	1.2.2	2018-12-04 10:57:07 +00:00
Jake Archibald	68f0f23016	Prevent image becoming misshapen on resize. Fixes #359 . (#360 )	2018-12-04 10:55:32 +00:00
Jake Archibald	dc809dde30	1.2.1	2018-11-30 11:44:33 +00:00
Jake Archibald	80dfa03b94	Avoid wrapping a single button (#357 ) * Avoid wrapping a single button * Making the zoom controls appear on the bottom, when the controls are positioned on the bottom	2018-11-30 11:44:15 +00:00
Jake Archibald	fca7a5350d	1.2.0	2018-11-30 11:02:10 +00:00
Jake Archibald	1b693fb57a	Rotate (#322 ) * Basic rotate & flip * Flipping resize when orientation changes * Hack around critters issue. * Removing generator. Huge perf boost. * Stable positioning * Creating input processors * Allowing rotation to be changed * Reverting old change * Adding tooltips * No more flip * Removing need for wrapper element boxing * Adding comment * Addressing nits * Bleh	2018-11-30 11:00:25 +00:00
Jake Archibald	7723bd3b5f	Making processor-worker a real worker (to TypeScript) (#351 )	2018-11-29 08:39:48 +00:00
Jake Archibald	723fc142ec	1.1.0	2018-11-29 08:01:46 +00:00
Vadym	06d4d946d9	Display uploaded file name in the document title (#244 ) (#326 ) * Add filename to the document.title * minor fixes * no-space-before-colon	2018-11-29 07:59:34 +00:00
Jake Archibald	428b7d976d	Create CSS typings before build. Fixes #251 . (#350 ) * Create CSS typings before build * Let's try this. * Adding comment * Remove hack from travis	2018-11-28 16:09:08 +00:00
Tiger Oakes	32f2b4e573	Remove TypeScript-specific static Compress import (#338 ) Previously, Compress had a static import only used by TypeScript, as the module was loaded dynamically. The type can be replaced with `import().default`. TypeScript 2.9 introduced the ability to use `import()` within type statements. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types	2018-11-28 14:57:05 +00:00
Jake Archibald	b3ab983f02	Removing if-env (it used the dreaded event-stream). Fixes 339. (#340 ) Also updating node-sass.	2018-11-27 11:53:23 +00:00
Surma	e011724af4	Merge pull request #331 from GoogleChromeLabs/fix-windows-build Fix build on Windows	2018-11-22 11:21:24 +00:00
Jason Miller	f11a6cb38a	Fix build on Windows Fixes #282.	2018-11-21 11:18:01 -05:00
Jake Archibald	adf6d3c60d	Preventing form defaults. Fixes #294 . (#329 )	2018-11-21 07:14:40 +00:00
Surma	bb8f35ce09	Merge pull request #323 from GoogleChromeLabs/sass-downgrade Downgrade node-sass (fixes #319)	2018-11-19 12:22:00 +00:00
Surma	ae9ae31ddc	Downgrade node-sass (fixes #319 )	2018-11-19 12:06:47 +00:00
Mariko Kosaka	67893817b5	Update issue templates to include feature request (#318 )	2018-11-19 01:26:50 -08:00