lint

source/assets/js/playground.ts

@@ -1,11 +1,12 @@
-import { setDiagnostics } from '@codemirror/lint';
-import { Text } from '@codemirror/state';
-import { EditorView } from 'codemirror';
+/* eslint-disable node/no-extraneous-import */
+import {setDiagnostics} from '@codemirror/lint';
+import {Text} from '@codemirror/state';
+import {EditorView} from 'codemirror';
 import debounce from 'lodash/debounce';
-import { compileString, info, 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';
+import {displayForConsoleLog} from './playground/console-utils.js';
+import {editorSetup, outputSetup} from './playground/editor-setup.js';
 import {
   base64ToState,
   errorToDiagnostic,
@@ -50,7 +51,7 @@ function setupPlayground() {
     doc: playgroundState.inputValue,
     extensions: [
       ...editorSetup,
-      EditorView.updateListener.of((v) => {
+      EditorView.updateListener.of(v => {
         if (v.docChanged) {
           playgroundState.inputValue = editor.state.doc.toString();
         }
@@ -94,7 +95,7 @@ function setupPlayground() {
       }
     }
     const options = document.querySelectorAll('[data-value]');
-    Array.from(options).forEach((option) => {
+    Array.from(options).forEach(option => {
       option.addEventListener('click', clickHandler);
     });
 
@@ -120,24 +121,24 @@ function setupPlayground() {
    */
   function updateButtonState() {
     const inputFormatTab = document.querySelector(
-      '[data-setting="inputFormat"]',
+      '[data-setting="inputFormat"]'
     ) as HTMLDivElement;
     const inputButtons = inputFormatTab.querySelectorAll('[data-value]');
-    inputButtons.forEach((button) => {
+    inputButtons.forEach(button => {
       if (!(button instanceof HTMLButtonElement)) return;
       button.dataset.active = String(
-        button.dataset.value === playgroundState.inputFormat,
+        button.dataset.value === playgroundState.inputFormat
       );
     });
 
     const outputFormatTab = document.querySelector(
-      '[data-setting="outputFormat"]',
+      '[data-setting="outputFormat"]'
     ) as HTMLDivElement;
     const outputButtons = outputFormatTab.querySelectorAll('[data-value]');
-    outputButtons.forEach((button) => {
+    outputButtons.forEach(button => {
       if (!(button instanceof HTMLButtonElement)) return;
       button.dataset.active = String(
-        button.dataset.value === playgroundState.outputFormat,
+        button.dataset.value === playgroundState.outputFormat
       );
     });
   }
@@ -149,7 +150,7 @@ function setupPlayground() {
    */
   function updateErrorState() {
     const editorWrapper = document.querySelector(
-      '[data-compiler-has-error]',
+      '[data-compiler-has-error]'
     ) as HTMLDivElement;
     editorWrapper.dataset.compilerHasError =
       playgroundState.compilerHasError.toString();
@@ -164,7 +165,7 @@ function setupPlayground() {
    */
   function updateDebugOutput() {
     const console = document.querySelector(
-      '.sl-c-playground__console',
+      '.sl-c-playground__console'
     ) as HTMLDivElement;
     console.innerHTML = playgroundState.debugOutput
       .map(displayForConsoleLog)
@@ -192,7 +193,7 @@ function setupPlayground() {
       playgroundState.compilerHasError = true;
       playgroundState.debugOutput = [
         ...playgroundState.debugOutput,
-        { type: 'error', error: result.error },
+        {type: 'error', error: result.error},
       ];
     }
     updateDebugOutput();
@@ -203,13 +204,13 @@ function setupPlayground() {
     warn(message, options) {
       playgroundState.debugOutput = [
         ...playgroundState.debugOutput,
-        { message, options, type: 'warn' },
+        {message, options, type: 'warn'},
       ];
     },
     debug(message, options) {
       playgroundState.debugOutput = [
         ...playgroundState.debugOutput,
-        { message, options, type: 'debug' },
+        {message, options, type: 'debug'},
       ];
     },
   };
@@ -221,9 +222,9 @@ function setupPlayground() {
         style: playgroundState.outputFormat,
         logger: logger,
       });
-      return { css: result.css };
+      return {css: result.css};
     } catch (error) {
-      return { error };
+      return {error};
     }
   }
 
@@ -235,7 +236,7 @@ function setupPlayground() {
   function updateSassVersion() {
     const version = info.split('\t')[1];
     const versionSpan = document.querySelector(
-      '.sl-c-playground__tabbar-version',
+      '.sl-c-playground__tabbar-version'
     ) as HTMLSpanElement;
     versionSpan.innerText = `v${version}`;
   }

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

@@ -1,4 +1,4 @@
-import { Exception, SourceSpan } from 'sass';
+import {Exception, SourceSpan} from 'sass';
 
 type ConsoleLogDebug = {
   options: {
@@ -46,7 +46,7 @@ function lineNumberFormatter(number?: number): string {
 }
 
 export function displayForConsoleLog(item: ConsoleLog): string {
-  const data: { type: string; lineNumber?: number; message: string } = {
+  const data: {type: string; lineNumber?: number; message: string} = {
     type: item.type,
     lineNumber: undefined,
     message: '',
@@ -75,6 +75,6 @@ export function displayForConsoleLog(item: ConsoleLog): string {
   return `<div class="console-line"><div class="console-location"><span class="console-type console-type-${
     data.type
   }">@${data.type}</span>:${lineNumberFormatter(
-    data.lineNumber,
+    data.lineNumber
   )}</div><div class="console-message">${encodeHTML(data.message)}</div></div>`;
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable node/no-extraneous-import */
 import {
   autocompletion,
   closeBrackets,
@@ -10,8 +11,8 @@ import {
   historyKeymap,
   indentWithTab,
 } from '@codemirror/commands';
-import { css as langCss } from '@codemirror/lang-css';
-import { sass as langSass } from '@codemirror/lang-sass';
+import {css as langCss} from '@codemirror/lang-css';
+import {sass as langSass} from '@codemirror/lang-sass';
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -20,8 +21,8 @@ import {
   indentOnInput,
   syntaxHighlighting,
 } from '@codemirror/language';
-import { lintKeymap } from '@codemirror/lint';
-import { EditorState } from '@codemirror/state';
+import {lintKeymap} from '@codemirror/lint';
+import {EditorState} from '@codemirror/state';
 import {
   dropCursor,
   highlightActiveLine,
@@ -31,7 +32,7 @@ import {
   lineNumbers,
 } from '@codemirror/view';
 
-import { playgroundHighlightStyle } from './theme.js';
+import {playgroundHighlightStyle} from './theme.js';
 
 const editorSetup = (() => [
   [
@@ -43,7 +44,7 @@ const editorSetup = (() => [
     dropCursor(),
     indentOnInput(),
     syntaxHighlighting(playgroundHighlightStyle),
-    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
     bracketMatching(),
     closeBrackets(),
     autocompletion(),
@@ -67,11 +68,11 @@ const outputSetup = (() => [
     highlightSpecialChars(),
     foldGutter(),
     syntaxHighlighting(playgroundHighlightStyle),
-    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
     highlightActiveLine(),
     EditorState.readOnly.of(true),
   ],
   langCss(),
 ])();
 
-export { editorSetup, outputSetup };
+export {editorSetup, outputSetup};

source/assets/js/playground/theme.ts

@@ -1,5 +1,6 @@
-import { HighlightStyle } from '@codemirror/language';
-import { tags } from '@lezer/highlight';
+/* eslint-disable node/no-extraneous-import */
+import {HighlightStyle} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
 
 const playgroundHighlightStyle = HighlightStyle.define([
   {
@@ -41,14 +42,14 @@ const playgroundHighlightStyle = HighlightStyle.define([
     color: 'var(--sl-color--code-warm)',
     fontWeight: '600',
   },
-  { tag: tags.punctuation, color: 'var(--sl-color--code-muted-dark)' },
-  { tag: tags.string, color: 'var(--sl-color--code-bright)' },
-  { tag: tags.unit, color: 'var(--sl-color--code-base)' },
-  { tag: tags.atom, color: 'var(--sl-color--code-base)' },
+  {tag: tags.punctuation, color: 'var(--sl-color--code-muted-dark)'},
+  {tag: tags.string, color: 'var(--sl-color--code-bright)'},
+  {tag: tags.unit, color: 'var(--sl-color--code-base)'},
+  {tag: tags.atom, color: 'var(--sl-color--code-base)'},
   {
     tag: tags.labelName,
     color: 'var(--sl-color--code-dark)',
     fontWeight: '600',
   },
 ]);
-export { playgroundHighlightStyle };
+export {playgroundHighlightStyle};

source/assets/js/playground/utils.ts

@@ -1,7 +1,8 @@
-import { Diagnostic } from '@codemirror/lint';
-import { Exception, OutputStyle, Syntax } from 'sass';
+/* eslint-disable node/no-extraneous-import */
+import {Diagnostic} from '@codemirror/lint';
+import {Exception, OutputStyle, Syntax} from 'sass';
 
-import { ConsoleLog } from './console-utils';
+import {ConsoleLog} from './console-utils';
 
 export type PlaygroundState = {
   inputFormat: Syntax;
@@ -40,8 +41,8 @@ export function base64ToState(string: string): Partial<PlaygroundState> {
   return state;
 }
 
-type ParseResultSuccess = { css: string };
-type ParseResultError = { error: Exception | unknown };
+type ParseResultSuccess = {css: string};
+type ParseResultError = {error: Exception | unknown};
 export type ParseResult = ParseResultSuccess | ParseResultError;
 
 export function errorToDiagnostic(error: Exception | unknown): Diagnostic {