Show debug and warning as diagnostics if span is present

source/assets/js/playground.ts

@@ -10,6 +10,7 @@ import {editorSetup, outputSetup} from './playground/editor-setup.js';
 import {
   base64ToState,
   errorToDiagnostic,
+  logsToDiagnostics,
   ParseResult,
   PlaygroundState,
   stateToBase64,
@@ -172,6 +173,12 @@ function setupPlayground() {
       .join('\n');
   }
 
+  function updateDiagnostics() {
+    const diagnostics = logsToDiagnostics(playgroundState.debugOutput);
+    const transaction = setDiagnostics(editor.state, diagnostics);
+    editor.dispatch(transaction);
+  }
+
   function updateCSS() {
     playgroundState.debugOutput = [];
     const result = parse(playgroundState.inputValue);
@@ -184,12 +191,8 @@ function setupPlayground() {
           insert: text,
         },
       });
-      editor.dispatch(setDiagnostics(editor.state, []));
       playgroundState.compilerHasError = false;
     } else {
-      const diagnostic = errorToDiagnostic(result.error);
-      const transaction = setDiagnostics(editor.state, [diagnostic]);
-      editor.dispatch(transaction);
       playgroundState.compilerHasError = true;
       playgroundState.debugOutput = [
         ...playgroundState.debugOutput,
@@ -197,6 +200,7 @@ function setupPlayground() {
       ];
     }
     updateDebugOutput();
+    updateDiagnostics();
   }
   const debouncedUpdateCSS = debounce(updateCSS, 200);
 

source/assets/js/playground/console-utils.ts

@@ -1,6 +1,6 @@
 import {Exception, SourceSpan} from 'sass';
 
-type ConsoleLogDebug = {
+export type ConsoleLogDebug = {
   options: {
     span: SourceSpan;
   };
@@ -8,7 +8,7 @@ type ConsoleLogDebug = {
   type: 'debug';
 };
 
-type ConsoleLogWarning = {
+export type ConsoleLogWarning = {
   options: {
     deprecation: boolean;
     span?: SourceSpan | undefined;
@@ -18,7 +18,7 @@ type ConsoleLogWarning = {
   type: 'warn';
 };
 
-type ConsoleLogError = {
+export type ConsoleLogError = {
   type: 'error';
   error: Exception | unknown;
 };
@@ -40,7 +40,7 @@ function encodeHTML(message: string): string {
 }
 
 function lineNumberFormatter(number?: number): string {
-  if (typeof number === 'undefined') return '';
+  if (number === undefined) return '';
   number = number + 1;
   return `${number}`;
 }
@@ -55,6 +55,7 @@ export function displayForConsoleLog(item: ConsoleLog): string {
     if (item.error instanceof Exception) {
       data.lineNumber = item.error.span.start.line;
     }
+    console.log(item);
     data.message = item.error?.toString() || '';
   } else if (['debug', 'warn'].includes(item.type)) {
     data.message = item.message;

source/assets/js/playground/utils.ts

@@ -2,7 +2,7 @@
 import {Diagnostic} from '@codemirror/lint';
 import {Exception, OutputStyle, Syntax} from 'sass';
 
-import {ConsoleLog} from './console-utils';
+import {ConsoleLog, ConsoleLogDebug, ConsoleLogWarning} from './console-utils';
 
 export type PlaygroundState = {
   inputFormat: Syntax;
@@ -66,3 +66,37 @@ export function errorToDiagnostic(error: Exception | unknown): Diagnostic {
     };
   }
 }
+
+export function debugToDiagnostic(logItem: ConsoleLogDebug): Diagnostic {
+  return {
+    from: logItem.options.span.start.offset,
+    to: logItem.options.span.end.offset,
+    severity: 'info',
+    message: logItem.message,
+  };
+}
+
+export function warnToDiagnostic(
+  logItem: ConsoleLogWarning
+): Diagnostic | null {
+  if (!logItem.options.span) return null;
+  return {
+    from: logItem.options.span.start.offset,
+    to: logItem.options.span.end.offset,
+    severity: 'warning',
+    message: logItem.message,
+  };
+}
+
+export function logsToDiagnostics(logs: ConsoleLog[]): Diagnostic[] {
+  const diagnostics = logs.flatMap(log => {
+    if (log.type === 'error') return errorToDiagnostic(log.error);
+    else if (log.type === 'warn') return warnToDiagnostic(log);
+    else if (log.type === 'debug') return debugToDiagnostic(log);
+    else return null;
+  });
+  // Remove empties
+  return diagnostics.filter(
+    (diagnostic): diagnostic is Diagnostic => !!diagnostic
+  );
+}