Migrate ConsoleExpression to CSS modules

Author: outoftime

src/components/Console.module.css

@@ -27,3 +27,12 @@
   cursor: pointer;
   background-color: var(--color-low-contrast-gray);
 }
+
+.row {
+  padding-left: 1em;
+  position: relative;
+}
+
+.inactive {
+  color: var(--color-light-gray);
+}

src/components/ConsoleExpression.jsx

@@ -7,6 +7,8 @@ import isNil from 'lodash-es/isNil';
 
 import {ConsoleEntry as ConsoleEntryRecord} from '../records';
 
+import styles from './ConsoleExpression.module.css';
+
 export default function ConsoleExpression({entry: {expression}, isActive}) {
   if (isNil(expression)) {
     return null;
@@ -16,13 +18,12 @@ export default function ConsoleExpression({entry: {expression}, isActive}) {
     <div
       className={
         classnames(
-          'console__row',
-          'console__expression',
-          {console__expression_inactive: !isActive},
+          styles.expression,
+          {[styles.inactive]: !isActive},
         )
       }
     >
-      <div className="console__chevron">
+      <div className={styles.chevron}>
         <FontAwesomeIcon icon={faChevronRight} />
       </div>
       {expression}

src/components/ConsoleExpression.module.css

@@ -0,0 +1,16 @@
+.expression {
+  composes: row 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;
+}