Add sass version to playground

source/assets/js/playground.ts

@@ -2,7 +2,7 @@ import { setDiagnostics } from '@codemirror/lint';
 import { Text } from '@codemirror/state';
 import { EditorView } from 'codemirror';
 import debounce from 'lodash/debounce';
-import { compileString, Logger, OutputStyle, Syntax } from 'sass';
+import { compileString, info, Logger, OutputStyle, Syntax } from 'sass';
 
 import { displayForConsoleLog } from './playground/console-utils.js';
 import { editorSetup, outputSetup } from './playground/editor-setup.js';
@@ -232,8 +232,17 @@ function setupPlayground() {
     history.replaceState('playground', '', `?#${hash}`);
   }
 
+  function updateSassVersion() {
+    const version = info.split('\t')[1];
+    const versionSpan = document.querySelector(
+      '.sl-c-playground__tabbar-version',
+    ) as HTMLSpanElement;
+    versionSpan.innerText = `v${version}`;
+  }
+
   attachListeners();
   applyInitialState();
+  updateSassVersion();
 }
 
 if (document.readyState === 'loading') {

source/assets/sass/components/_playground.scss

@@ -306,7 +306,8 @@
   }
 
   // align the CSS Compiled title to the right of the panel header area
-  [data-code='compiled'] &:last-child {
+  [data-code='compiled'] &:last-child,
+  [data-code='precompiled'] &:last-child {
     margin-left: auto;
     text-align: right;
   }

source/playground.liquid

@@ -21,6 +21,8 @@ is_playground: true
         data-tabbar="item"
         class="sl-c-button sl-c-button--tab"
         data-setting="inputFormat">Sass</button>
+        <span data-tabbar="item" class="sl-c-playground__tabbar-title tabbar-title sl-c-playground__tabbar-version">
+      </span>
     </div>
     <div class="sl-c-playground__panel-content sl-code-is-precompiled"></div>
   </div>