From 86330e922dfa2e3deba70df4dd174ac961299617 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent@doddsfamily.us>
Date: Mon, 10 Aug 2015 06:28:06 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=A2=20Adding=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bundle.js         | 634 +++++++++++++++++++++++++++-------------------
 index.html        |   4 +-
 js/app.js         |  11 +-
 package.json      |   2 +
 webpack.config.js |   7 +-
 5 files changed, 390 insertions(+), 268 deletions(-)

diff --git a/bundle.js b/bundle.js
index 0f458e5..74b48b0 100644
--- a/bundle.js
+++ b/bundle.js
@@ -46,12 +46,14 @@
 
 	/*global app, $on */
 	__webpack_require__(1);
-	__webpack_require__(2);
-	__webpack_require__(3);
-	__webpack_require__(4);
 	__webpack_require__(5);
-	__webpack_require__(6);
+	//require('todomvc-common');
 	__webpack_require__(7);
+	__webpack_require__(8);
+	__webpack_require__(9);
+	__webpack_require__(10);
+	__webpack_require__(11);
+	__webpack_require__(12);
 	(function () {
 		'use strict';
 
@@ -68,277 +70,387 @@
 			this.controller = new app.Controller(this.model, this.view);
 		}
 
-		var todo = new Todo('todos-vanillajs');
+		var todo;
 
 		function setView() {
 			todo.controller.setView(document.location.hash);
 		}
-		$on(window, 'load', setView);
+
+		$on(window, 'load', function() {
+			todo = new Todo('todos-vanillajs');
+			setView();
+		});
 		$on(window, 'hashchange', setView);
 	})();
 
 
 /***/ },
 /* 1 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
-	/* global _ */
-	(function () {
-		'use strict';
+	// style-loader: Adds some css to the DOM by adding a <style> tag
 
-		/* jshint ignore:start */
-		// Underscore's Template Module
-		// Courtesy of underscorejs.org
-		var _ = (function (_) {
-			_.defaults = function (object) {
-				if (!object) {
-					return object;
-				}
-				for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
-					var iterable = arguments[argsIndex];
-					if (iterable) {
-						for (var key in iterable) {
-							if (object[key] == null) {
-								object[key] = iterable[key];
-							}
-						}
-					}
-				}
-				return object;
-			}
-
-			// By default, Underscore uses ERB-style template delimiters, change the
-			// following template settings to use alternative delimiters.
-			_.templateSettings = {
-				evaluate    : /<%([\s\S]+?)%>/g,
-				interpolate : /<%=([\s\S]+?)%>/g,
-				escape      : /<%-([\s\S]+?)%>/g
-			};
-
-			// When customizing `templateSettings`, if you don't want to define an
-			// interpolation, evaluation or escaping regex, we need one that is
-			// guaranteed not to match.
-			var noMatch = /(.)^/;
-
-			// Certain characters need to be escaped so that they can be put into a
-			// string literal.
-			var escapes = {
-				"'":      "'",
-				'\\':     '\\',
-				'\r':     'r',
-				'\n':     'n',
-				'\t':     't',
-				'\u2028': 'u2028',
-				'\u2029': 'u2029'
-			};
-
-			var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
-
-			// JavaScript micro-templating, similar to John Resig's implementation.
-			// Underscore templating handles arbitrary delimiters, preserves whitespace,
-			// and correctly escapes quotes within interpolated code.
-			_.template = function(text, data, settings) {
-				var render;
-				settings = _.defaults({}, settings, _.templateSettings);
-
-				// Combine delimiters into one regular expression via alternation.
-				var matcher = new RegExp([
-					(settings.escape || noMatch).source,
-					(settings.interpolate || noMatch).source,
-					(settings.evaluate || noMatch).source
-				].join('|') + '|$', 'g');
-
-				// Compile the template source, escaping string literals appropriately.
-				var index = 0;
-				var source = "__p+='";
-				text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
-					source += text.slice(index, offset)
-						.replace(escaper, function(match) { return '\\' + escapes[match]; });
-
-					if (escape) {
-						source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
-					}
-					if (interpolate) {
-						source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
-					}
-					if (evaluate) {
-						source += "';\n" + evaluate + "\n__p+='";
-					}
-					index = offset + match.length;
-					return match;
-				});
-				source += "';\n";
-
-				// If a variable is not specified, place data values in local scope.
-				if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
-
-				source = "var __t,__p='',__j=Array.prototype.join," +
-					"print=function(){__p+=__j.call(arguments,'');};\n" +
-					source + "return __p;\n";
-
-				try {
-					render = new Function(settings.variable || 'obj', '_', source);
-				} catch (e) {
-					e.source = source;
-					throw e;
-				}
-
-				if (data) return render(data, _);
-				var template = function(data) {
-					return render.call(this, data, _);
-				};
-
-				// Provide the compiled function source as a convenience for precompilation.
-				template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
-
-				return template;
-			};
-
-			return _;
-		})({});
-
-		if (location.hostname === 'todomvc.com') {
-			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-			})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-			ga('create', 'UA-31081062-1', 'auto');
-			ga('send', 'pageview');
+	// load the styles
+	var content = __webpack_require__(2);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(4)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../css-loader/index.js!./base.css", function() {
+				var newContent = require("!!./../css-loader/index.js!./base.css");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
 		}
