Add compilation options and tab buttons

source/assets/js/playground/playground.ts

@@ -20,12 +20,52 @@ const editor = new EditorView({
   ],
   parent: document.getElementById('editor') || document.body,
 });
+
+// Setup CSS view
 const viewer = new EditorView({
+  // TODO: Confirm lang sass is good for CSS.
   extensions: [outputSetup, langSass(), playgroundTheme],
   parent: document.getElementById('css-view') || document.body,
 });
 
-function updateCSS(val: string) {
+function getSettingsFromDOM(): {
+  'input-format': string;
+  'output-format': string;
+} {
+  const options = document.querySelectorAll('[data-active]');
+  const settings = Array.from(options).reduce((acc, option) => {
+    acc[option.dataset.setting] = option.dataset.active;
+    return acc;
+  }, {});
+  return settings;
+}
+type TabbarItemDataset = {
+  value: string;
+  setting: string;
+};
+function attachListeners() {
+  const options = document.querySelectorAll('[data-value]');
+
+  function clickHandler(event) {
+    const settings = event.currentTarget.dataset as TabbarItemDataset;
+
+    const tabbar = document.querySelector(
+      `[data-active][data-setting="${settings.setting}"]`,
+    );
+    const currentValue = tabbar?.dataset.active;
+    if (currentValue !== settings.value) {
+      tabbar.dataset.active = settings.value;
+
+      updateCSS();
+    }
+  }
+  Array.from(options).forEach((option) => {
+    option.addEventListener('click', clickHandler);
+  });
+}
+
+function updateCSS() {
+  const val = editor.state.doc.toString();
   const css = parse(val);
   const text = Text.of(css.split('\n'));
   viewer.dispatch({
@@ -38,12 +78,18 @@ function updateCSS(val: string) {
 }
 
 function parse(css: string): string {
-  let result;
+  const settings = getSettingsFromDOM();
+  let result = '';
   try {
-    result = compileString(css, { syntax: 'scss' }).css;
+    result = compileString(css, {
+      syntax: settings['input-format'],
+      style: settings['output-format'],
+    }).css;
   } catch (error) {
-    result = error?.toString();
+    result = error?.toString() || '';
   }
 
   return result;
 }
+
+attachListeners();

source/assets/sass/components/_playground.scss

@@ -23,4 +23,24 @@
       color.adjust(brand.$sl-color--patina, $lightness: 32%);
     flex: 50%;
   }
+
+  .code-editor-tabbar {
+    background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);
+
+    button {
+      background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);
+      font-weight: bold;
+      color: var(--text, var(--sl-color--pale-sky));
+      padding: var(--sl-gutter--half);
+      border: 0;
+    }
+
+    $options: 'scss', 'indented', 'expanded', 'compressed';
+
+    @each $option in $options {
+      &[data-active='#{$option}'] [data-value='#{$option}'] {
+        background-color: var(--sl-color--code-background);
+      }
+    }
+  }
 }

source/playground.liquid

@@ -5,8 +5,40 @@ is_playground: true
 no_container: true
 ---
 <div class="playground-wrapper">
-  <div id="editor"></div>
-  <div id="css-view"></div>
+  <div class="code-editor-wrapper">
+    <div
+      class="code-editor-tabbar"
+      data-active="scss"
+      data-setting="input-format">
+      <button
+        type="button"
+        data-value="scss"
+        data-setting="input-format">SCSS</button>
+      <button
+        type="button"
+        data-value="indented"
+        data-setting="input-format">Sass</button>
+    </div>
+    <div id="editor"></div>
+  </div>
+  <div class="code-editor-wrapper">
+    <div
+      class="code-editor-tabbar"
+      data-active="expanded"
+      data-setting="output-format">
+      <strong>CSS</strong>
+      (Compiled)
+      <button
+        type="button"
+        data-value="expanded"
+        data-setting="output-format">Expanded</button>
+      <button
+        type="button"
+        data-value="compressed"
+        data-setting="output-format">Compressed</button>
+    </div>
+    <div id="css-view"></div>
+  </div>
 </div>
 
 <script type="module" src="/assets/dist/js/playground.js"></script>