[WIP] CSS Modules for console

package.json

@@ -308,6 +308,7 @@
     "check-dependencies": "^1.0.1",
     "circular-dependency-plugin": "^5.0.2",
     "cloudflare": "^2.1.1",
+    "css-loader": "^2.1.1",
     "cssnano": "^3.10.0",
     "doctoc": "^1.2.0",
     "eslint": "^5.6.0",
@@ -356,6 +357,7 @@
     "source-map-loader": "^0.2.2",
     "stats-webpack-plugin": "^0.6.2",
     "string-replace-loader": "^2.1.1",
+    "style-loader": "^0.23.1",
     "stylelint-selector-bem-pattern": "^2.0.0",
     "substitute-loader": "^1.0.0",
     "svg-react-loader": "^0.4.4",

src/components/Console.jsx

@@ -12,6 +12,7 @@ import {t} from 'i18next';
 
 import {EditorLocation} from '../records';
 
+import styles from './Console.module.css';
 import ConsoleEntry from './ConsoleEntry';
 import ConsoleInput from './ConsoleInput';
 
@@ -39,12 +40,13 @@ export default function Console({
 
   const console = (
     <div
-      className="console__scroll-container output__item"
+      className={styles.scrollContainer}
       onClick={onConsoleClicked}
     >
       <div
         className={
-          classnames('console__repl', {console__repl_zoomed: isTextSizeLarge})
+          classnames(styles.repl, {[styles.zoomed]: isTextSizeLarge})
+
         }
       >
         <ConsoleInput
@@ -72,12 +74,12 @@ export default function Console({
   return (
     <div
       className={classnames(
-        'console',
+        styles.console,
         {u__hidden: isHidden},
       )}
     >
       <div
-        className="label console__label"
+        className={styles.label}
         onClick={partial(onToggleVisible, currentProjectKey)}
       >
         <div>

src/components/Console.module.css

@@ -0,0 +1,47 @@
+.console {
+  flex: none;
+}
+
+.repl {
+  display: flex;
+  flex-direction: column-reverse;
+  font-family: 'Inconsolata', monospace;
+  font-size: 14px;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.repl.zoomed {
+  font-size: 20px;
+}
+
+.scrollContainer {
+  height: 40vh;
+  padding: 0.5em;
+}
+
+.label {
+  composes: label from '../css/label.module.css';
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: var(--color-low-contrast-gray);
+}
+
+.row {
+  padding-left: 1em;
+  position: relative;
+}
+
+.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/ConsoleEntry.jsx

@@ -5,10 +5,11 @@ import {ConsoleEntry as ConsoleEntryRecord} from '../records';
 
 import ConsoleExpression from './ConsoleExpression';
 import ConsoleOutput from './ConsoleOutput';
+import styles from './ConsoleEntry.module.css';
 
 export default function ConsoleEntry({entry, isActive}) {
   return (
-    <div className="console__entry">
+    <div className={styles.entry}>
       <ConsoleExpression entry={entry} isActive={isActive} />
       <ConsoleOutput entry={entry} isActive={isActive} />
     </div>

src/components/ConsoleEntry.module.css

@@ -0,0 +1,6 @@
+.entry {
+  flex: none;
+  margin-top: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid var(--color-low-contrast-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,12 @@
+.expression {
+  composes: row from './Console.module.css';
+  composes: entry from './Console.module.css';
+}
+
+.inactive {
+  composes: inactive from './Console.module.css';
+}
+
+.chevron {
+  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,16 @@
+.input {
+  composes: row from './Console.module.css';
+  composes: entry from './ConsoleEntry.module.css';
+}
+
+.chevron {
+  composes: chevron from './Console.module.css';
+}
+
+.chevron.blue {
+  color: var(--color-blue);
+}
+
+.console__editor {
+  margin-left: -4px;
+}

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

@@ -618,92 +618,6 @@ body {
   animation: 0.2s ease-in 0.1s both fadeIn;
 }
 
-/** @define console */
-
-.console {
-  flex: none;
-}
-
-.console__label {
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-  background-color: var(--color-low-contrast-gray);
-}
-
-.console__scroll-container {
-  height: 40vh;
-  padding: 0.5em;
-}
-
-.console__repl {
-  display: flex;
-  flex-direction: column-reverse;
-  font-family: 'Inconsolata', monospace;
-  font-size: 14px;
-  max-height: 100%;
-  overflow: auto;
-}
-
-.console__repl_zoomed {
-  font-size: 20px;
-}
-
-.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_blue {
-  color: var(--color-blue);
-}
-
-.console__chevron_outdent {
-  text-indent: -0.1em;
-}
-
-.console__entry,
-.console__input {
-  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;
-}
-
-.console__error {
-  color: var(--color-red);
-}
-
-.console__expression_inactive,
-.console__value_inactive,
-.console__error_inactive {
-  color: var(--color-light-gray);
-}
-
 /** @define preview */
 
 .preview {

src/css/label.module.css

@@ -0,0 +1,9 @@
+.label {
+  background-color: var(--color-chrome);
+  color: var(--color-dark-gray);
+  cursor: pointer;
+  font-family: 'Roboto';
+  font-size: var(--font-size-menu);
+  padding: 0.5em 1em;
+  user-select: none;
+}

webpack.config.js

@@ -193,6 +193,13 @@ module.exports = (env = process.env.NODE_ENV || 'development') => {
           use: ['source-map-loader'],
           enforce: 'pre',
         },
+        {
+          test: /\.module\.css$/u,
+          use: [
+            'style-loader',
+            {loader: 'css-loader', query: {modules: true}},
+          ],
+        },
         {
           include: [
             path.resolve(__dirname, 'bower_components'),