-		/* jshint ignore:end */
-
-		function redirect() {
-			if (location.hostname === 'tastejs.github.io') {
-				location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
-			}
-		}
-
-		function findRoot() {
-			var base = location.href.indexOf('examples/');
-			return location.href.substr(0, base);
-		}
-
-		function getFile(file, callback) {
-			if (!location.host) {
-				return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
-			}
-
-			var xhr = new XMLHttpRequest();
-
-			xhr.open('GET', findRoot() + file, true);
-			xhr.send();
-
-			xhr.onload = function () {
-				if (xhr.status === 200 && callback) {
-					callback(xhr.responseText);
-				}
-			};
-		}
-
-		function Learn(learnJSON, config) {
-			if (!(this instanceof Learn)) {
-				return new Learn(learnJSON, config);
-			}
-
-			var template, framework;
-
-			if (typeof learnJSON !== 'object') {
-				try {
-					learnJSON = JSON.parse(learnJSON);
-				} catch (e) {
-					return;
-				}
-			}
-
-			if (config) {
-				template = config.template;
-				framework = config.framework;
-			}
-
-			if (!template && learnJSON.templates) {
-				template = learnJSON.templates.todomvc;
-			}
-
-			if (!framework && document.querySelector('[data-framework]')) {
-				framework = document.querySelector('[data-framework]').dataset.framework;
-			}
-
-			this.template = template;
-
-			if (learnJSON.backend) {
-				this.frameworkJSON = learnJSON.backend;
-				this.frameworkJSON.issueLabel = framework;
-				this.append({
-					backend: true
-				});
-			} else if (learnJSON[framework]) {
-				this.frameworkJSON = learnJSON[framework];
-				this.frameworkJSON.issueLabel = framework;
-				this.append();
-			}
-
-			this.fetchIssueCount();
-		}
-
-		Learn.prototype.append = function (opts) {
-			var aside = document.createElement('aside');
-			aside.innerHTML = _.template(this.template, this.frameworkJSON);
-			aside.className = 'learn';
-
-			if (opts && opts.backend) {
-				// Remove demo link
-				var sourceLinks = aside.querySelector('.source-links');
-				var heading = sourceLinks.firstElementChild;
-				var sourceLink = sourceLinks.lastElementChild;
-				// Correct link path
-				var href = sourceLink.getAttribute('href');
-				sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
-				sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
-			} else {
-				// Localize demo links
-				var demoLinks = aside.querySelectorAll('.demo-link');
-				Array.prototype.forEach.call(demoLinks, function (demoLink) {
-					if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
-						demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
-					}
-				});
-			}
-
-			document.body.className = (document.body.className + ' learn-bar').trim();
-			document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
-		};
-
-		Learn.prototype.fetchIssueCount = function () {
-			var issueLink = document.getElementById('issue-count-link');
-			if (issueLink) {
-				var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
-				var xhr = new XMLHttpRequest();
-				xhr.open('GET', url, true);
-				xhr.onload = function (e) {
-					var parsedResponse = JSON.parse(e.target.responseText);
-					if (parsedResponse instanceof Array) {
-						var count = parsedResponse.length;
-						if (count !== 0) {
-							issueLink.innerHTML = 'This app has ' + count + ' open issues';
-							document.getElementById('issue-count').style.display = 'inline';
-						}
-					}
-				};
-				xhr.send();
-			}
-		};
-
-		redirect();
-		getFile('learn.json', Learn);
-	})();
-
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
 
 /***/ },
 /* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(3)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "hr {\n\tmargin: 20px 0;\n\tborder: 0;\n\tborder-top: 1px dashed #c5c5c5;\n\tborder-bottom: 1px dashed #f7f7f7;\n}\n\n.learn a {\n\tfont-weight: normal;\n\ttext-decoration: none;\n\tcolor: #b83f45;\n}\n\n.learn a:hover {\n\ttext-decoration: underline;\n\tcolor: #787e7e;\n}\n\n.learn h3,\n.learn h4,\n.learn h5 {\n\tmargin: 10px 0;\n\tfont-weight: 500;\n\tline-height: 1.2;\n\tcolor: #000;\n}\n\n.learn h3 {\n\tfont-size: 24px;\n}\n\n.learn h4 {\n\tfont-size: 18px;\n}\n\n.learn h5 {\n\tmargin-bottom: 0;\n\tfont-size: 14px;\n}\n\n.learn ul {\n\tpadding: 0;\n\tmargin: 0 0 30px 25px;\n}\n\n.learn li {\n\tline-height: 20px;\n}\n\n.learn p {\n\tfont-size: 15px;\n\tfont-weight: 300;\n\tline-height: 1.3;\n\tmargin-top: 0;\n\tmargin-bottom: 0;\n}\n\n#issue-count {\n\tdisplay: none;\n}\n\n.quote {\n\tborder: none;\n\tmargin: 20px 0 60px 0;\n}\n\n.quote p {\n\tfont-style: italic;\n}\n\n.quote p:before {\n\tcontent: '\\201C';\n\tfont-size: 50px;\n\topacity: .15;\n\tposition: absolute;\n\ttop: -20px;\n\tleft: 3px;\n}\n\n.quote p:after {\n\tcontent: '\\201D';\n\tfont-size: 50px;\n\topacity: .15;\n\tposition: absolute;\n\tbottom: -42px;\n\tright: 3px;\n}\n\n.quote footer {\n\tposition: absolute;\n\tbottom: -40px;\n\tright: 0;\n}\n\n.quote footer img {\n\tborder-radius: 3px;\n}\n\n.quote footer a {\n\tmargin-left: 5px;\n\tvertical-align: middle;\n}\n\n.speech-bubble {\n\tposition: relative;\n\tpadding: 10px;\n\tbackground: rgba(0, 0, 0, .04);\n\tborder-radius: 5px;\n}\n\n.speech-bubble:after {\n\tcontent: '';\n\tposition: absolute;\n\ttop: 100%;\n\tright: 30px;\n\tborder: 13px solid transparent;\n\tborder-top-color: rgba(0, 0, 0, .04);\n}\n\n.learn-bar > .learn {\n\tposition: absolute;\n\twidth: 272px;\n\ttop: 8px;\n\tleft: -300px;\n\tpadding: 10px;\n\tborder-radius: 5px;\n\tbackground-color: rgba(255, 255, 255, .6);\n\ttransition-property: left;\n\ttransition-duration: 500ms;\n}\n\n@media (min-width: 899px) {\n\t.learn-bar {\n\t\twidth: auto;\n\t\tpadding-left: 300px;\n\t}\n\n\t.learn-bar > .learn {\n\t\tleft: 8px;\n\t}\n}\n", ""]);
+
+	// exports
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	// css base code, injected by the css-loader
+	module.exports = function() {
+		var list = [];
+
+		// return the list of modules as css string
+		list.toString = function toString() {
+			var result = [];
+			for(var i = 0; i < this.length; i++) {
+				var item = this[i];
+				if(item[2]) {
+					result.push("@media " + item[2] + "{" + item[1] + "}");
+				} else {
+					result.push(item[1]);
+				}
+			}
+			return result.join("");
+		};
+
+		// import a list of modules into the list
+		list.i = function(modules, mediaQuery) {
+			if(typeof modules === "string")
+				modules = [[null, modules, ""]];
+			var alreadyImportedModules = {};
+			for(var i = 0; i < this.length; i++) {
+				var id = this[i][0];
+				if(typeof id === "number")
+					alreadyImportedModules[id] = true;
+			}
+			for(i = 0; i < modules.length; i++) {
+				var item = modules[i];
+				// skip already imported module
+				// this implementation is not 100% perfect for weird media query combinations
+				//  when a module is imported multiple times with different media queries.
+				//  I hope this will never occur (Hey this way we have smaller bundles)
+				if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
+					if(mediaQuery && !item[2]) {
+						item[2] = mediaQuery;
+					} else if(mediaQuery) {
+						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+					}
+					list.push(item);
+				}
+			}
+		};
+		return list;
+	};
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/*
+		MIT License http://www.opensource.org/licenses/mit-license.php
+		Author Tobias Koppers @sokra
+	*/
+	var stylesInDom = {},
+		memoize = function(fn) {
+			var memo;
+			return function () {
+				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
+				return memo;
+			};
+		},
+		isOldIE = memoize(function() {
+			return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
+		}),
+		getHeadElement = memoize(function () {
+			return document.head || document.getElementsByTagName("head")[0];
+		}),
+		singletonElement = null,
+		singletonCounter = 0;
+
+	module.exports = function(list, options) {
+		if(false) {
+			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
+		}
+
+		options = options || {};
+		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+		// tags it will allow on a page
+		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
+
+		var styles = listToStyles(list);
+		addStylesToDom(styles, options);
+
+		return function update(newList) {
+			var mayRemove = [];
+			for(var i = 0; i < styles.length; i++) {
+				var item = styles[i];
+				var domStyle = stylesInDom[item.id];
+				domStyle.refs--;
+				mayRemove.push(domStyle);
+			}
+			if(newList) {
+				var newStyles = listToStyles(newList);
+				addStylesToDom(newStyles, options);
+			}
+			for(var i = 0; i < mayRemove.length; i++) {
+				var domStyle = mayRemove[i];
+				if(domStyle.refs === 0) {
+					for(var j = 0; j < domStyle.parts.length; j++)
+						domStyle.parts[j]();
+					delete stylesInDom[domStyle.id];
+				}
+			}
+		};
+	}
+
+	function addStylesToDom(styles, options) {
+		for(var i = 0; i < styles.length; i++) {
+			var item = styles[i];
+			var domStyle = stylesInDom[item.id];
+			if(domStyle) {
+				domStyle.refs++;
+				for(var j = 0; j < domStyle.parts.length; j++) {
+					domStyle.parts[j](item.parts[j]);
+				}
+				for(; j < item.parts.length; j++) {
+					domStyle.parts.push(addStyle(item.parts[j], options));
+				}
+			} else {
+				var parts = [];
+				for(var j = 0; j < item.parts.length; j++) {
+					parts.push(addStyle(item.parts[j], options));
+				}
+				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
+			}
+		}
+	}
+
+	function listToStyles(list) {
+		var styles = [];
+		var newStyles = {};
+		for(var i = 0; i < list.length; i++) {
+			var item = list[i];
+			var id = item[0];
+			var css = item[1];
+			var media = item[2];
+			var sourceMap = item[3];
+			var part = {css: css, media: media, sourceMap: sourceMap};
+			if(!newStyles[id])
+				styles.push(newStyles[id] = {id: id, parts: [part]});
+			else
+				newStyles[id].parts.push(part);
+		}
+		return styles;
+	}
+
+	function createStyleElement() {
+		var styleElement = document.createElement("style");
+		var head = getHeadElement();
+		styleElement.type = "text/css";
+		head.appendChild(styleElement);
+		return styleElement;
+	}
+
+	function createLinkElement() {
+		var linkElement = document.createElement("link");
+		var head = getHeadElement();
+		linkElement.rel = "stylesheet";
+		head.appendChild(linkElement);
+		return linkElement;
+	}
+
+	function addStyle(obj, options) {
+		var styleElement, update, remove;
+
+		if (options.singleton) {
+			var styleIndex = singletonCounter++;
+			styleElement = singletonElement || (singletonElement = createStyleElement());
+			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
+			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
+		} else if(obj.sourceMap &&
+			typeof URL === "function" &&
+			typeof URL.createObjectURL === "function" &&
+			typeof URL.revokeObjectURL === "function" &&
+			typeof Blob === "function" &&
+			typeof btoa === "function") {
+			styleElement = createLinkElement();
+			update = updateLink.bind(null, styleElement);
+			remove = function() {
+				styleElement.parentNode.removeChild(styleElement);
+				if(styleElement.href)
+					URL.revokeObjectURL(styleElement.href);
+			};
+		} else {
+			styleElement = createStyleElement();
+			update = applyToTag.bind(null, styleElement);
+			remove = function() {
+				styleElement.parentNode.removeChild(styleElement);
+			};
+		}
+
+		update(obj);
+
+		return function updateStyle(newObj) {
+			if(newObj) {
+				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
+					return;
+				update(obj = newObj);
+			} else {
+				remove();
+			}
+		};
+	}
+
+	var replaceText = (function () {
+		var textStore = [];
+
+		return function (index, replacement) {
+			textStore[index] = replacement;
+			return textStore.filter(Boolean).join('\n');
+		};
+	})();
+
+	function applyToSingletonTag(styleElement, index, remove, obj) {
+		var css = remove ? "" : obj.css;
+
+		if (styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = replaceText(index, css);
+		} else {
+			var cssNode = document.createTextNode(css);
+			var childNodes = styleElement.childNodes;
+			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
+			if (childNodes.length) {
+				styleElement.insertBefore(cssNode, childNodes[index]);
+			} else {
+				styleElement.appendChild(cssNode);
+			}
+		}
+	}
+
+	function applyToTag(styleElement, obj) {
+		var css = obj.css;
+		var media = obj.media;
+		var sourceMap = obj.sourceMap;
+
+		if(media) {
+			styleElement.setAttribute("media", media)
+		}
+
+		if(styleElement.styleSheet) {
+			styleElement.styleSheet.cssText = css;
+		} else {
+			while(styleElement.firstChild) {
+				styleElement.removeChild(styleElement.firstChild);
+			}
+			styleElement.appendChild(document.createTextNode(css));
+		}
+	}
+
+	function updateLink(linkElement, obj) {
+		var css = obj.css;
+		var media = obj.media;
+		var sourceMap = obj.sourceMap;
+
+		if(sourceMap) {
+			// http://stackoverflow.com/a/26603875
+			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
+		}
+
+		var blob = new Blob([css], { type: "text/css" });
+
+		var oldSrc = linkElement.href;
+
+		linkElement.href = URL.createObjectURL(blob);
+
+		if(oldSrc)
+			URL.revokeObjectURL(oldSrc);
+	}
+
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+	// style-loader: Adds some css to the DOM by adding a <style> tag
+
+	// load the styles
+	var content = __webpack_require__(6);
+	if(typeof content === 'string') content = [[module.id, content, '']];
+	// add the styles to the DOM
+	var update = __webpack_require__(4)(content, {});
+	if(content.locals) module.exports = content.locals;
+	// Hot Module Replacement
+	if(false) {
+		// When the styles change, update the <style> tags
+		if(!content.locals) {
+			module.hot.accept("!!./../css-loader/index.js!./index.css", function() {
+				var newContent = require("!!./../css-loader/index.js!./index.css");
+				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+				update(newContent);
+			});
+		}
+		// When the module is disposed, remove the <style> tags
+		module.hot.dispose(function() { update(); });
+	}
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+	exports = module.exports = __webpack_require__(3)();
+	// imports
+
+
+	// module
+	exports.push([module.id, "html,\nbody {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbutton {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tbackground: none;\n\tfont-size: 100%;\n\tvertical-align: baseline;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tcolor: inherit;\n\t-webkit-appearance: none;\n\tappearance: none;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-font-smoothing: antialiased;\n\tfont-smoothing: antialiased;\n}\n\nbody {\n\tfont: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\tline-height: 1.4em;\n\tbackground: #f5f5f5;\n\tcolor: #4d4d4d;\n\tmin-width: 230px;\n\tmax-width: 550px;\n\tmargin: 0 auto;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-font-smoothing: antialiased;\n\tfont-smoothing: antialiased;\n\tfont-weight: 300;\n}\n\nbutton,\ninput[type=\"checkbox\"] {\n\toutline: none;\n}\n\n.hidden {\n\tdisplay: none;\n}\n\n.todoapp {\n\tbackground: #fff;\n\tmargin: 130px 0 40px 0;\n\tposition: relative;\n\tbox-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),\n\t            0 25px 50px 0 rgba(0, 0, 0, 0.1);\n}\n\n.todoapp input::-webkit-input-placeholder {\n\tfont-style: italic;\n\tfont-weight: 300;\n\tcolor: #e6e6e6;\n}\n\n.todoapp input::-moz-placeholder {\n\tfont-style: italic;\n\tfont-weight: 300;\n\tcolor: #e6e6e6;\n}\n\n.todoapp input::input-placeholder {\n\tfont-style: italic;\n\tfont-weight: 300;\n\tcolor: #e6e6e6;\n}\n\n.todoapp h1 {\n\tposition: absolute;\n\ttop: -155px;\n\twidth: 100%;\n\tfont-size: 100px;\n\tfont-weight: 100;\n\ttext-align: center;\n\tcolor: rgba(175, 47, 47, 0.15);\n\t-webkit-text-rendering: optimizeLegibility;\n\t-moz-text-rendering: optimizeLegibility;\n\ttext-rendering: optimizeLegibility;\n}\n\n.new-todo,\n.edit {\n\tposition: relative;\n\tmargin: 0;\n\twidth: 100%;\n\tfont-size: 24px;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tline-height: 1.4em;\n\tborder: 0;\n\toutline: none;\n\tcolor: inherit;\n\tpadding: 6px;\n\tborder: 1px solid #999;\n\tbox-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);\n\tbox-sizing: border-box;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-font-smoothing: antialiased;\n\tfont-smoothing: antialiased;\n}\n\n.new-todo {\n\tpadding: 16px 16px 16px 60px;\n\tborder: none;\n\tbackground: rgba(0, 0, 0, 0.003);\n\tbox-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);\n}\n\n.main {\n\tposition: relative;\n\tz-index: 2;\n\tborder-top: 1px solid #e6e6e6;\n}\n\nlabel[for='toggle-all'] {\n\tdisplay: none;\n}\n\n.toggle-all {\n\tposition: absolute;\n\ttop: -55px;\n\tleft: -12px;\n\twidth: 60px;\n\theight: 34px;\n\ttext-align: center;\n\tborder: none; /* Mobile Safari */\n}\n\n.toggle-all:before {\n\tcontent: '\\276F';\n\tfont-size: 22px;\n\tcolor: #e6e6e6;\n\tpadding: 10px 27px 10px 27px;\n}\n\n.toggle-all:checked:before {\n\tcolor: #737373;\n}\n\n.todo-list {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.todo-list li {\n\tposition: relative;\n\tfont-size: 24px;\n\tborder-bottom: 1px solid #ededed;\n}\n\n.todo-list li:last-child {\n\tborder-bottom: none;\n}\n\n.todo-list li.editing {\n\tborder-bottom: none;\n\tpadding: 0;\n}\n\n.todo-list li.editing .edit {\n\tdisplay: block;\n\twidth: 506px;\n\tpadding: 13px 17px 12px 17px;\n\tmargin: 0 0 0 43px;\n}\n\n.todo-list li.editing .view {\n\tdisplay: none;\n}\n\n.todo-list li .toggle {\n\ttext-align: center;\n\twidth: 40px;\n\t/* auto, since non-WebKit browsers doesn't support input styling */\n\theight: auto;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tmargin: auto 0;\n\tborder: none; /* Mobile Safari */\n\t-webkit-appearance: none;\n\tappearance: none;\n}\n\n.todo-list li .toggle:after {\n\tcontent: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"-10 -18 100 135\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"none\" stroke=\"#ededed\" stroke-width=\"3\"/></svg>');\n}\n\n.todo-list li .toggle:checked:after {\n\tcontent: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"-10 -18 100 135\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"none\" stroke=\"#bddad5\" stroke-width=\"3\"/><path fill=\"#5dc2af\" d=\"M72 25L42 71 27 56l-4 4 20 20 34-52z\"/></svg>');\n}\n\n.todo-list li label {\n\twhite-space: pre;\n\tword-break: break-word;\n\tpadding: 15px 60px 15px 15px;\n\tmargin-left: 45px;\n\tdisplay: block;\n\tline-height: 1.2;\n\ttransition: color 0.4s;\n}\n\n.todo-list li.completed label {\n\tcolor: #d9d9d9;\n\ttext-decoration: line-through;\n}\n\n.todo-list li .destroy {\n\tdisplay: none;\n\tposition: absolute;\n\ttop: 0;\n\tright: 10px;\n\tbottom: 0;\n\twidth: 40px;\n\theight: 40px;\n\tmargin: auto 0;\n\tfont-size: 30px;\n\tcolor: #cc9a9a;\n\tmargin-bottom: 11px;\n\ttransition: color 0.2s ease-out;\n}\n\n.todo-list li .destroy:hover {\n\tcolor: #af5b5e;\n}\n\n.todo-list li .destroy:after {\n\tcontent: '\\D7';\n}\n\n.todo-list li:hover .destroy {\n\tdisplay: block;\n}\n\n.todo-list li .edit {\n\tdisplay: none;\n}\n\n.todo-list li.editing:last-child {\n\tmargin-bottom: -1px;\n}\n\n.footer {\n\tcolor: #777;\n\tpadding: 10px 15px;\n\theight: 20px;\n\ttext-align: center;\n\tborder-top: 1px solid #e6e6e6;\n}\n\n.footer:before {\n\tcontent: '';\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\theight: 50px;\n\toverflow: hidden;\n\tbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),\n\t            0 8px 0 -3px #f6f6f6,\n\t            0 9px 1px -3px rgba(0, 0, 0, 0.2),\n\t            0 16px 0 -6px #f6f6f6,\n\t            0 17px 2px -6px rgba(0, 0, 0, 0.2);\n}\n\n.todo-count {\n\tfloat: left;\n\ttext-align: left;\n}\n\n.todo-count strong {\n\tfont-weight: 300;\n}\n\n.filters {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tposition: absolute;\n\tright: 0;\n\tleft: 0;\n}\n\n.filters li {\n\tdisplay: inline;\n}\n\n.filters li a {\n\tcolor: inherit;\n\tmargin: 3px;\n\tpadding: 3px 7px;\n\ttext-decoration: none;\n\tborder: 1px solid transparent;\n\tborder-radius: 3px;\n}\n\n.filters li a.selected,\n.filters li a:hover {\n\tborder-color: rgba(175, 47, 47, 0.1);\n}\n\n.filters li a.selected {\n\tborder-color: rgba(175, 47, 47, 0.2);\n}\n\n.clear-completed,\nhtml .clear-completed:active {\n\tfloat: right;\n\tposition: relative;\n\tline-height: 20px;\n\ttext-decoration: none;\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.clear-completed:hover {\n\ttext-decoration: underline;\n}\n\n.info {\n\tmargin: 65px auto 0;\n\tcolor: #bfbfbf;\n\tfont-size: 10px;\n\ttext-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);\n\ttext-align: center;\n}\n\n.info p {\n\tline-height: 1;\n}\n\n.info a {\n\tcolor: inherit;\n\ttext-decoration: none;\n\tfont-weight: 400;\n}\n\n.info a:hover {\n\ttext-decoration: underline;\n}\n\n/*\n\tHack to remove background from Mobile Safari.\n\tCan't use it globally since it destroys checkboxes in Firefox\n*/\n@media screen and (-webkit-min-device-pixel-ratio:0) {\n\t.toggle-all,\n\t.todo-list li .toggle {\n\t\tbackground: none;\n\t}\n\n\t.todo-list li .toggle {\n\t\theight: 40px;\n\t}\n\n\t.toggle-all {\n\t\t-webkit-transform: rotate(90deg);\n\t\ttransform: rotate(90deg);\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t}\n}\n\n@media (max-width: 430px) {\n\t.footer {\n\t\theight: 50px;\n\t}\n\n\t.filters {\n\t\tbottom: 10px;\n\t}\n}\n", ""]);
+
+	// exports
+
+
+/***/ },
+/* 7 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/*global qs, qsa, $on, $parent, $delegate */
-	__webpack_require__(3);
+	__webpack_require__(8);
 	(function (window) {
 	    'use strict';
 
@@ -559,7 +671,7 @@
 
 
 /***/ },
-/* 3 */
+/* 8 */
 /***/ function(module, exports) {
 
 	/*global NodeList */
@@ -617,7 +729,7 @@
 
 
 /***/ },
-/* 4 */
+/* 9 */
 /***/ function(module, exports) {
 
 	(function (window) {
@@ -891,7 +1003,7 @@
 
 
 /***/ },
-/* 5 */
+/* 10 */
 /***/ function(module, exports) {
 
 	(function (window) {
@@ -1017,7 +1129,7 @@
 
 
 /***/ },
-/* 6 */
+/* 11 */
 /***/ function(module, exports) {
 
 	/*jshint eqeqeq:false */
@@ -1163,7 +1275,7 @@
 
 
 /***/ },
-/* 7 */
+/* 12 */
 /***/ function(module, exports) {
 
 	/*jshint laxbreak:true */
diff --git a/index.html b/index.html
index 6c3735f..3255fd1 100755
--- a/index.html
+++ b/index.html
@@ -3,8 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<title>VanillaJS • TodoMVC</title>
-		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
-		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+		<script src="bundle.js"></script>
 	</head>
 	<body>
 		<section class="todoapp">
@@ -39,6 +38,5 @@
 			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
-		<script src="bundle.js"></script>
 	</body>
 </html>
diff --git a/js/app.js b/js/app.js
index b69624d..77fad1b 100755
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,6 @@
 /*global app, $on */
-require('todomvc-common');
+require('todomvc-common/base.css');
+require('todomvc-app-css/index.css');
 require('./view');
 require('./helpers');
 require('./controller');
@@ -22,11 +23,15 @@ require('./template');
 		this.controller = new app.Controller(this.model, this.view);
 	}
 
-	var todo = new Todo('todos-vanillajs');
+	var todo;
 
 	function setView() {
 		todo.controller.setView(document.location.hash);
 	}
-	$on(window, 'load', setView);
+
+	$on(window, 'load', function() {
+		todo = new Todo('todos-vanillajs');
+		setView();
+	});
 	$on(window, 'hashchange', setView);
 })();
diff --git a/package.json b/package.json
index d9c9f54..337a3ed 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "babel": "5.8.21",
     "babel-core": "5.8.21",
     "babel-loader": "5.3.2",
+    "css-loader": "0.15.6",
     "jasmine-core": "2.3.4",
+    "style-loader": "0.12.3",
     "webpack": "1.11.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 8fe22bf..f3a9444 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,12 @@ module.exports = {
     filename: 'bundle.js',
     path: here()
   },
-  context: here('js')
+  context: here('js'),
+  module: {
+    loaders: [
+      {test: /\.css$/, loaders: ['style', 'css']}
+    ]
+  }
 };
 
 function here(d) {