From 8c9277566b4548c8fb9ba2cf8cb4c1b81f3e3686 Mon Sep 17 00:00:00 2001
From: Robin Appelman <robin@icewind.nl>
Date: Thu, 13 Dec 2018 17:13:14 +0100
Subject: [PATCH] move settings to vue

Signed-off-by: Robin Appelman <robin@icewind.nl>
---
 Makefile                              |    5 +
 css/admin.css                         |   38 -
 js/App.vue                            |   14 -
 js/GuestSettings.vue                  |  147 ++++
 js/guests.js                          |  167 ----
 js/settings.js                        |   10 +
 lib/AppWhitelist.php                  |    4 +-
 lib/Controller/SettingsController.php |    8 +-
 lib/Settings/Admin.php                |    4 +-
 package-lock.json                     | 1027 +++++++++++++++++++++++++
 package.json                          |    6 +
 postcss.config.js                     |    6 +
 templates/settings/admin.php          |   61 +-
 webpack.config.js                     |   28 +-
 14 files changed, 1236 insertions(+), 289 deletions(-)
 delete mode 100644 css/admin.css
 delete mode 100644 js/App.vue
 create mode 100644 js/GuestSettings.vue
 delete mode 100644 js/guests.js
 create mode 100644 js/settings.js
 create mode 100644 postcss.config.js

