scratch-blocks 2.0.0-spork.2 → 2.0.0-spork.4

package/src/blocks/{vertical_extensions.js → vertical_extensions.ts}

@@ -26,24 +26,22 @@
  * @author fenichel@google.com (Rachel Fenichel)
  */
 import * as Blockly from "blockly/core";
-import { ScratchProcedures } from "../procedures.js";
-import * as Constants from "../constants.js";
-import { FlyoutCheckboxIcon } from "../flyout_checkbox_icon.js";
+import { ScratchProcedures } from "../procedures";
+import * as Constants from "../constants";
+import { FlyoutCheckboxIcon } from "../flyout_checkbox_icon";
 
-const VerticalExtensions = {};
 /**
  * Helper function that generates an extension based on a category name.
  * The generated function will set the block's style based on the category name.
- * @param {String} category The name of the category to set colours for.
- * @return {function} An extension function that sets colours based on the given
- *     category.
+ *
+ * @param category The name of the category to set colours for.
+ * @return An extension function that sets colours based on the given category.
  */
-VerticalExtensions.colourHelper = function (category) {
+const colourHelper = function (category: string): () => void {
   /**
    * Set the block style on this block for the given category.
-   * @this {Blockly.Block}
    */
-  return function () {
+  return function (this: Blockly.Block) {
     this.setStyle(category);
   };
 };
@@ -51,18 +49,16 @@ VerticalExtensions.colourHelper = function (category) {
 /**
  * Extension to set the colours of a text field, which are all the same.
  */
-VerticalExtensions.COLOUR_TEXTFIELD = function () {
-  VerticalExtensions.colourHelper("textField").apply(this);
+const COLOUR_TEXTFIELD = function (this: Blockly.Block) {
+  colourHelper("textField").apply(this);
 };
 
 /**
  * Extension to make a block fit into a stack of statements, regardless of its
  * inputs.  That means the block should have a previous connection and a next
  * connection and have inline inputs.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.SHAPE_STATEMENT = function () {
+const SHAPE_STATEMENT = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setPreviousStatement(true, null);
   this.setNextStatement(true, null);
@@ -72,10 +68,8 @@ VerticalExtensions.SHAPE_STATEMENT = function () {
  * Extension to make a block be shaped as a hat block, regardless of its
  * inputs.  That means the block should have a next connection and have inline
  * inputs, but have no previous connection.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.SHAPE_HAT = function () {
+const SHAPE_HAT = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setNextStatement(true, null);
   this.hat = "cap";
@@ -84,10 +78,8 @@ VerticalExtensions.SHAPE_HAT = function () {
 /**
  * Extension to make a block be shaped as a bowler hat block, with rounded
  * corners on both sides and no indentation for statement blocks.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.SHAPE_BOWLER_HAT = function () {
+const SHAPE_BOWLER_HAT = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setNextStatement(true, null);
   this.hat = "bowler";
@@ -97,10 +89,8 @@ VerticalExtensions.SHAPE_BOWLER_HAT = function () {
  * Extension to make a block be shaped as an end block, regardless of its
  * inputs.  That means the block should have a previous connection and have
  * inline inputs, but have no next connection.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.SHAPE_END = function () {
+const SHAPE_END = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setPreviousStatement(true, null);
 };
@@ -109,10 +99,8 @@ VerticalExtensions.SHAPE_END = function () {
  * Extension to make represent a number reporter in Scratch-Blocks.
  * That means the block has inline inputs, a round output shape, and a 'Number'
  * output type.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.OUTPUT_NUMBER = function () {
+const OUTPUT_NUMBER = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setOutputShape(Constants.OUTPUT_SHAPE_ROUND);
   this.setOutput(true, "Number");
@@ -122,10 +110,8 @@ VerticalExtensions.OUTPUT_NUMBER = function () {
  * Extension to make represent a string reporter in Scratch-Blocks.
  * That means the block has inline inputs, a round output shape, and a 'String'
  * output type.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.OUTPUT_STRING = function () {
+const OUTPUT_STRING = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setOutputShape(Constants.OUTPUT_SHAPE_ROUND);
   this.setOutput(true, "String");
@@ -135,10 +121,8 @@ VerticalExtensions.OUTPUT_STRING = function () {
  * Extension to make represent a boolean reporter in Scratch-Blocks.
  * That means the block has inline inputs, a round output shape, and a 'Boolean'
  * output type.
- * @this {Blockly.Block}
- * @readonly
  */
-VerticalExtensions.OUTPUT_BOOLEAN = function () {
+const OUTPUT_BOOLEAN = function (this: Blockly.Block) {
   this.setInputsInline(true);
   this.setOutputShape(Constants.OUTPUT_SHAPE_HEXAGONAL);
   this.setOutput(true, "Boolean");
@@ -149,34 +133,35 @@ VerticalExtensions.OUTPUT_BOOLEAN = function () {
  * value in a dropdown. These blocks also have an accompanying checkbox in the
  * flyout to toggle display of their current value in a chip on the stage.
  */
-VerticalExtensions.MONITOR_BLOCK = function () {
+const MONITOR_BLOCK = function (this: Blockly.BlockSvg) {
   this.addIcon(new FlyoutCheckboxIcon(this));
-  this.checkboxInFlyout = true;
+  (this as any).checkboxInFlyout = true;
 };
 
 /**
  * Mixin to add a context menu for a procedure definition block.
  * It adds the "edit" option and removes the "duplicate" option.
- * @mixin
- * @augments Blockly.Block
- * @package
- * @readonly
  */
-VerticalExtensions.PROCEDURE_DEF_CONTEXTMENU = function () {
+const PROCEDURE_DEF_CONTEXTMENU = function (this: Blockly.Block) {
   /**
    * Add the "edit" option and removes the "duplicate" option from the context
    * menu.
-   * @param {!Array.<!Object>} menuOptions List of menu options to edit.
-   * @this Blockly.Block
+   *
+   * @param menuOptions List of menu options to edit.
    */
   this.mixin(
     {
-      customContextMenu: function (menuOptions) {
+      customContextMenu: function (
+        menuOptions: Array<
+          | Blockly.ContextMenuRegistry.ContextMenuOption
+          | Blockly.ContextMenuRegistry.LegacyContextMenuOption
+        >
+      ) {
         // Add the edit option at the end.
         menuOptions.push(ScratchProcedures.makeEditOption(this));
 
         // Find and remove the duplicate option
-        for (var i = 0, option; (option = menuOptions[i]); i++) {
+        for (let i = 0, option; (option = menuOptions[i]); i++) {
           if (option.text == Blockly.Msg.DUPLICATE) {
             menuOptions.splice(i, 1);
             break;
@@ -184,11 +169,11 @@ VerticalExtensions.PROCEDURE_DEF_CONTEXTMENU = function () {
         }
       },
       checkAndDelete: function () {
-        var input = this.getInput("custom_block");
+        const input = this.getInput("custom_block");
         // this is the root block, not the shadow block.
         if (input && input.connection && input.connection.targetBlock()) {
-          var procCode = input.connection.targetBlock().getProcCode();
-          var didDelete = ScratchProcedures.deleteProcedureDefCallback(
+          const procCode = input.connection.targetBlock().getProcCode();
+          const didDelete = ScratchProcedures.deleteProcedureDefCallback(
             procCode,
             this
           );
@@ -208,29 +193,35 @@ VerticalExtensions.PROCEDURE_DEF_CONTEXTMENU = function () {
  * @mixin
  * @augments Blockly.Block
  * @package
- * @readonly
  */
-VerticalExtensions.PROCEDURE_CALL_CONTEXTMENU = {
+const PROCEDURE_CALL_CONTEXTMENU = {
   /**
    * Add the "edit" option to the context menu.
+   *
    * @todo Add "go to definition" option once implemented.
-   * @param {!Array.<!Object>} menuOptions List of menu options to edit.
-   * @this Blockly.Block
+   * @param menuOptions List of menu options to edit.
    */
-  customContextMenu: function (menuOptions) {
+  customContextMenu: function (
+    this: Blockly.BlockSvg,
+    menuOptions: Array<
+      | Blockly.ContextMenuRegistry.ContextMenuOption
+      | Blockly.ContextMenuRegistry.LegacyContextMenuOption
+    >
+  ) {
     menuOptions.push(ScratchProcedures.makeEditOption(this));
   },
 };
 
-VerticalExtensions.SCRATCH_EXTENSION = function () {
-  this.isScratchExtension = true;
+const SCRATCH_EXTENSION = function (this: Blockly.Block) {
+  (this as any).isScratchExtension = true;
 };
+
 /**
  * Register all extensions for scratch-blocks.
  * @package
  */
-VerticalExtensions.registerAll = function () {
-  var categoryNames = [
+function registerAll() {
+  const categoryNames = [
     "control",
     "data",
     "data_lists",
@@ -244,66 +235,38 @@ VerticalExtensions.registerAll = function () {
     "more",
   ];
   // Register functions for all category colours.
-  for (var i = 0; i < categoryNames.length; i++) {
-    var name = categoryNames[i];
-    Blockly.Extensions.register(
-      "colours_" + name,
-      VerticalExtensions.colourHelper(name)
-    );
+  for (const name of categoryNames) {
+    Blockly.Extensions.register("colours_" + name, colourHelper(name));
   }
 
   // Text fields transcend categories.
-  Blockly.Extensions.register(
-    "colours_textfield",
-    VerticalExtensions.COLOUR_TEXTFIELD
-  );
+  Blockly.Extensions.register("colours_textfield", COLOUR_TEXTFIELD);
 
   // Register extensions for common block shapes.
-  Blockly.Extensions.register(
-    "shape_statement",
-    VerticalExtensions.SHAPE_STATEMENT
-  );
-  Blockly.Extensions.register("shape_hat", VerticalExtensions.SHAPE_HAT);
-  Blockly.Extensions.register(
-    "shape_bowler_hat",
-    VerticalExtensions.SHAPE_BOWLER_HAT
-  );
-  Blockly.Extensions.register("shape_end", VerticalExtensions.SHAPE_END);
+  Blockly.Extensions.register("shape_statement", SHAPE_STATEMENT);
+  Blockly.Extensions.register("shape_hat", SHAPE_HAT);
+  Blockly.Extensions.register("shape_bowler_hat", SHAPE_BOWLER_HAT);
+  Blockly.Extensions.register("shape_end", SHAPE_END);
 
   // Output shapes and types are related.
-  Blockly.Extensions.register(
-    "output_number",
-    VerticalExtensions.OUTPUT_NUMBER
-  );
-  Blockly.Extensions.register(
-    "output_string",
-    VerticalExtensions.OUTPUT_STRING
-  );
-  Blockly.Extensions.register(
-    "output_boolean",
-    VerticalExtensions.OUTPUT_BOOLEAN
-  );
+  Blockly.Extensions.register("output_number", OUTPUT_NUMBER);
+  Blockly.Extensions.register("output_string", OUTPUT_STRING);
+  Blockly.Extensions.register("output_boolean", OUTPUT_BOOLEAN);
 
   // Custom procedures have interesting context menus.
   Blockly.Extensions.register(
     "procedure_def_contextmenu",
-    VerticalExtensions.PROCEDURE_DEF_CONTEXTMENU
+    PROCEDURE_DEF_CONTEXTMENU
   );
   Blockly.Extensions.registerMixin(
     "procedure_call_contextmenu",
-    VerticalExtensions.PROCEDURE_CALL_CONTEXTMENU
+    PROCEDURE_CALL_CONTEXTMENU
   );
 
   // Extension blocks have slightly different block rendering.
-  Blockly.Extensions.register(
-    "scratch_extension",
-    VerticalExtensions.SCRATCH_EXTENSION
-  );
+  Blockly.Extensions.register("scratch_extension", SCRATCH_EXTENSION);
 
-  Blockly.Extensions.register(
-    "monitor_block",
-    VerticalExtensions.MONITOR_BLOCK
-  );
-};
+  Blockly.Extensions.register("monitor_block", MONITOR_BLOCK);
+}
 
-VerticalExtensions.registerAll();
+registerAll();

package/src/checkable_continuous_flyout.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+import { ContinuousFlyout } from "@blockly/continuous-toolbox";
+import { CheckboxBubble } from "./checkbox_bubble";
+import { StatusIndicatorLabel } from "./status_indicator_label";
+import { STATUS_INDICATOR_LABEL_TYPE } from "./status_indicator_label_flyout_inflater";
+
+export class CheckableContinuousFlyout extends ContinuousFlyout {
+  /**
+   * Creates a new CheckableContinuousFlyout.
+   *
+   * @param workspaceOptions Configuration options for the flyout workspace.
+   */
+  constructor(workspaceOptions: Blockly.Options) {
+    workspaceOptions.modalInputs = false;
+    super(workspaceOptions);
+    this.tabWidth_ = 0;
+    this.MARGIN = 12;
+    this.GAP_Y = 12;
+  }
+
+  /**
+   * Serializes a block to JSON in order to copy it to the main workspace.
+   *
+   * @param block The block to serialize.
+   * @returns A JSON representation of the block.
+   */
+  protected serializeBlock(block: Blockly.BlockSvg) {
+    const json = super.serializeBlock(block);
+    // Delete the serialized block's ID so that a new one is generated when it is
+    // placed on the workspace. Otherwise, the block on the workspace may be
+    // indistinguishable from the one in the flyout, which can cause reporter blocks
+    // to have their value dropdown shown in the wrong place.
+    delete json.id;
+    return json;
+  }
+
+  /**
+   * Set the state of a checkbox by block ID.
+   *
+   * @param blockId ID of the block whose checkbox should be set
+   * @param value Value to set the checkbox to.
+   */
+  setCheckboxState(blockId: string, value: boolean) {
+    this.getWorkspace()
+      .getBlockById(blockId)
+      ?.getIcon("checkbox")
+      ?.setChecked(value);
+  }
+
+  getFlyoutScale() {
+    return 0.675;
+  }
+
+  getWidth() {
+    return 250;
+  }
+
+  protected reflowInternal_() {
+    super.reflowInternal_();
+
+    if (this.RTL) {
+      // The parent implementation assumes that the flyout grows to fit its
+      // contents, and adjusts blocks in RTL mode accordingly. In Scratch, the
+      // flyout width is fixed (and blocks may exceed it), so re-adjust blocks
+      // accordingly based on the actual fixed width.
+      for (const item of this.getContents()) {
+        const oldX = item.getElement().getBoundingRectangle().left;
+        let newX =
+          this.getWidth() / this.workspace_.scale -
+          item.getElement().getBoundingRectangle().getWidth() -
+          this.MARGIN;
+        if (
+          "checkboxInFlyout" in item.getElement() &&
+          item.getElement().checkboxInFlyout
+        ) {
+          newX -= CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN;
+        }
+        item.getElement().moveBy(newX - oldX, 0);
+      }
+    }
+  }
+
+  /**
+   * Validates that the given toolbox item represents a label.
+   *
+   * @param item The toolbox item to check.
+   * @returns True if the item represents a label in the flyout.
+   */
+  protected toolboxItemIsLabel(item: Blockly.FlyoutItem) {
+    return (
+      item.getType() === STATUS_INDICATOR_LABEL_TYPE ||
+      super.toolboxItemIsLabel(item)
+    );
+  }
+
+  /**
+   * Updates the state of status indicators for hardware-based extensions.
+   */
+  refreshStatusButtons() {
+    for (const item of this.contents) {
+      if (item.element instanceof StatusIndicatorLabel) {
+        item.element.refreshStatus();
+      }
+    }
+  }
+}

package/src/{checkbox_bubble.js → checkbox_bubble.ts}

@@ -8,30 +8,24 @@ import * as Blockly from "blockly/core";
 
 /**
  * A checkbox shown next to reporter blocks in the flyout.
- * @implements {Blockly.IBubble}
- * @implements {Blockly.IRenderedElement}
  */
-export class CheckboxBubble {
+export class CheckboxBubble
+  implements Blockly.IBubble, Blockly.IRenderedElement
+{
   /**
    * Size of a checkbox next to a variable reporter.
-   * @type {number}
-   * @const
    */
-  static CHECKBOX_SIZE = 25;
+  static readonly CHECKBOX_SIZE = 25;
 
   /**
    * Amount of touchable padding around reporter checkboxes.
-   * @type {number}
-   * @const
    */
-  static CHECKBOX_TOUCH_PADDING = 12;
+  static readonly CHECKBOX_TOUCH_PADDING = 12;
 
   /**
    * SVG path data for checkmark in checkbox.
-   * @type {string}
-   * @const
    */
-  static CHECKMARK_PATH =
+  static readonly CHECKMARK_PATH =
     "M" +
     CheckboxBubble.CHECKBOX_SIZE / 4 +
     " " +
@@ -46,59 +40,48 @@ export class CheckboxBubble {
     CheckboxBubble.CHECKBOX_SIZE / 3;
 
   /**
-   * Size of the checkbox corner radius
-   * @type {number}
-   * @const
+   * Size of the checkbox corner radius.
    */
-  static CHECKBOX_CORNER_RADIUS = 5;
+  static readonly CHECKBOX_CORNER_RADIUS = 5;
 
   /**
-   * @type {number}
-   * @const
+   * The margin around a checkbox.
    */
-  static CHECKBOX_MARGIN = 12;
+  static readonly CHECKBOX_MARGIN = 12;
 
   /**
    * Total additional width of a row that contains a checkbox.
-   * @type {number}
-   * @const
    */
-  static CHECKBOX_SPACE_X =
+  static readonly CHECKBOX_SPACE_X =
     CheckboxBubble.CHECKBOX_SIZE + 2 * CheckboxBubble.CHECKBOX_MARGIN;
 
   /**
    * Root SVG element for this bubble.
-   * @type {!SVGGElement}
    */
-  svgRoot;
+  svgRoot: SVGGElement;
 
   /**
    * Identifier for click handler, to allow unregistering during disposal.
-   * @type {!Blockly.browserEvents.Data}
    */
-  clickListener;
+  clickListener: Blockly.browserEvents.Data;
 
   /**
    * Whether or not this bubble is displayed as checked. Note that the source of
    * truth is the Scratch VM.
-   * @type {boolean}
    */
   checked = false;
 
   /**
    * The location of this bubble in workspace coordinates.
-   * @type {!Blockly.utils.Coordinate}
    */
   location = new Blockly.utils.Coordinate(0, 0);
 
   /**
    * Creates a new flyout checkbox bubble.
    *
-   * @param {!Blockly.BlockSvg} sourceBlock The block this bubble should be
-   *     associated with.
+   * @param sourceBlock The block this bubble should be associated with.
    */
-  constructor(sourceBlock) {
-    this.sourceBlock = sourceBlock;
+  constructor(private sourceBlock: Blockly.BlockSvg) {
     this.svgRoot = Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.G,
       {},
@@ -149,9 +132,9 @@ export class CheckboxBubble {
 
     this.clickListener = Blockly.browserEvents.bind(
       this.svgRoot,
-      "mousedown",
+      "pointerdown",
       null,
-      (event) => {
+      (event: PointerEvent) => {
         this.setChecked(!this.checked);
         event.stopPropagation();
         event.preventDefault();
@@ -163,9 +146,9 @@ export class CheckboxBubble {
   /**
    * Sets whether or not this bubble should be displayed in the checked state.
    *
-   * @param {boolean} checked True if this bubble should be checked.
+   * @param checked True if this bubble should be checked.
    */
-  setChecked(checked) {
+  setChecked(checked: boolean) {
     if (checked === this.checked) return;
 
     this.checked = checked;
@@ -191,28 +174,28 @@ export class CheckboxBubble {
    *
    * This method is patched by scratch-gui to query the VM state.
    *
-   * @param {string} blockId The ID of the block in question.
-   * @returns {boolean} True if the block's checkbox should be checked.
+   * @param blockId The ID of the block in question.
+   * @returns True if the block's checkbox should be checked.
    */
-  isChecked(blockId) {
+  isChecked(blockId: string): boolean {
     return false;
   }
 
   /**
    * Returns whether this bubble is movable by the user.
    *
-   * @returns {boolean} Always returns false.
+   * @returns Always returns false.
    */
-  isMovable() {
+  isMovable(): boolean {
     return false;
   }
 
   /**
    * Returns the root SVG element for this bubble.
    *
-   * @returns {!SVGGElement} The root SVG element.
+   * @returns The root SVG element.
    */
-  getSvgRoot() {
+  getSvgRoot(): SVGGElement {
     return this.svgRoot;
   }
 
@@ -220,25 +203,24 @@ export class CheckboxBubble {
    * Recalculates this bubble's location, keeping it adjacent to its block.
    */
   updateLocation() {
-    const blockLocation = this.sourceBlock.getRelativeToSurfaceXY();
-    const blockBounds = this.sourceBlock.getHeightWidth();
+    const bounds = this.sourceBlock.getBoundingRectangle();
     const x = this.sourceBlock.workspace.RTL
-      ? blockLocation.x + blockBounds.width + CheckboxBubble.CHECKBOX_MARGIN
-      : blockLocation.x -
+      ? bounds.right + CheckboxBubble.CHECKBOX_MARGIN
+      : bounds.left -
         CheckboxBubble.CHECKBOX_MARGIN -
         CheckboxBubble.CHECKBOX_SIZE;
     const y =
-      blockLocation.y + (blockBounds.height - CheckboxBubble.CHECKBOX_SIZE) / 2;
+      bounds.top + (bounds.getHeight() - CheckboxBubble.CHECKBOX_SIZE) / 2;
     this.moveTo(x, y);
   }
 
   /**
    * Moves this bubble to the specified location.
    *
-   * @param {number} x The location on the X axis to move to.
-   * @param {number} y The location on the Y axis to move to.
+   * @param x The location on the X axis to move to.
+   * @param y The location on the Y axis to move to.
    */
-  moveTo(x, y) {
+  moveTo(x: number, y: number) {
     this.location.x = x;
     this.location.y = y;
     this.svgRoot.setAttribute("transform", `translate(${x}, ${y})`);
@@ -247,9 +229,9 @@ export class CheckboxBubble {
   /**
    * Returns this bubble's location in workspace coordinates.
    *
-   * @returns {!Blockly.utils.Coordinate} The bubble's location.
+   * @returns The bubble's location.
    */
-  getRelativeToSurfaceXY() {
+  getRelativeToSurfaceXY(): Blockly.utils.Coordinate {
     return this.location;
   }
 
@@ -266,17 +248,17 @@ export class CheckboxBubble {
   // to its block and is not draggable by the user.
   showContextMenu() {}
 
-  setDragging(dragging) {}
+  setDragging(dragging: boolean) {}
 
-  startDrag(event) {}
+  startDrag(event: PointerEvent) {}
 
-  drag(newLocation, event) {}
+  drag(newLocation: Blockly.utils.Coordinate, event: PointerEvent) {}
 
-  moveDuringDrag(newLocation) {}
+  moveDuringDrag(newLocation: Blockly.utils.Coordinate) {}
 
   endDrag() {}
 
   revertDrag() {}
 
-  setDeleteStyle(enable) {}
+  setDeleteStyle(enable: boolean) {}
 }

package/src/{colours.js → colours.ts}

@@ -55,10 +55,17 @@ const Colours = {
   contextualMenuHover: "rgba(77, 151, 255, .25)",
 };
 
-function varify(coloursObj, prefix = "--colour") {
-  return Object.keys(coloursObj)
-    .map((key) => {
-      const colour = coloursObj[key];
+/**
+ * Converts the given colours to CSS variables.
+ *
+ * @param coloursObj A (potentially nested) object whose keys are colour names
+ *     and values are CSS colours.
+ * @param prefix A prefix to prepend to the CSS variables.
+ * @returns A string containing CSS variable definitions for the colours.
+ */
+function varify(coloursObj: Object, prefix = "--colour"): string {
+  return Object.entries(coloursObj)
+    .map(([key, colour]) => {
       if (typeof colour === "string") {
         return `${prefix}-${key}: ${colour};`;
       } else {