From 1e5e3576cddcdb8f22cbd4f9873ba4a26486b3b3 Mon Sep 17 00:00:00 2001
From: Guillermo Rauch <rauchg@gmail.com>
Date: Fri, 8 Jul 2016 14:27:41 -0700
Subject: [PATCH] implement custom CSS from config

---
 app/hyperterm.js |  6 ++++--
 app/term.js      | 21 +++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/hyperterm.js b/app/hyperterm.js
index 9335e804..b6eae3bf 100644
--- a/app/hyperterm.js
+++ b/app/hyperterm.js
@@ -74,7 +74,7 @@ export default class HyperTerm extends Component {
   }
 
   render () {
-    const { backgroundColor, borderColor } = this.props.config;
+    const { backgroundColor, borderColor, css } = this.props.config;
     return <div onClick={ this.focusActive }>
       <div style={{ borderColor }} className={ classes('main', { mac: this.state.mac }) }>
         <header style={{ backgroundColor }} onMouseDown={this.onHeaderMouseDown}>
@@ -98,12 +98,13 @@ export default class HyperTerm extends Component {
             this.state.sessions.map((uid, i) => {
               const active = i === this.state.active;
               const { config } = this.props;
-              return <div key={`d${uid}`} className={classes('term', { active })} style={{ width: '100%', height: '100%' }} ref='term'>
+              return <div key={`d${uid}`} className={classes('term', { active })} style={{ width: '100%', height: '100%' }}>
                 <Term
                   key={uid}
                   ref={`term-${uid}`}
                   cols={this.state.cols}
                   rows={this.state.rows}
+                  customCSS={config.termCSS}
                   fontSize={this.state.fontSize}
                   cursorColor={config.cursorColor}
                   fontFamily={config.fontFamily}
@@ -130,6 +131,7 @@ export default class HyperTerm extends Component {
         <a href='' onClick={this.quitAndInstall}>Restart</a>
         to apply <span className='close' onClick={this.dismissUpdate}>[x]</span>
       </div>
+      <style dangerouslySetInnerHTML={{ __html: Array.from(css || '').join('\n') }} />
     </div>;
   }
 
diff --git a/app/term.js b/app/term.js
index 694bb63a..7fe4a211 100644
--- a/app/term.js
+++ b/app/term.js
@@ -22,12 +22,7 @@ export default class Term extends Component {
     this.term.prefs_.set('background-color', props.backgroundColor);
     this.term.prefs_.set('color-palette-overrides', props.colors);
 
-    this.term.prefs_.set('user-css', URL.createObjectURL(new Blob([`
-      .cursor-node[focus="false"] {
-        border-width: 1px !important;
-      }
-      ${Array.from(props.customCSS || '').join('\n')}
-    `]), { type: 'text/css' }));
+    this.term.prefs_.set('user-css', this.getStylesheet(props.customCSS));
 
     this.term.onTerminalReady = () => {
       const io = this.term.io.push();
@@ -46,6 +41,16 @@ export default class Term extends Component {
     return this.term.document_;
   }
 
+  getStylesheet (css) {
+    const blob = new Blob([`
+      .cursor-node[focus="false"] {
+        border-width: 1px !important;
+      }
+      ${Array.from(css || '').join('\n')}
+    `]);
+    return URL.createObjectURL(blob, { type: 'text/css' });
+  }
+
   componentWillReceiveProps (nextProps) {
     if (this.props.fontSize !== nextProps.fontSize) {
       this.term.prefs_.set('font-size', nextProps.fontSize);
@@ -66,6 +71,10 @@ export default class Term extends Component {
     if (this.props.colors.toString() !== nextProps.colors.toString()) {
       this.term.prefs_.set('color-palette-overrides', nextProps.colors);
     }
+
+    if (this.props.customCSS.toString() !== nextProps.customCSS.toString()) {
+      this.term.prefs_.set('user-css', this.getStylesheet(nextProps.customCSS));
+    }
   }
 
   shouldComponentUpdate (nextProps) {