ConsoleOutput CSS module

Author: outoftime

src/components/ConsoleOutput.jsx

@@ -7,10 +7,12 @@ import classnames from 'classnames';
 
 import {ConsoleEntry} from '../records';
 
+import styles from './ConsoleOutput.module.css';
+
 export default function ConsoleOutput({entry, isActive}) {
   const {expression, value, error} = entry;
   const chevron = expression ?
-    (<div className="console__chevron console__chevron_outdent">
+    (<div className={styles.chevron}>
       <FontAwesomeIcon icon={faChevronLeft} />
     </div>) :
     null;
@@ -20,9 +22,8 @@ export default function ConsoleOutput({entry, isActive}) {
       <div
         className={
           classnames(
-            'console__row',
-            'console__value',
-            {console__value_inactive: !isActive},
+            styles.value,
+            {[styles.inactive]: !isActive},
           )
         }
       >
@@ -37,8 +38,8 @@ export default function ConsoleOutput({entry, isActive}) {
       <div
         className={
           classnames(
-            'console__error',
-            {console__error_inactive: !isActive},
+            styles.error,
+            {[styles.inactive]: !isActive},
           )
         }
       >

src/components/ConsoleOutput.module.css

@@ -0,0 +1,17 @@
+.value {
+  composes: row from './Console.module.css';
+  white-space: pre-wrap;
+}
+
+.error {
+  color: var(--color-red);
+}
+
+.inactive {
+  composes: inactive from './Console.module.css';
+}
+
+.chevron {
+  composes: chevron from './Console.module.css';
+  text-indent: -0.1em;
+}

src/css/application.css

@@ -620,45 +620,13 @@ body {
 
 /** @define console */
 
-.console__row {
-  padding-left: 1em;
-  position: relative;
-}
-
-.console__chevron {
-  color: var(--color-light-gray);
-  left: 0;
-  position: absolute;
-  top: 0;
-  transform: scale(0.6);
-  transform-origin: left center;
-}
-
-.console__chevron_outdent {
-  text-indent: -0.1em;
-}
-
 .console__entry {
   flex: none;
   margin-top: 0.5em;
   padding-bottom: 0.5em;
   border-bottom: 1px solid var(--color-low-contrast-gray);
 }
 
-.console__value {
-  white-space: pre-wrap;
-}
-
-.console__error {
-  color: var(--color-red);
-}
-
-.console__expression_inactive,
-.console__value_inactive,
-.console__error_inactive {
-  color: var(--color-light-gray);
-}
-
 /** @define preview */
 
 .preview {