review

package.json

@@ -54,7 +54,7 @@
     "@sindresorhus/slugify": "^1.1.2",
     "@types/jquery": "^3.5.16",
     "@types/jqueryui": "^1.12.17",
-    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash": "^4.14.195",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-attrs": "^4.1.0",
     "@types/markdown-it-footnote": "^3.0.0",
@@ -76,7 +76,7 @@
     "jquery-ui": "^1.13.2",
     "js-yaml": "^4.1.0",
     "kleur": "^4.1.5",
-    "lodash.debounce": "^4.0.8",
+    "lodash": "^4.17.21",
     "lorem-ipsum": "^2.0.8",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.7",

source/_layouts/base.liquid

@@ -60,7 +60,7 @@
 
     {% typogr -%}
       {%- if is_playground -%}
-        {% render 'playground/playground_header', title: title %}
+        {% render 'playground/header', title: title %}
       {%- else -%}
         {% render 'header', alerts: alerts %}
       {%- endif -%}
@@ -109,7 +109,8 @@
     </main>
 
     {% typogr %}{% render 'footer' %}{% endtypogr %}
-    {%- unless is_playground -%}
+
+    {% unless is_playground %}
       <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
       <script>
         docsearch({
@@ -128,7 +129,8 @@
           }
         });
       </script>
-    {%- endunless -%}
+    {% endunless %}
+
     <script>
       !function(d, s, id) {
         var js,

source/assets/js/playground.ts

@@ -1,7 +1,7 @@
 import { setDiagnostics } from '@codemirror/lint';
 import { Text } from '@codemirror/state';
 import { EditorView } from 'codemirror';
-import debounce from 'lodash.debounce';
+import debounce from 'lodash/debounce';
 import { compileString, Logger, OutputStyle, Syntax } from 'sass';
 
 import { displayForConsoleLog } from './playground/console-utils.js';
@@ -221,6 +221,7 @@ function setupPlayground() {
   attachListeners();
   applyInitialState();
 }
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', setupPlayground);
 } else {

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

@@ -1,4 +1,5 @@
 import { Exception, SourceSpan } from 'sass';
+
 type ConsoleLogDebug = {
   options: {
     span: SourceSpan;
@@ -16,16 +17,20 @@ type ConsoleLogWarning = {
   message: string;
   type: 'warn';
 };
+
 type ConsoleLogError = {
   type: 'error';
   error: Exception | unknown;
 };
+
 export type ConsoleLog = ConsoleLogDebug | ConsoleLogWarning | ConsoleLogError;
 
 /**
- * message is untrusted
- * Write with innerText and then retrieve using innerHTML to encode message for safe display
- * @param  {string} message  The user-submitted string
+ * `message` is untrusted.
+ *
+ * Write with `innerText` and then retrieve using `innerHTML` to encode message
+ * for safe display.
+ * @param  {string} message The user-submitted string
  * @return {string} The sanitized string
  */
 function encodeHTML(message: string): string {
@@ -37,7 +42,7 @@ function encodeHTML(message: string): string {
 function lineNumberFormatter(number?: number): string {
   if (typeof number === 'undefined') return '';
   number = number + 1;
-  return `${number} `;
+  return `${number}`;
 }
 
 export function displayForConsoleLog(item: ConsoleLog): string {
@@ -58,8 +63,9 @@ export function displayForConsoleLog(item: ConsoleLog): string {
       const stack = 'stack' in item.options ? item.options.stack : '';
       const needleFromStackRegex = /^- (\d+):/;
       const match = stack?.match(needleFromStackRegex);
-      if (match && match[1]) {
-        // Stack trace starts at 1, all others come from span, which starts at 0, so adjust before formatting.
+      if (match?.[1]) {
+        // Stack trace starts at 1, all others come from span, which starts at
+        // 0, so adjust before formatting.
         lineNumber = parseInt(match[1]) - 1;
       }
     }
@@ -70,7 +76,5 @@ export function displayForConsoleLog(item: ConsoleLog): string {
     data.type
   }">@${data.type}</span>:${lineNumberFormatter(
     data.lineNumber,
-  )} </div><div class="console-message">${encodeHTML(
-    data.message,
-  )}</div></div>`;
+  )}</div><div class="console-message">${encodeHTML(data.message)}</div></div>`;
 }

source/assets/js/playground/utils.ts

@@ -2,6 +2,7 @@ import { Diagnostic } from '@codemirror/lint';
 import { Exception, OutputStyle, Syntax } from 'sass';
 
 import { ConsoleLog } from './console-utils';
+
 export type PlaygroundState = {
   inputFormat: Syntax;
   outputFormat: OutputStyle;

source/playground.liquid

@@ -1,9 +1,9 @@
 ---
 layout: base
-title: 'Playground'
+title: Playground
 is_playground: true
 ---
-<div id="docsearch"></div>
+
 <div class="playground-wrapper" data-compiler-has-error="false">
   <div class="code-editor-wrapper">
     <div
@@ -46,4 +46,4 @@ is_playground: true
   </div>
 </div>
 
-<script type="module" src="/assets/dist/js/playground.js"></script>
+<script type="module" src="/assets/dist/js/playground.js" async></script>

yarn.lock

@@ -2126,16 +2126,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash.debounce@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "@types/lodash.debounce@npm:4.0.7"
-  dependencies:
-    "@types/lodash": "*"
-  checksum: e873b2d77f89010876baba3437ef826b17221b98948e00b5590828334a481dea1c8f9d28543210e564adc53199584f42c3cb171f8b6c3614fefc0b4e0888679c
-  languageName: node
-  linkType: hard
-
-"@types/lodash@npm:*":
+"@types/lodash@npm:^4.14.195":
   version: 4.14.195
   resolution: "@types/lodash@npm:4.14.195"
   checksum: 39b75ca635b3fa943d17d3d3aabc750babe4c8212485a4df166fe0516e39288e14b0c60afc6e21913cc0e5a84734633c71e617e2bd14eaa1cf51b8d7799c432e
@@ -5674,6 +5665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
+  languageName: node
+  linkType: hard
+
 "lorem-ipsum@npm:^2.0.8":
   version: 2.0.8
   resolution: "lorem-ipsum@npm:2.0.8"
@@ -7317,7 +7315,7 @@ __metadata:
     "@sindresorhus/slugify": ^1.1.2
     "@types/jquery": ^3.5.16
     "@types/jqueryui": ^1.12.17
-    "@types/lodash.debounce": ^4.0.7
+    "@types/lodash": ^4.14.195
     "@types/markdown-it": ^12.2.3
     "@types/markdown-it-attrs": ^4.1.0
     "@types/markdown-it-footnote": ^3.0.0
@@ -7339,7 +7337,7 @@ __metadata:
     jquery-ui: ^1.13.2
     js-yaml: ^4.1.0
     kleur: ^4.1.5
-    lodash.debounce: ^4.0.8
+    lodash: ^4.17.21
     lorem-ipsum: ^2.0.8
     markdown-it: ^13.0.1
     markdown-it-anchor: ^8.6.7