moved to camel case, fix teml strings

package.json

@@ -18,6 +18,7 @@
     "electron-config": "^0.2.1",
     "electron-context-menu": "^0.7.0",
     "electron-debug": "^1.0.1",
+    "es6-template-strings": "^2.0.1",
     "folder-walker": "^3.0.0",
     "format-duration": "^1.0.0",
     "insert-css": "^1.1.0",

renderer/views/components/button/index.js

@@ -1,12 +1,16 @@
 const html = require('choo/html')
+const compile = require('es6-template-strings/compile')
+const resolve = require('es6-template-strings/resolve')
 const icon = require('../icon')
 
 const css = require('csjs')
 const fs = require('fs')
 const path = require('path')
 const insert = require('insert-css')
 const rawCSS = fs.readFileSync(path.join(__dirname, 'index.css'), 'utf8')
-const buttonCSS = css`${rawCSS}`
+const compiled = compile(rawCSS)
+const buttonCSS = css.apply(null, resolve(compiled, {}))
+
 insert(css.getCss(buttonCSS))
 
 function button (onclick, iconName, disabled) {

renderer/views/components/form-control.js

@@ -2,7 +2,7 @@ const css = require('csjs')
 const insert = require('insert-css')
 
 const style = css`
-  .form-control {
+  .formControl {
     display: inline-block;
     width: 100%;
     min-height: 25px;
@@ -15,7 +15,7 @@ const style = css`
     outline: none;
   }
 
-  .form-control:focus {
+  .formControl:focus {
     border-color: var(--focus-input-color);
     box-shadow: 0 0 0 1px var(--focus-input-color);
   }

renderer/views/components/search.js

@@ -4,7 +4,7 @@ const insert = require('insert-css')
 const fcStyle = require('./form-control').style
 
 const style = css`
-  .search-input {
+  .searchInput {
     width: auto;
     padding: 1px 5px;
     vertical-align: middle;
@@ -18,7 +18,7 @@ function search (oninput) {
   return html`
   <input
     type="text"
-    class="${style['search-input']} ${fcStyle['form-control']}"
+    class="${style.searchInput} ${fcStyle.formControl}"
     placeholder="Search"
     oninput=${oninput}>
 `

renderer/views/components/table.js

@@ -3,19 +3,19 @@ const fd = require('format-duration')
 const css = require('csjs')
 const insert = require('insert-css')
 const style = css`
-  .media-list {
+  .mediaList {
     table-layout: fixed;
   }
 
-  .media-list .time {
+  .mediaList .time {
     text-align: right;
   }
 `
 
 insert(css.getCss(style))
 
 module.exports = (state, prev, send) => html`
-  <table class="${style['media-list']} table-striped">
+  <table class="${style.mediaList} table-striped">
     <thead>
       <tr>
         <th>Title</th>

renderer/views/components/volume.js

@@ -4,7 +4,7 @@ const insert = require('insert-css')
 const assign = Object.assign
 
 const style = css`
-  .volume-control {
+  .volumeControl {
     position: relative;
     display: inline-block;
     vertical-align: middle;
@@ -27,7 +27,7 @@ function volume (value, oninput, opts) {
   const { min, max, step, style } = opts
   return html`
   <input type="range"
-    class="${style['volume-control']}"
+    class="${style.volumeControl}"
     min="${min}" max="${max}" step="${step}"
     oninput=${oninput}
     value="${value}">

renderer/views/preferences.js

@@ -33,7 +33,7 @@ function preferences (state, prev, send) {
               <div class="form-group">
                   <label>Library Folder Path</label>
                   <input type="text"
-                    class="${fcStyle['form-control']}"
+                    class="${fcStyle.formControl}"
                     onclick=${showDialog}
                     value="${state.config.music}">
               </div>