CSS module for console input

Author: outoftime

src/components/Console.module.css

@@ -36,3 +36,12 @@
 .inactive {
   color: var(--color-light-gray);
 }
+
+.chevron {
+  color: var(--color-light-gray);
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: scale(0.6);
+  transform-origin: left center;
+}

src/components/ConsoleExpression.module.css

@@ -1,16 +1,12 @@
 .expression {
   composes: row from './Console.module.css';
+  composes: entry from './Console.module.css';
 }
 
 .inactive {
   composes: inactive from './Console.module.css';
 }
 
 .chevron {
-  color: var(--color-light-gray);
-  left: 0;
-  position: absolute;
-  top: 0;
-  transform: scale(0.6);
-  transform-origin: left center;
+  composes: chevron from './Console.module.css';
 }

src/components/ConsoleInput.jsx

@@ -1,6 +1,7 @@
 import {faChevronRight} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import bindAll from 'lodash-es/bindAll';
+import classnames from 'classnames';
 import get from 'lodash-es/get';
 import isNil from 'lodash-es/isNil';
 import React, {Component} from 'react';
@@ -14,6 +15,8 @@ import {
   inheritFontStylesFromParentElement,
 } from '../util/ace';
 
+import styles from './ConsoleInput.module.css';
+
 export default class ConsoleInput extends Component {
   constructor() {
     super();
@@ -119,13 +122,13 @@ export default class ConsoleInput extends Component {
   render() {
     return (
       <div
-        className="console__row console__input"
+        className={styles.input}
         onClick={preventClickthrough}
       >
-        <div className="console__chevron console__chevron_blue">
+        <div className={classnames(styles.chevron, styles.blue)}>
           <FontAwesomeIcon icon={faChevronRight} />
         </div>
-        <div className="console__editor" ref={this._ref} />
+        <div className={styles.editor} ref={this._ref} />
       </div>
     );
   }

src/components/ConsoleInput.module.css

@@ -0,0 +1,20 @@
+.input {
+  composes: row from './Console.module.css';
+  /* TODO: This is mostly duplicated with console entry */
+  flex: none;
+  margin-top: 0.5em;
+  padding-bottom: 0.5em;
+  height: 1em;
+}
+
+.chevron {
+  composes: chevron from './Console.module.css';
+}
+
+.chevron.blue {
+  color: var(--color-blue);
+}
+
+.console__editor {
+  margin-left: -4px;
+}

src/css/application.css

@@ -626,33 +626,17 @@ body {
   transform-origin: left center;
 }
 
-.console__chevron_blue {
-  color: var(--color-blue);
-}
-
 .console__chevron_outdent {
   text-indent: -0.1em;
 }
 
-.console__entry,
-.console__input {
+.console__entry {
   flex: none;
   margin-top: 0.5em;
   padding-bottom: 0.5em;
-}
-
-.console__input {
-  height: 1em;
-}
-
-.console__entry {
   border-bottom: 1px solid var(--color-low-contrast-gray);
 }
 
-.console__editor {
-  margin-left: -4px;
-}
-
 .console__value {
   white-space: pre-wrap;
 }