Initial pass at getting code styling close to existing

source/assets/js/playground/editor-setup.ts

@@ -6,6 +6,8 @@ import {
   completionKeymap,
 } from '@codemirror/autocomplete';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { css as langCss } from '@codemirror/lang-css';
+import { sass as langSass } from '@codemirror/lang-sass';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -29,42 +31,54 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 
+import { playgroundHighlightStyle, playgroundTheme } from './theme.js';
+
 const editorSetup = (() => [
-  lineNumbers(),
-  highlightActiveLineGutter(),
-  highlightSpecialChars(),
-  history(),
-  // foldGutter(),
-  // drawSelection(),
-  dropCursor(),
-  // EditorState.allowMultipleSelections.of(true),
-  indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-  bracketMatching(),
-  closeBrackets(),
-  autocompletion(),
-  // rectangularSelection(),
-  // crosshairCursor(),
-  highlightActiveLine(),
-  highlightSelectionMatches(),
-  keymap.of([
-    ...closeBracketsKeymap,
-    ...defaultKeymap,
-    ...searchKeymap,
-    ...historyKeymap,
-    ...foldKeymap,
-    ...completionKeymap,
-    ...lintKeymap,
-  ]),
+  [
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    // foldGutter(),
+    // drawSelection(),
+    dropCursor(),
+    // EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(playgroundHighlightStyle),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    // rectangularSelection(),
+    // crosshairCursor(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...searchKeymap,
+      ...historyKeymap,
+      ...foldKeymap,
+      ...completionKeymap,
+      ...lintKeymap,
+    ]),
+  ],
+  langSass(),
+  playgroundTheme,
 ])();
 
 const outputSetup = (() => [
-  lineNumbers(),
-  highlightSpecialChars(),
-  // foldGutter(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-  highlightActiveLine(),
-  EditorState.readOnly.of(true),
+  [
+    lineNumbers(),
+    highlightSpecialChars(),
+    // foldGutter(),
+    syntaxHighlighting(playgroundHighlightStyle),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    highlightActiveLine(),
+    EditorState.readOnly.of(true),
+  ],
+  langCss(),
+  playgroundTheme,
 ])();
 
 export { editorSetup, outputSetup };

source/assets/js/playground/playground.ts

@@ -1,18 +1,14 @@
-import { sass as langSass } from '@codemirror/lang-sass';
 import { Text } from '@codemirror/state';
 import { EditorView } from 'codemirror';
 
 import { compileString } from '../sass.default.js';
 import { editorSetup, outputSetup } from './editor-setup.js';
-import { playgroundTheme } from './theme.js';
 
 function setupPlayground() {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   const editor = new EditorView({
     extensions: [
-      editorSetup,
-      langSass(),
-      playgroundTheme,
+      ...editorSetup,
       EditorView.updateListener.of((v) => {
         if (v.docChanged) {
           updateCSS();
@@ -24,8 +20,7 @@ function setupPlayground() {
 
   // Setup CSS view
   const viewer = new EditorView({
-    // TODO: Confirm lang sass is good for CSS.
-    extensions: [outputSetup, langSass(), playgroundTheme],
+    extensions: [...outputSetup],
     parent: document.getElementById('css-view') || document.body,
   });
 

source/assets/js/playground/theme.ts

@@ -1,3 +1,5 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
 import { EditorView } from 'codemirror';
 
 // TODO: Consider moving to vendor scss
@@ -5,16 +7,33 @@ const playgroundTheme = EditorView.baseTheme({
   '&': {
     // TODO: Make dynamic
     height: '500px',
-    'font-size': 'var(--sl-font-size--small)',
+    'font-size': 'var(--sl-font-size--x-small)',
     'background-color': 'var(--sl-color--code-background)',
+    color: 'var(--sl-color--code-text)',
   },
   '.cm-gutters': {
     'background-color': 'var(--sl-color--code-background)',
     'border-right': 'none',
   },
+  '.cm-content': {
+    // Pull from _typography?
+    'font-family':
+      "'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono', 'Droid Sans Mono', monospace, monospace;",
+  },
   '.cm-scroller': {
     overflow: 'auto',
   },
 });
 
-export { playgroundTheme };
+const playgroundHighlightStyle = HighlightStyle.define([
+  {
+    tag: [tags.special(tags.variableName), tags.tagName],
+    color: '#445588',
+    fontWeight: 'bold',
+  },
+  { tag: tags.definitionKeyword, fontWeight: 'bold' },
+  { tag: tags.comment, color: '#006666', fontStyle: 'italic' },
+  { tag: tags.propertyName, color: '#990000' },
+]);
+
+export { playgroundTheme, playgroundHighlightStyle };