diff --git a/Makefile b/Makefile
index 807af79..20d0c7c 100644
--- a/Makefile
+++ b/Makefile
@@ -11,6 +11,11 @@ jssources=$(wildcard js/*) $(wildcard js/*/*) $(wildcard css/*/*)  $(wildcard cs
 
 all: dist/index.js
 
+.PHONY: watch
+
+watch:
+	node node_modules/.bin/webpack-dev-server --watch --hot --inline --port 3000 --public localcloud.icewind.me:444 --mode development --config webpack.config.js
+
 clean:
 	rm -rf $(build_dir)
 	rm -rf node_modules
diff --git a/css/admin.css b/css/admin.css
deleted file mode 100644
index 9f22578..0000000
--- a/css/admin.css
+++ /dev/null
@@ -1,38 +0,0 @@
-#guests .select2-container-multi .select2-choices .select2-search-choice {
-	padding-left: 20px;
-}
-
-#guests .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
-	display: inherit;
-	top: 7px;
-}
-
-#guests .select2-container {
-	width: calc(100% - 48px);
-	margin-right: 0;
-}
-
-#guests .select2-container ul {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	border-right: 0;
-}
-
-#guests .whitelist {
-	display: flex;
-}
-
-#guests #guestResetWhitelist {
-	align-items: stretch;
-	width: 32px;
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
-#guests .msg {
-	font-size: 14px;
-}
-
-#guests .whitelist-toggle {
-	margin: 1em 0;
-}
diff --git a/js/App.vue b/js/App.vue
deleted file mode 100644
index b611042..0000000
--- a/js/App.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-	<h1>{{ message }}</h1>
-</template>
-
-<script>
-	export default {
-		name: 'app',
-		data() {
-			return {
-				message: 'Hello, Vue!'
-			};
-		}
-	};
-</script>
diff --git a/js/GuestSettings.vue b/js/GuestSettings.vue
new file mode 100644
index 0000000..10dd7e6
--- /dev/null
+++ b/js/GuestSettings.vue
@@ -0,0 +1,147 @@
+<template>
+	<div class="section" id="guests">
+		<h2>Guests <span class="msg" ref="msg"></span></h2>
+		<div v-if="loaded">
+			<p>
+				<span class="user-info-label">
+					{{ t('guests', 'Guest users are grouped under a virtual group in the user manager') }}
+				</span>
+			</p>
+			<p class="external-storage-toggle">
+				<input type="checkbox"
+					   id="allowExternalStorage"
+					   class="checkbox"
+					   @change="saveConfig"
+					   v-model="config.allowExternalStorage"/>
+				<label for="allowExternalStorage">
+					{{ t('guests', 'Guest users can access mounted external storages') }}
+				</label>
+			</p>
+			<p class="whitelist-toggle">
+				<input type="checkbox"
+					   id="guestUseWhitelist"
+					   class="checkbox"
+					   @change="saveConfig"
+					   v-model="config.useWhitelist"/>
+				<label for="guestUseWhitelist">
+					{{ t('guests', 'Limit guest access to an app whitelist') }}
+				</label>
+			</p>
+			<p class="whitelist" v-if="config.useWhitelist">
+				<v-select :options="config.whiteListableApps" multiple v-model="config.whitelist"
+						  :on-change="saveConfig"></v-select>
+				<button :title="t('guests', 'Reset')" type="button" class="icon-history icon" @click="reset"></button>
+			</p>
+		</div>
+		<div v-if="!loaded">
+			<div class="loading"/>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'guest-settings',
+		data () {
+			return {
+				loaded: false,
+				config: {
+					useWhitelist: false,
+					allowExternalStorage: false,
+					whitelist: [],
+					whiteListableApps: [],
+				}
+			};
+		},
+		methods: {
+			loadConfig () {
+				$.get(OC.generateUrl('apps/guests/config'))
+					.then(data => {
+						this.config = data;
+						this.$nextTick(() => {
+							this.loaded = true;
+						});
+					});
+			},
+			saveConfig () {
+				if (!this.loaded) {
+					return;
+				}
+				OC.msg.startSaving(this.$refs.msg);
+				$.ajax({
+					type: 'PUT',
+					url: OC.generateUrl('apps/guests/config'),
+					data: this.config,
+					dataType: 'json'
+				})
+					.success(() => {
+						const data = {status: 'success', data: {message: t('guests', 'Saved')}};
+						OC.msg.finishedSaving(this.$refs.msg, data);
+					})
+					.fail((result) => {
+						const data = {status: 'error', data: {message: result.responseJSON.message}};
+						OC.msg.finishedSaving(this.$refs.msg, data);
+					});
+			},
+			reset () {
+				OC.msg.startSaving(this.$refs.msg);
+				$.ajax({
+					type: 'POST',
+					url: OC.generateUrl('apps/guests/whitelist/reset')
+				}).success((response) => {
+					this.config.whitelist = response.whitelist;
+
+					OC.msg.finishedSaving(this.$refs.msg, {
+						status: 'success',
+						data: {message: t('guests', 'Reset')}
+					});
+				}).fail((response) => {
+					OC.msg.finishedSaving(this.$refs.msg, {
+						status: 'error',
+						data: {message: response.responseJSON.message}
+					});
+				});
+			}
+		},
+		beforeMount () {
+			this.loadConfig();
+		}
+	};
+</script>
+
+<style>
+	#guests {
+		.whitelist {
+			display: flex;
+
+			.dropdown {
+				width: calc(100% - 48px);
+				margin-right: 0;
+
+				.dropdown-toggle {
+					border-top-right-radius: 0;
+					border-bottom-right-radius: 0;
+					border-right: 0;
+					flex-wrap: nowrap;
+
+					input {
+						min-height: auto;
+
+						&:hover, &:active, &:focus {
+							border-color: transparent;
+						}
+					}
+				}
+			}
+
+			button {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+
+			.whitelist-toggle {
+				margin: 1em 0;
+			}
+		}
+	}
+</style>
diff --git a/js/guests.js b/js/guests.js
deleted file mode 100644
index 23f29c2..0000000
--- a/js/guests.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * ownCloud
- *
- * @author Jörn Friedrich Dreyer <jfd@owncloud.com>
- * @copyright (C) 2015-2017 ownCloud, Inc.
- *
- * This code is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License, version 3,
- * as published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License, version 3,
- * along with this program.  If not, see <http://www.gnu.org/licenses/>
- */
-(function() {
-
-	$(document).ready(function () {
-
-		// variables
-		var $section = $('#guests');
-		var $guestsByGroup = $section.find('#guestsByGroup');
-		var $allowExternalStorage = $section.find('#allowExternalStorage');
-		var $guestUseWhitelist = $section.find('#guestUseWhitelist');
-		var $guestWhitelist = $section.find('#guestWhitelist');
-		var $guestWhitelistContainer = $section.find('.whitelist');
-		var $resetWhitelist = $section.find('#guestResetWhitelist');
-		var $msg = $section.find('.msg');
-		var loading = true;
-
-		var config = { conditions: ['quota'], group: 'guests',
-			useWhitelist: true, whitelist:[
-				'','core','settings','avatar','files','files_trashbin','files_sharing'
-			]};
-
-		$guestWhitelist.select2();
-
-		// functions
-
-		var loadConfig = function () {
-			OC.msg.startAction($msg, t('guests', 'Loading…'));
-			$.get(
-				OC.generateUrl('apps/guests/config'),
-				'',
-				function (data) {
-					// update model
-					config = data;
-					// update ui
-					if(config.useWhitelist) {
-						$guestUseWhitelist.prop('checked', true);
-						$guestWhitelistContainer.show();
-					} else {
-						$guestUseWhitelist.prop('checked', false);
-						$guestWhitelistContainer.hide();
-					}
-					$allowExternalStorage.prop('checked', config.allowExternalStorage);
-					if ($.isArray(config.whitelist)) {
-						$guestWhitelist.val(config.whitelist).trigger("change");
-					}
-					loading = false;
-				},
-				'json'
-			).then(function() {
-				var data = { status: 'success',	data: {message: t('guests', 'Loaded')} };
-				OC.msg.finishedAction($msg, data);
-			}, function(result) {
-				var data = { status: 'error', data:{message:result.responseJSON.message} };
-				OC.msg.finishedAction($msg, data);
-			});
-		};
-
-		var saveConfig = function () {
-			if (loading) {
-				return;
-			}
-			OC.msg.startSaving($msg);
-			$.ajax({
-				type: 'PUT',
-				url: OC.generateUrl('apps/guests/config'),
-				data: config,
-				dataType: 'json'
-			}).success(function() {
-				var data = { status:'success', data:{message:t('guests', 'Saved')} };
-				OC.msg.finishedSaving($msg, data);
-			}).fail(function(result) {
-				var data = { status: 'error', data:{message:result.responseJSON.message} };
-				OC.msg.finishedSaving($msg, data);
-			});
-		};
-
-		// load initial config
-		loadConfig();
-
-		var updateConditions = function () {
-			var conditions = [];
-
-			if ($guestsByGroup.prop('checked')) {
-				conditions.push('group');
-			}
-			config.conditions = conditions;
-		};
-
-		// listen to ui changes
-		$guestsByGroup.on('change', function () {
-			updateConditions();
-			saveConfig();
-		});
-
-		$guestUseWhitelist.on('change', function () {
-			config.useWhitelist = $guestUseWhitelist.prop('checked');
-			if(config.useWhitelist) {
-				$guestWhitelistContainer.show();
-			} else {
-				$guestWhitelistContainer.hide();
-			}
-			saveConfig();
-		});
-		$guestWhitelist.on('change', function () {
-			var apps = $guestWhitelist.val();
-			config.whitelist = [];
-			$.each(apps, function( index, value ) {
-				config.whitelist.push(value.trim());
-			});
-			saveConfig();
-		});
-		$allowExternalStorage.on('change', function () {
-			config.allowExternalStorage = $allowExternalStorage.prop('checked');
-			saveConfig();
-		});
-		$resetWhitelist.on('click', function () {
-			OC.msg.startSaving($msg);
-			$.ajax({
-				type: 'POST',
-				url: OC.generateUrl('apps/guests/whitelist/reset')
-			}).success(function(response) {
-				config.whitelist = response.whitelist;
-
-				// prevent it saving again
-				loading = true;
-
-				//update ui
-				if ($.isArray(config.whitelist)) {
-					$guestWhitelist.val(config.whitelist).trigger("change");
-				} else {
-					$guestWhitelist.val([]).trigger("change");
-				}
-
-				loading = false;
-
-				OC.msg.finishedSaving($msg, {
-					status:'success',
-					data: { message:t('guests', 'Reset') }
-				});
-			}).fail(function(response) {
-				OC.msg.finishedSaving($msg, {
-					status: 'error',
-					data: { message: response.responseJSON.message }
-				});
-			});
-		});
-
-	});
-
-})();
diff --git a/js/settings.js b/js/settings.js
new file mode 100644
index 0000000..09b22a8
--- /dev/null
+++ b/js/settings.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import GuestSettings from './GuestSettings.vue';
+import Nextcloud from './mixins/Nextcloud';
+import vSelect from 'vue-select';
+
+Vue.component('v-select', vSelect);
+
+Vue.mixin(Nextcloud);
+
+(new Vue(GuestSettings)).$mount('#guest-settings');
diff --git a/lib/AppWhitelist.php b/lib/AppWhitelist.php
index 2cdd728..d272e53 100644
--- a/lib/AppWhitelist.php
+++ b/lib/AppWhitelist.php
@@ -149,9 +149,9 @@ class AppWhitelist {
 	}
 
 	public function getWhitelistAbleApps() {
-		return array_diff(
+		return array_values(array_diff(
 			$this->appManager->getInstalledApps(),
 			explode(',', self::WHITELIST_ALWAYS)
-		);
+		));
 	}
 }
diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php
index 7009880..f205e81 100644
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@@ -45,10 +45,13 @@ class SettingsController extends Controller {
 	 */
 	private $config;
 
-	public function __construct($AppName, IRequest $request, $UserId, IConfig $config) {
+	private $appWhitelist;
+
+	public function __construct($AppName, IRequest $request, $UserId, IConfig $config, AppWhitelist $appWhitelist) {
 		parent::__construct($AppName, $request);
 		$this->userId = $UserId;
 		$this->config = $config;
+		$this->appWhitelist = $appWhitelist;
 	}
 
 	/**
@@ -69,7 +72,8 @@ class SettingsController extends Controller {
 		return new DataResponse([
 			'useWhitelist' => $useWhitelist,
 			'whitelist' => $whitelist,
-			'allowExternalStorage' => $allowExternalStorage
+			'allowExternalStorage' => $allowExternalStorage,
+			'whiteListableApps' => $this->appWhitelist->getWhitelistAbleApps()
 		]);
 	}
 	/**
diff --git a/lib/Settings/Admin.php b/lib/Settings/Admin.php
index b4a18bc..d286d6d 100644
--- a/lib/Settings/Admin.php
+++ b/lib/Settings/Admin.php
@@ -36,9 +36,7 @@ class Admin implements \OCP\Settings\ISettings {
 	 * {@inheritdoc}
 	 */
 	public function getForm() {
-		return new TemplateResponse('guests', 'settings/admin', [
-			'whitelistableApps' => $this->appWhitelist->getWhitelistAbleApps()
-		]);
+		return new TemplateResponse('guests', 'settings/admin');
 	}
 
 	/**
diff --git a/package-lock.json b/package-lock.json
index 77e37e4..964dbc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1020,6 +1020,15 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1156,6 +1165,32 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "autoprefixer": {
+      "version": "7.2.6",
+      "resolved": "http://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
+      "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^2.11.3",
+        "caniuse-lite": "^1.0.30000805",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "postcss": "^6.0.17",
+        "postcss-value-parser": "^3.2.3"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "2.11.3",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+          "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30000792",
+            "electron-to-chromium": "^1.3.30"
+          }
+        }
+      }
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -1247,6 +1282,16 @@
         }
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1616,6 +1661,30 @@
       "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
       "dev": true
     },
+    "caniuse-api": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-2.0.0.tgz",
+      "integrity": "sha1-sd21pZZrFvSNxJmERNS7xsfZ2DQ=",
+      "dev": true,
+      "requires": {
+        "browserslist": "^2.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "2.11.3",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+          "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30000792",
+            "electron-to-chromium": "^1.3.30"
+          }
+        }
+      }
+    },
     "caniuse-lite": {
       "version": "1.0.30000918",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000918.tgz",
@@ -1742,6 +1811,25 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "0.11.4",
+      "resolved": "http://registry.npmjs.org/color/-/color-0.11.4.tgz",
+      "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
+      "dev": true,
+      "requires": {
+        "clone": "^1.0.2",
+        "color-convert": "^1.3.0",
+        "color-string": "^0.3.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+          "dev": true
+        }
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1757,6 +1845,15 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-string": {
+      "version": "0.3.0",
+      "resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
+      "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "combined-stream": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
@@ -1926,12 +2023,30 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "core-js": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.0.tgz",
+      "integrity": "sha512-kLRC6ncVpuEW/1kwrOXYX6KQASCVtrh1gQr/UiaVgFlf9WE5Vp+lNe5+h3LuMr5PAucWnnEXwH0nQHRH/gpGtw==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cosmiconfig": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-4.0.0.tgz",
+      "integrity": "sha512-6e5vDdrXZD+t5v0L8CrurPeybg4Fmf+FCSYxXKYVAqLUtyCSbuyqE059d0kDthTNRzKVjL7QMgNpEUlsoYH3iQ==",
+      "dev": true,
+      "requires": {
+        "is-directory": "^0.3.1",
+        "js-yaml": "^3.9.0",
+        "parse-json": "^4.0.0",
+        "require-from-string": "^2.0.1"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.3.tgz",
@@ -2001,6 +2116,35 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-color-function": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/css-color-function/-/css-color-function-1.3.3.tgz",
+      "integrity": "sha1-jtJMLAIFBzM5+voAS8jBQfzLKC4=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "0.1.0",
+        "color": "^0.11.0",
+        "debug": "^3.1.0",
+        "rgb": "~0.1.0"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.1.0.tgz",
+          "integrity": "sha1-tQS9BYabOSWd0MXvw12EMXbczEo=",
+          "dev": true
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "css-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.0.0.tgz",
@@ -2094,6 +2238,12 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
+      "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
+      "dev": true
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -2405,6 +2555,23 @@
         "prr": "~1.0.1"
       }
     },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+          "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+          "dev": true
+        }
+      }
+    },
     "es-abstract": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
@@ -2451,6 +2618,12 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -2842,6 +3015,12 @@
         "locate-path": "^3.0.0"
       }
     },
+    "flatten": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
+      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -3854,6 +4033,24 @@
       "dev": true,
       "optional": true
     },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "dev": true,
+      "requires": {
+        "import-from": "^2.1.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^3.0.0"
+      }
+    },
     "import-local": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -3967,6 +4164,12 @@
         }
       }
     },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "is-binary-path": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
@@ -4033,6 +4236,12 @@
         }
       }
     },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -4174,6 +4383,12 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "isnumeric": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/isnumeric/-/isnumeric-0.2.0.tgz",
+      "integrity": "sha1-ojR7o2DeGeM9D/1ZD933dVy/LmQ=",
+      "dev": true
+    },
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
@@ -4199,6 +4414,16 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js-yaml": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
+      "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -4361,12 +4586,49 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "lodash.template": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
+      "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "~3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
+      "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "~3.0.0"
+      }
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
+      "dev": true
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -4425,6 +4687,12 @@
         "object-visit": "^1.0.0"
       }
     },
+    "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=",
+      "dev": true
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -4550,6 +4818,30 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
+      "integrity": "sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -4768,6 +5060,12 @@
         "remove-trailing-separator": "^1.0.1"
       }
     },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -4777,6 +5075,12 @@
         "path-key": "^2.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -4891,6 +5195,12 @@
         "wrappy": "1"
       }
     },
+    "onecolor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/onecolor/-/onecolor-3.1.0.tgz",
+      "integrity": "sha512-YZSypViXzu3ul5LMu/m6XjJ9ol8qAy9S2VjHl5E6UlhUH1KGKWabyEJifn0Jjpw23bYDzC2ucKMPGiH5kfwSGQ==",
+      "dev": true
+    },
     "opn": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
@@ -5004,6 +5314,16 @@
         "pbkdf2": "^3.0.3"
       }
     },
+    "parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
@@ -5105,6 +5425,29 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pixrem": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pixrem/-/pixrem-4.0.1.tgz",
+      "integrity": "sha1-LaSh3m7EQjxfw3lOkwuB1EkOxoY=",
+      "dev": true,
+      "requires": {
+        "browserslist": "^2.0.0",
+        "postcss": "^6.0.0",
+        "reduce-css-calc": "^1.2.7"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "2.11.3",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+          "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30000792",
+            "electron-to-chromium": "^1.3.30"
+          }
+        }
+      }
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -5114,6 +5457,16 @@
         "find-up": "^3.0.0"
       }
     },
+    "pleeease-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pleeease-filters/-/pleeease-filters-4.0.0.tgz",
+      "integrity": "sha1-ZjKy+wVkjSdY2GU4T7zteeHMrsc=",
+      "dev": true,
+      "requires": {
+        "onecolor": "^3.0.4",
+        "postcss": "^6.0.1"
+      }
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -5167,6 +5520,434 @@
         }
       }
     },
+    "postcss-apply": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.8.0.tgz",
+      "integrity": "sha1-FOVEu7XLbxweBIhXll15rgZrE0M=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "balanced-match": "^0.4.2",
+        "postcss": "^6.0.0"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
+    "postcss-attribute-case-insensitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz",
+      "integrity": "sha1-lNxCLI+QmX8WvTOjZUu77AhJY7Q=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.0",
+        "postcss-selector-parser": "^2.2.3"
+      },
+      "dependencies": {
+        "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=",
+          "dev": true,
+          "requires": {
+            "flatten": "^1.0.2",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-calc": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-6.0.2.tgz",
+      "integrity": "sha512-fiznXjEN5T42Qm7qqMCVJXS3roaj9r4xsSi+meaBVe7CJBl8t/QLOXu02Z2E6oWAMWIvCuF6JrvzFekmVEbOKA==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^2.2.2",
+        "reduce-css-calc": "^2.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
+          "integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.5.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=",
+          "dev": true,
+          "requires": {
+            "flatten": "^1.0.2",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        },
+        "reduce-css-calc": {
+          "version": "2.1.5",
+          "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.5.tgz",
+          "integrity": "sha512-AybiBU03FKbjYzyvJvwkJZY6NLN+80Ufc2EqEs+41yQH+8wqBEslD6eGiS0oIeq5TNLA5PrhBeYHXWdn8gtW7A==",
+          "dev": true,
+          "requires": {
+            "css-unit-converter": "^1.1.1",
+            "postcss-value-parser": "^3.3.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-color-function": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-function/-/postcss-color-function-4.0.1.tgz",
+      "integrity": "sha1-QCs/LOvD9pR+YY+2vjZU++zvZEQ=",
+      "dev": true,
+      "requires": {
+        "css-color-function": "~1.3.3",
+        "postcss": "^6.0.1",
+        "postcss-message-helpers": "^2.0.0",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "postcss-color-gray": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-4.1.0.tgz",
+      "integrity": "sha512-L4iLKQLdqChz6ZOgGb6dRxkBNw78JFYcJmBz1orHpZoeLtuhDDGegRtX9gSyfoCIM7rWZ3VNOyiqqvk83BEN+w==",
+      "dev": true,
+      "requires": {
+        "color": "^2.0.1",
+        "postcss": "^6.0.14",
+        "postcss-message-helpers": "^2.0.0",
+        "reduce-function-call": "^1.0.2"
+      },
+      "dependencies": {
+        "color": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
+          "integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.1",
+            "color-string": "^1.5.2"
+          }
+        },
+        "color-string": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+          "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+          "dev": true,
+          "requires": {
+            "color-name": "^1.0.0",
+            "simple-swizzle": "^0.2.2"
+          }
+        }
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz",
+      "integrity": "sha1-HlPmyKyyN5Vej9CLfs2xuLgwn5U=",
+      "dev": true,
+      "requires": {
+        "color": "^1.0.3",
+        "postcss": "^6.0.1",
+        "postcss-message-helpers": "^2.0.0"
+      },
+      "dependencies": {
+        "color": {
+          "version": "1.0.3",
+          "resolved": "http://registry.npmjs.org/color/-/color-1.0.3.tgz",
+          "integrity": "sha1-5I6DLYXxTvaU+0aIEcLVz+cptV0=",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.8.2",
+            "color-string": "^1.4.0"
+          }
+        },
+        "color-string": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+          "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+          "dev": true,
+          "requires": {
+            "color-name": "^1.0.0",
+            "simple-swizzle": "^0.2.2"
+          }
+        }
+      }
+    },
+    "postcss-color-hsl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-hsl/-/postcss-color-hsl-2.0.0.tgz",
+      "integrity": "sha1-EnA2ZvoxBDDj8wpFTawThjF9WEQ=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-value-parser": "^3.3.0",
+        "units-css": "^0.4.0"
+      }
+    },
+    "postcss-color-hwb": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-hwb/-/postcss-color-hwb-3.0.0.tgz",
+      "integrity": "sha1-NAKxnvTYSXVAwftQcr6YY8qVVx4=",
+      "dev": true,
+      "requires": {
+        "color": "^1.0.3",
+        "postcss": "^6.0.1",
+        "postcss-message-helpers": "^2.0.0",
+        "reduce-function-call": "^1.0.2"
+      },
+      "dependencies": {
+        "color": {
+          "version": "1.0.3",
+          "resolved": "http://registry.npmjs.org/color/-/color-1.0.3.tgz",
+          "integrity": "sha1-5I6DLYXxTvaU+0aIEcLVz+cptV0=",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.8.2",
+            "color-string": "^1.4.0"
+          }
+        },
+        "color-string": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+          "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+          "dev": true,
+          "requires": {
+            "color-name": "^1.0.0",
+            "simple-swizzle": "^0.2.2"
+          }
+        }
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-3.1.0.tgz",
+      "integrity": "sha512-212hJUk9uSsbwO5ECqVjmh/iLsmiVL1xy9ce9TVf+X3cK/ZlUIlaMdoxje/YpsL9cmUH3I7io+/G2LyWx5rg1g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.22",
+        "postcss-values-parser": "^1.5.0"
+      }
+    },
+    "postcss-color-rgb": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz",
+      "integrity": "sha1-FFOcinExSUtILg3RzCZf9lFLUmM=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "postcss-color-rgba-fallback": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-rgba-fallback/-/postcss-color-rgba-fallback-3.0.0.tgz",
+      "integrity": "sha1-N9XJNToHoJJwkSqCYGu0Kg1wLAQ=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.6",
+        "postcss-value-parser": "^3.3.0",
+        "rgb-hex": "^2.1.0"
+      }
+    },
+    "postcss-cssnext": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cssnext/-/postcss-cssnext-3.1.0.tgz",
+      "integrity": "sha512-awPDhI4OKetcHCr560iVCoDuP6e/vn0r6EAqdWPpAavJMvkBSZ6kDpSN4b3mB3Ti57hQMunHHM8Wvx9PeuYXtA==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^7.1.1",
+        "caniuse-api": "^2.0.0",
+        "chalk": "^2.0.1",
+        "pixrem": "^4.0.0",
+        "pleeease-filters": "^4.0.0",
+        "postcss": "^6.0.5",
+        "postcss-apply": "^0.8.0",
+        "postcss-attribute-case-insensitive": "^2.0.0",
+        "postcss-calc": "^6.0.0",
+        "postcss-color-function": "^4.0.0",
+        "postcss-color-gray": "^4.0.0",
+        "postcss-color-hex-alpha": "^3.0.0",
+        "postcss-color-hsl": "^2.0.0",
+        "postcss-color-hwb": "^3.0.0",
+        "postcss-color-rebeccapurple": "^3.0.0",
+        "postcss-color-rgb": "^2.0.0",
+        "postcss-color-rgba-fallback": "^3.0.0",
+        "postcss-custom-media": "^6.0.0",
+        "postcss-custom-properties": "^6.1.0",
+        "postcss-custom-selectors": "^4.0.1",
+        "postcss-font-family-system-ui": "^3.0.0",
+        "postcss-font-variant": "^3.0.0",
+        "postcss-image-set-polyfill": "^0.3.5",
+        "postcss-initial": "^2.0.0",
+        "postcss-media-minmax": "^3.0.0",
+        "postcss-nesting": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^4.0.0",
+        "postcss-pseudoelements": "^5.0.0",
+        "postcss-replace-overflow-wrap": "^2.0.0",
+        "postcss-selector-matches": "^3.0.1",
+        "postcss-selector-not": "^3.0.1"
+      }
+    },
+    "postcss-custom-media": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
+      "integrity": "sha1-vlMnhBEOyylQRPtTlaGABushpzc=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "6.3.1",
+      "resolved": "http://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-6.3.1.tgz",
+      "integrity": "sha512-zoiwn4sCiUFbr4KcgcNZLFkR6gVQom647L+z1p/KBVHZ1OYwT87apnS42atJtx6XlX2yI7N5fjXbFixShQO2QQ==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^6.0.18"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-4.0.1.tgz",
+      "integrity": "sha1-eBOC+UxS5yfvXKR3bqKt9JphE4I=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-selector-matches": "^3.0.0"
+      }
+    },
+    "postcss-font-family-system-ui": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz",
+      "integrity": "sha512-58G/hTxMSSKlIRpcPUjlyo6hV2MEzvcVO2m4L/T7Bb2fJTG4DYYfQjQeRvuimKQh1V1sOzCIz99g+H2aFNtlQw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-3.0.0.tgz",
+      "integrity": "sha1-CMzIj2BQuoLtjvLMdsDGprQfGD4=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-image-set-polyfill": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-polyfill/-/postcss-image-set-polyfill-0.3.5.tgz",
+      "integrity": "sha1-Dxk0E3AM8fgr05Bm7wFtZaShgYE=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-media-query-parser": "^0.2.3"
+      }
+    },
+    "postcss-initial": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-2.0.0.tgz",
+      "integrity": "sha1-cnFfczbgu3k1HZnuZcSiU6hEG6Q=",
+      "dev": true,
+      "requires": {
+        "lodash.template": "^4.2.4",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.0.0.tgz",
+      "integrity": "sha512-V5JBLzw406BB8UIfsAWSK2KSwIJ5yoEIVFb4gVkXci0QdKgA24jLmHZ/ghe/GgX0lJ0/D1uUK1ejhzEY94MChQ==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "^4.0.0",
+        "import-cwd": "^2.0.0"
+      }
+    },
+    "postcss-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+      "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
+          "integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.5.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-media-minmax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-3.0.0.tgz",
+      "integrity": "sha1-Z1JWA3pD70C8Twdgv9BtTcadSNI=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
+      "dev": true
+    },
+    "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=",
+      "dev": true
+    },
     "postcss-modules-extract-imports": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
@@ -5283,6 +6064,121 @@
         }
       }
     },
+    "postcss-nested": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.0.tgz",
+      "integrity": "sha512-owY13v4s3WWTUjsT1H1Cgpa4veHjcBJ/FqbgORe1dJIKpggbFoh6ww+zUP0nzrvy7fXGihcuFhJQj3eXtaWXsw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^3.1.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
+          "integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.5.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "postcss-nesting": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-4.2.1.tgz",
+      "integrity": "sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.11"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz",
+      "integrity": "sha1-kVKgYT00UHIFE+iJKFS65C0O5o4=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1",
+        "postcss-selector-parser": "^2.2.3"
+      },
+      "dependencies": {
+        "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=",
+          "dev": true,
+          "requires": {
+            "flatten": "^1.0.2",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-pseudoelements": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudoelements/-/postcss-pseudoelements-5.0.0.tgz",
+      "integrity": "sha1-7vGU6NUkZFylIKlJ6V5RjoEkAss=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.0"
+      }
+    },
+    "postcss-replace-overflow-wrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz",
+      "integrity": "sha1-eU22+qVPjbEAhUOSqTr0V2i04ls=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-selector-matches": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-3.0.1.tgz",
+      "integrity": "sha1-5WNAEeE5UIgYYbvdWMLQER/8lqs=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^0.4.2",
+        "postcss": "^6.0.1"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
+    "postcss-selector-not": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-3.0.1.tgz",
+      "integrity": "sha1-Lk2y8JZTNsAefOx9tsYN/3ZzNdk=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^0.4.2",
+        "postcss": "^6.0.1"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
     "postcss-selector-parser": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
@@ -5300,6 +6196,17 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "postcss-values-parser": {
+      "version": "1.5.0",
+      "resolved": "http://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz",
+      "integrity": "sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==",
+      "dev": true,
+      "requires": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "prettier": {
       "version": "1.13.7",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.7.tgz",
@@ -5509,6 +6416,42 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "reduce-css-calc": {
+      "version": "1.3.0",
+      "resolved": "http://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
+      "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^0.4.2",
+        "math-expression-evaluator": "^1.2.14",
+        "reduce-function-call": "^1.0.1"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        }
+      }
+    },
+    "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=",
+      "dev": true,
+      "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=",
+          "dev": true
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -5524,6 +6467,12 @@
         "regenerate": "^1.4.0"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
+    },
     "regenerator-transform": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.3.tgz",
@@ -5633,6 +6582,12 @@
       "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
       "dev": true
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
@@ -5681,6 +6636,18 @@
       "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
       "dev": true
     },
+    "rgb": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/rgb/-/rgb-0.1.0.tgz",
+      "integrity": "sha1-vieykej+/+rBvZlylyG/pA/AN7U=",
+      "dev": true
+    },
+    "rgb-hex": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/rgb-hex/-/rgb-hex-2.1.0.tgz",
+      "integrity": "sha1-x3PF/iJoolV42SU5qCp6XOU77aY=",
+      "dev": true
+    },
     "rimraf": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -5921,6 +6888,15 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -6208,6 +7184,12 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "sshpk": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz",
@@ -6335,6 +7317,29 @@
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
+    "style-loader": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -6640,6 +7645,16 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "units-css": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/units-css/-/units-css-0.4.0.tgz",
+      "integrity": "sha1-1iKGU6UZg9fBb/KPi53Dsf/tOgc=",
+      "dev": true,
+      "requires": {
+        "isnumeric": "^0.2.0",
+        "viewport-dimensions": "^0.2.0"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -6802,6 +7817,12 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewport-dimensions": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz",
+      "integrity": "sha1-3nQHR9tTh/0XJfUXXpG6x2r982w=",
+      "dev": true
+    },
     "vm-browserify": {
       "version": "0.0.4",
       "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
@@ -6836,6 +7857,12 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-select": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-2.5.1.tgz",
+      "integrity": "sha512-Hs+arh7+0gLJoYiM3r9V/5CRn5XsAT8tVkouTkpDAWb923KFgraWrKDLSqz3ROedZUkuVIwkFuYq8+baHUf+bg==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/package.json b/package.json
index de9f985..f8c2557 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,14 @@
     "babel-loader": "^8.0.4",
     "css-loader": "^2.0.0",
     "less": "^3.9.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-nested": "^4.1.0",
+    "style-loader": "^0.23.1",
     "vue": "^2.5.21",
     "vue-loader": "^15.4.2",
+    "vue-select": "^2.5.1",
     "vue-template-compiler": "^2.5.21",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..8f3df74
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: [
+		require("postcss-cssnext")(),
+		require('postcss-nested')
+	]
+};
diff --git a/templates/settings/admin.php b/templates/settings/admin.php
index 305a106..b42b23f 100644
--- a/templates/settings/admin.php
+++ b/templates/settings/admin.php
@@ -1,58 +1,3 @@
-<?php
-/**
- * @author Jörn Friedrich Dreyer <jfd@butonic.de>
- * @author Ilja Neumann <ineumann@butonic.de>
- *
- * @copyright Copyright (c) 2017, ownCloud GmbH
- * @license AGPL-3.0
- *
- * This code is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License, version 3,
- * as published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License, version 3,
- * along with this program.  If not, see <http://www.gnu.org/licenses/>
- *
- */
-script('guests', 'guests');
-style('guests', 'admin');
-/** @var $l OC_L10N */
-/** @var $_ array */
-?>
-<div class="section" id="guests">
-	<h2>Guests <span class="msg"></span></h2>
-	<div>
-		<p>
-			<span class="inlineblock user-info-label"><?php p($l->t('Guest users are grouped under a virtual group in the user manager')); ?></span><br/><br/>
-		</p>
-		<p class="external-storage-toggle">
-			<input type="checkbox" id="allowExternalStorage" class="checkbox"
-				   value="allowExternalStorage"/>
-			<label for="allowExternalStorage">
-				<?php p($l->t('Guest users can access mounted external storages')); ?>
-			</label>
-		</p>
-		<p class="whitelist-toggle">
-			<input type="checkbox" id="guestUseWhitelist" class="checkbox"
-				   value="useWhitelist"/>
-			<label for="guestUseWhitelist">
-				<?php p($l->t('Limit guest access to an app whitelist')); ?>
-			</label>
-		</p>
-		<p class="whitelist" style="display: none">
-			<select multiple="multiple" id="guestWhitelist">
-				<?php foreach ($_['whitelistableApps'] as $app): ?>
-					<option value="<?php p($app); ?>"><?php p($app); ?></option>
-				<?php endforeach; ?>
-			</select>
-			<button title="<?php p($l->t('Reset')) ?>" type="button"
-					class="icon-history icon"
-					id="guestResetWhitelist"></button>
-		</p>
-	</div>
-</div>
+<?php script('guests', '../dist/settings'); ?>
+<?php style('guests', '../dist/settings'); ?>
+<div id="guest-settings"/>
diff --git a/webpack.config.js b/webpack.config.js
index e37866e..9d4ee03 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,15 @@
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-module.exports = {
+module.exports = (env, argv) => ({
 	devtool: 'source-map',
-	entry: [
-		'./js/index.js'
-	],
+	entry: {
+		'main': './js/index.js',
+		'settings': './js/settings.js'
+	},
+	output: {
+		filename: '[name].js'
+	},
 	module: {
 		rules: [
 			{
@@ -18,10 +23,23 @@ module.exports = {
 				use: {
 					loader: 'babel-loader'
 				}
+			},
+			{
+				test: /\.css$/,
+				use: [
+					argv.mode !== 'production'
+						? 'vue-style-loader'
+						: MiniCssExtractPlugin.loader,
+					'css-loader',
+					'postcss-loader'
+				]
 			}
 		],
 	},
 	plugins: [
 		new VueLoaderPlugin(),
+		new MiniCssExtractPlugin({
+			filename: '[name].css'
+		})
 	]
-};
+});