Remove stylus

server/static/package.json

@@ -4,28 +4,23 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "./node_modules/browserify/bin/cmd.js src/index.tsx -p tsify > bundle.js",
-    "debug": "./node_modules/watchify/bin/cmd.js src/index.tsx -p tsify -o bundle.js",
     "start": "./node_modules/webpack/bin/webpack.js --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "browserify": "^13.0.0",
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
     "sass-loader": "^3.1.2",
+    "style-loader": "^0.13.0",
     "stylus-loader": "^1.5.1",
     "ts-loader": "^0.8.1",
-    "tsify": "^0.13.2",
     "url-loader": "^0.5.7",
-    "watchify": "^3.7.0",
     "webpack": "^1.12.14",
     "webpack-livereload-plugin": "^0.5.3"
   },
   "dependencies": {
-    "browserify": "^13.0.0",
     "classnames": "^2.2.3",
     "es6-promise": "^3.1.2",
     "lodash": "^4.5.1",
@@ -41,7 +36,6 @@
     "redux-logger": "^2.6.0",
     "redux-thunk": "^1.0.3",
     "remark": "^4.1.1",
-    "remark-react": "^1.1.0",
-    "style-loader": "^0.13.0"
+    "remark-react": "^1.1.0"
   }
 }

server/static/src/components/Header.tsx

@@ -4,7 +4,7 @@ import TodoTextInput from './TodoTextInput';
 import File from './File'
 import * as model from '../models/files'
 
-const style = require('../styles/header.styl')
+const style = require('../styles/header.scss')
 
 interface HeaderProps {
   file: model.File;

server/static/src/containers/App.tsx

@@ -8,7 +8,7 @@ import * as TodoActions from '../actions/todos';
 import { File } from '../models/files';
 import { Todo } from '../models/todos';
 
-const style = require('../styles/app.styl')
+const styles = require('../styles/app.scss')
 
 interface AppProps {
   todos?: Todo[];
@@ -21,7 +21,7 @@ class App extends React.Component<AppProps, void> {
     const { todos, file, dispatch } = this.props;
     const actions = bindActionCreators(TodoActions, dispatch);
     return (
-      <div className={style.app}>
+      <div className={styles.app}>
         <Header
           file={file}
           addTodo={actions.addTodo} />

server/static/src/styles/app.scss

@@ -0,0 +1,39 @@
+// @import '../../node_modules/material-design-icons/iconfont/material-icons.css';
+$dir: '../../node_modules/material-design-icons/iconfont/';
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  // src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url($dir + 'MaterialIcons-Regular.woff2') format('woff2'),
+       url($dir + 'MaterialIcons-Regular.woff') format('woff'),
+       url($dir + 'MaterialIcons-Regular.ttf') format('truetype');
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-size: 14px;
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  padding: 0;
+  list-style-type: none;
+}
+
+:local {
+  .app {
+    display: -webkit-box;
+    width: 100%;
+  }
+}

server/static/src/styles/header.scss

@@ -0,0 +1,5 @@
+:local {
+  .header {
+    word-break: break-all;
+  }
+}