Convert Editor to CSS modules

Author: shepmaster

tests/spec/features/assistance_spec.rb

@@ -17,9 +17,7 @@
       click_on("add a main function")
     end
 
-    within('.editor') do
-      expect(editor).to have_line 'println!("Hello, world!")'
-    end
+    expect(editor).to have_line 'println!("Hello, world!")'
   end
 
   scenario "using an unstable feature offers adding the feature flag" do
@@ -33,9 +31,7 @@
       click_on("add `#![feature(abi_avr_interrupt)]`")
     end
 
-    within('.editor') do
-      expect(editor).to have_line '#![feature(abi_avr_interrupt)]'
-    end
+    expect(editor).to have_line '#![feature(abi_avr_interrupt)]'
   end
 
   scenario "using a type that hasn't been imported offers importing it" do
@@ -48,9 +44,7 @@
       click_on("use std::collections::HashMap;")
     end
 
-    within('.editor') do
-      expect(editor).to have_line 'use std::collections::HashMap;'
-    end
+    expect(editor).to have_line 'use std::collections::HashMap;'
   end
 
   scenario "triggering a panic offers enabling backtraces" do

tests/spec/features/tools_spec.rb

@@ -13,9 +13,7 @@
     editor.set 'fn main() { [1,2,3,4]; }'
     in_tools_menu { click_on("Rustfmt") }
 
-    within('.editor') do
-      expect(editor).to have_line '[1, 2, 3, 4];'
-    end
+    expect(editor).to have_line '[1, 2, 3, 4];'
   end
 
   scenario "linting code with Clippy" do

tests/spec/support/editor.rb

@@ -5,7 +5,7 @@ def initialize(page)
   end
 
   def set(text)
-    page.within('.editor .ace_text-input', visible: :any) do
+    page.within('.ace_text-input', visible: :any) do
       page.execute_script <<~JS
         window.rustPlayground.setCode(#{text.to_json});
       JS
@@ -17,7 +17,7 @@ def has_line?(text)
   end
 
   def has_highlighted_text?(text)
-    page.within('.editor .ace_text-input', visible: :any) do
+    page.within('.ace_text-input', visible: :any) do
       selected = page.evaluate_script <<~JS
         (() => {
           const editor = document.querySelector('.ace_editor').env.editor;

ui/frontend/AdvancedEditor.tsx

@@ -5,6 +5,8 @@ import { aceResizeKey } from './selectors';
 import State from './state';
 import { AceResizeKey, CommonEditorProps, Crate, Edition, PairCharacters, Position, Selection } from './types';
 
+import styles from './Editor.module.css';
+
 type Ace = typeof import('ace-builds');
 type AceEditor = import('ace-builds').Ace.Editor;
 type AceCompleter = import('ace-builds').Ace.Completer;
@@ -289,7 +291,7 @@ const AdvancedEditor: React.SFC<AdvancedEditorProps> = props => {
   }, []));
 
   return (
-    <div className="editor-advanced" ref={child} />
+    <div className={styles.advanced} ref={child} />
   );
 };
 

ui/frontend/Editor.module.css

@@ -0,0 +1,14 @@
+.container {
+  composes: -autoSize from './shared.module.css';
+  position: relative;
+}
+
+.advanced {
+  composes: -bodyMonospace -autoSize from './shared.module.css';
+  position: absolute;
+}
+
+.simple {
+  composes: advanced;
+  border: none;
+}

ui/frontend/Editor.tsx

@@ -6,6 +6,8 @@ import AdvancedEditor from './AdvancedEditor';
 import { CommonEditorProps, Editor as EditorType, Position, Selection } from './types';
 import { State } from './reducers';
 
+import styles from './Editor.module.css';
+
 class CodeByteOffsets {
   readonly code: string;
   readonly lines: string[];
@@ -61,7 +63,7 @@ class SimpleEditor extends React.PureComponent<CommonEditorProps> {
     return (
       <textarea
         ref={this.trackEditor}
-        className="editor-simple"
+        className={styles.simple}
         name="editor-simple"
         autoCapitalize="none"
         autoComplete="off"
@@ -119,7 +121,7 @@ const Editor: React.SFC = () => {
   const SelectedEditor = editor === EditorType.Simple ? SimpleEditor : AdvancedEditor;
 
   return (
-    <div className="editor">
+    <div className={styles.container}>
       <SelectedEditor code={code}
         position={position}
         selection={selection}

ui/frontend/Playground.module.css

@@ -5,15 +5,8 @@
   padding-bottom: 1em;
 }
 
-.-autoSize {
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-}
-
 .-parent {
-  composes: -autoSize;
+  composes: -autoSize from './shared.module.css';
   display: grid;
 }
 
@@ -62,11 +55,11 @@ $splitSecondaryDimension: 1fr;
 }
 
 .editor {
-  composes: -autoSize;
+  composes: -autoSize from './shared.module.css';
   border: 4px solid var(--border-color);
   border-radius: 4px;
 }
 
 .output {
-  composes: -autoSize;
+  composes: -autoSize from './shared.module.css';
 }

ui/frontend/index.scss

@@ -54,29 +54,6 @@ body {
     font-family: 'Source Code Pro', monospace;
 }
 
-.editor {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    &-advanced {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-
-        @include body-monospace;
-    }
-
-    &-simple {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-
-        border: none;
-        @include body-monospace;
-    }
-}
-
 .output {
     $current-tab: #f9ffff;
     $background-tab: desaturate($current-tab, 100%);

ui/frontend/shared.module.css

@@ -1,3 +1,18 @@
+.-bodyMonospace {
+  /* http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
+   * ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
+   */
+  font-family: 'Source Code Pro', monospace;
+  font-size: 0.9em;
+}
+
+.-autoSize {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
 .-buttonReset {
   padding: 0;
   border: none;