Switch from Less to Scss (#1335)

Less hasn't received an update in over a year and the parser is missing
some modern syntax like relative colors so this switches us to scss

.storybook/preview.tsx

@@ -3,9 +3,9 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import "../frontend/app/theme.less";
+import "../frontend/app/theme.scss";
-import "../frontend/app/app.less";
+import "../frontend/app/app.scss";
-import "../frontend/app/reset.less";
+import "../frontend/app/reset.scss";
 import "./global.css";
 import { light, dark } from "./theme";
 import { DocsContainer } from "@storybook/addon-docs";

electron.vite.config.ts

@@ -30,6 +30,13 @@ export default defineConfig({
             "process.env.WS_NO_BUFFER_UTIL": "true",
             "process.env.WS_NO_UTF_8_VALIDATE": "true",
         },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler", // or "modern"
+                },
+            },
+        },
     },
     preload: {
         root: ".",
@@ -76,5 +83,12 @@ export default defineConfig({
                 targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
             }),
         ],
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler", // or "modern"
+                },
+            },
+        },
     },
 });

frontend/app/app.scss

@@ -1,8 +1,8 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "./reset.less";
+@use "reset.scss";
-@import "./theme.less";
+@use "theme.scss";
 
 body {
     display: flex;

frontend/app/app.tsx

@@ -27,7 +27,7 @@ import { AppBackground } from "./app-bg";
 import { CenteredDiv } from "./element/quickelems";
 import { NotificationBubbles } from "./notification/notificationbubbles";
 
-import "./app.less";
+import "./app.scss";
 
 const dlog = debug("wave:app");
 const focusLog = debug("wave:focus");

frontend/app/block/block.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .block {
     display: flex;
@@ -118,7 +118,7 @@
                 }
 
                 .block-frame-text {
-                    .ellipsis();
+                    @include mixins.ellipsis();
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
@@ -324,7 +324,7 @@
                     }
 
                     .connstatus-status {
-                        .ellipsis();
+                        @include mixins.ellipsis();
                         display: flex;
                         flex-direction: column;
                         align-items: flex-start;
@@ -333,7 +333,7 @@
                         width: 100%;
 
                         .connstatus-status-text {
-                            .ellipsis();
+                            @include mixins.ellipsis();
                             max-width: 100%;
                             font-size: 11px;
                             font-style: normal;
@@ -344,7 +344,7 @@
                         }
 
                         .connstatus-error {
-                            .ellipsis();
+                            @include mixins.ellipsis();
                             width: 94%;
                             font-size: 11px;
                             font-style: normal;

frontend/app/block/block.tsx

@@ -34,7 +34,7 @@ import { WebView, WebViewModel, makeWebViewModel } from "@/view/webview/webview"
 import clsx from "clsx";
 import { atom, useAtomValue } from "jotai";
 import { Suspense, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import "./block.less";
+import "./block.scss";
 import { BlockFrame } from "./blockframe";
 import { blockViewToIcon, blockViewToName } from "./blockutil";
 

frontend/app/element/avatar.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .avatar {
     position: relative;
@@ -53,5 +53,5 @@
         }
     }
 
-    .avatar-dims-mixin();
+    @include mixins.avatar-dims-mixin();
 }

frontend/app/element/avatar.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 
 import clsx from "clsx";
-import "./avatar.less";
+import "./avatar.scss";
 
 interface AvatarProps {
     name: string;

frontend/app/element/button.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .button {
     // override default button appearance
@@ -158,9 +158,9 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
+    @include mixins.border-radius-mixin();
-    .vertical-padding-mixin();
+    @include mixins.vertical-padding-mixin();
-    .horizontal-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
-    .font-size-mixin();
+    @include mixins.font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.font-weight-mixin();
 }

frontend/app/element/button.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import { forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
 
-import "./button.less";
+import "./button.scss";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;

frontend/app/element/collapsiblemenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .collapsible-menu {
     list-style: none;
@@ -32,7 +32,7 @@
 }
 
 .collapsible-menu-item-text {
-    .ellipsis();
+    @include mixins.ellipsis();
     text-decoration: none;
 }
 

frontend/app/element/collapsiblemenu.tsx

@@ -3,7 +3,7 @@
 
 import clsx from "clsx";
 import React, { memo, useState } from "react";
-import "./collapsiblemenu.less";
+import "./collapsiblemenu.scss";
 
 interface VerticalNavProps {
     items: MenuItem[];

frontend/app/element/copybutton.tsx

@@ -3,7 +3,7 @@
 
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
-import "./copybutton.less";
+import "./copybutton.scss";
 import { IconButton } from "./iconbutton";
 
 type CopyButtonProps = {

frontend/app/element/emojipalette.tsx

@@ -8,7 +8,7 @@ import { Button } from "./button";
 import { Input, InputGroup, InputLeftElement } from "./input";
 import { Popover, PopoverButton, PopoverContent } from "./popover";
 
-import "./emojipalette.less";
+import "./emojipalette.scss";
 
 type EmojiItem = { emoji: string; name: string };
 

frontend/app/element/expandablemenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .expandable-menu {
     display: flex;
@@ -20,7 +20,7 @@
     border-radius: 4px;
 
     .label {
-        .ellipsis();
+        @include mixins.ellipsis();
     }
 }
 

frontend/app/element/expandablemenu.tsx

@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 import { atom, useAtom } from "jotai";
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useRef } from "react";
 
-import "./expandablemenu.less";
+import "./expandablemenu.scss";
 
 // Define the global atom for managing open groups
 const openGroupsAtom = atom<{ [key: string]: boolean }>({});

frontend/app/element/flyoutmenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .menu {
     position: absolute;
@@ -38,7 +38,7 @@
     justify-content: space-between;
 
     .label {
-        .ellipsis();
+        @include mixins.ellipsis();
         text-decoration: none;
     }
 }

frontend/app/element/flyoutmenu.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
-import "./flyoutmenu.less";
+import "./flyoutmenu.scss";
 
 type MenuProps = {
     items: MenuItem[];

frontend/app/element/iconbutton.tsx

@@ -5,7 +5,7 @@ import { useLongClick } from "@/app/hook/useLongClick";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
 import { memo, useRef } from "react";
-import "./iconbutton.less";
+import "./iconbutton.scss";
 
 export const IconButton = memo(({ decl, className }: { decl: IconButtonDecl; className?: string }) => {
     const buttonRef = useRef<HTMLDivElement>(null);

frontend/app/element/input.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .input {
     width: 100%;
@@ -28,11 +28,11 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
+    @include mixins.border-radius-mixin();
-    .vertical-padding-mixin();
+    @include mixins.vertical-padding-mixin();
-    .horizontal-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
-    .font-size-mixin();
+    @include mixins.font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.font-weight-mixin();
 }
 
 /* Styles when an InputGroup is present */
@@ -87,7 +87,7 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
+    @include mixins.border-radius-mixin();
-    .font-size-mixin();
+    @include mixins.font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.font-weight-mixin();
 }

frontend/app/element/input.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
 
-import "./input.less";
+import "./input.scss";
 
 interface InputGroupProps {
     children: React.ReactNode;

frontend/app/element/linkbutton.scss

@@ -1,6 +1,6 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-&.link-button {
+.link-button {
-    text-decoration: none;
+  text-decoration: none;
 }

frontend/app/element/linkbutton.tsx

@@ -4,7 +4,7 @@
 import { clsx } from "clsx";
 import * as React from "react";
 
-import "./linkbutton.less";
+import "./linkbutton.scss";
 
 interface LinkButtonProps {
     href: string;

frontend/app/element/magnify.tsx

@@ -3,7 +3,7 @@
 
 import clsx from "clsx";
 import MagnifySVG from "../asset/magnify.svg";
-import "./magnify.less";
+import "./magnify.scss";
 
 interface MagnifyIconProps {
     enabled: boolean;

frontend/app/element/markdown.tsx

@@ -21,7 +21,7 @@ import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
 import remarkGfm from "remark-gfm";
 import { openLink } from "../store/global";
 import { IconButton } from "./iconbutton";
-import "./markdown.less";
+import "./markdown.scss";
 
 const Link = ({
     setFocusedHeading,

frontend/app/element/menubutton.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { memo, useState } from "react";
 import { Button } from "./button";
 import { FlyoutMenu } from "./flyoutmenu";
-import "./menubutton.less";
+import "./menubutton.scss";
 
 const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
     const [isOpen, setIsOpen] = useState(false);

frontend/app/element/modal.tsx

@@ -4,7 +4,7 @@
 import { Button } from "@/element/button";
 import React from "react";
 
-import "./modal.less";
+import "./modal.scss";
 
 interface ModalProps {
     id?: string;

frontend/app/element/multilineinput.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 
-import "./multilineinput.less";
+import "./multilineinput.scss";
 
 interface MultiLineInputProps {
     value?: string;

frontend/app/element/popover.scss

@@ -5,7 +5,7 @@
     min-width: 100px;
     min-height: 150px;
     position: absolute;
-    z-index: 1000; // TODO: put this in theme.less
+    z-index: 1000; // TODO: put this in theme.scss
     display: flex;
     padding: 2px;
     gap: 1px;

frontend/app/element/popover.tsx

@@ -26,7 +26,7 @@ import {
     useState,
 } from "react";
 
-import "./popover.less";
+import "./popover.scss";
 
 interface PopoverProps {
     children: ReactNode;

frontend/app/element/quickelems.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from "react";
-import "./quickelems.less";
+import "./quickelems.scss";
 
 function CenteredLoadingDiv() {
     return <CenteredDiv>loading...</CenteredDiv>;

frontend/app/element/quicktips.tsx

@@ -3,7 +3,7 @@
 
 import { MagnifyIcon } from "@/app/element/magnify";
 import { PLATFORM } from "@/app/store/global";
-import "./quicktips.less";
+import "./quicktips.scss";
 
 const KeyBinding = ({ keyDecl }: { keyDecl: string }) => {
     const parts = keyDecl.split(":");

frontend/app/element/toggle.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRef } from "react";
-import "./toggle.less";
+import "./toggle.scss";
 
 interface ToggleProps {
     checked: boolean;

frontend/app/element/typingindicator.scss

@@ -1,21 +1,21 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@dot-width: 11px;
+$dot-width: 11px;
-@dot-color: var(--success-color);
+$dot-color: var(--success-color);
-@speed: 1.5s;
+$speed: 1.5s;
 
 .typing {
     position: relative;
-    height: @dot-width;
+    height: $dot-width;
 
     span {
         content: "";
-        animation: blink @speed infinite;
+        animation: blink $speed infinite;
         animation-fill-mode: both;
-        height: @dot-width;
+        height: $dot-width;
-        width: @dot-width;
+        width: $dot-width;
-        background: @dot-color;
+        background: $dot-color;
         position: absolute;
         left: 0;
         top: 0;
@@ -23,12 +23,12 @@
 
         &:nth-child(2) {
             animation-delay: 0.2s;
-            margin-left: @dot-width * 1.5;
+            margin-left: $dot-width * 1.5;
         }
 
         &:nth-child(3) {
             animation-delay: 0.4s;
-            margin-left: @dot-width * 3;
+            margin-left: $dot-width * 3;
         }
     }
 }

frontend/app/element/typingindicator.tsx

@@ -3,7 +3,7 @@
 
 import { clsx } from "clsx";
 
-import "./typingindicator.less";
+import "./typingindicator.scss";
 
 type TypingIndicatorProps = {
     className?: string;

frontend/app/element/windowdrag.tsx

@@ -4,7 +4,7 @@
 import { clsx } from "clsx";
 import React, { forwardRef } from "react";
 
-import "./windowdrag.less";
+import "./windowdrag.scss";
 
 interface WindowDragProps {
     className?: string;

frontend/app/mixins.scss

@@ -1,14 +1,14 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.ellipsis() {
+@mixin ellipsis(){
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.border-radius-mixin() {
+@mixin border-radius-mixin(){
     &.border-radius-2 {
         border-radius: 4px;
     }
@@ -38,7 +38,7 @@
     }
 }
 
-.vertical-padding-mixin() {
+@mixin vertical-padding-mixin(){
     &.vertical-padding-0 {
         padding-top: 0px;
         padding-bottom: 0px;
@@ -85,7 +85,7 @@
     }
 }
 
-.horizontal-padding-mixin() {
+@mixin horizontal-padding-mixin(){
     &.horizontal-padding-0 {
         padding-left: 0px;
         padding-right: 0px;
@@ -132,7 +132,7 @@
     }
 }
 
-.font-size-mixin() {
+@mixin font-size-mixin(){
     &.font-size-10 {
         font-size: 10px;
     }
@@ -186,7 +186,7 @@
     }
 }
 
-.font-weight-mixin() {
+@mixin font-weight-mixin(){
     &.font-weight-100 {
         font-weight: 100;
     }
@@ -210,7 +210,7 @@
     }
 }
 
-.avatar-dims-mixin() {
+@mixin avatar-dims-mixin(){
     &.size-xs {
         width: 20px;
         height: 20px;

frontend/app/modals/about.tsx

@@ -9,7 +9,7 @@ import { Modal } from "./modal";
 import { isDev } from "@/util/isdev";
 import { useState } from "react";
 import { getApi } from "../store/global";
-import "./about.less";
+import "./about.scss";
 
 interface AboutModalProps {}
 

frontend/app/modals/messagemodal.tsx

@@ -5,7 +5,7 @@ import { Modal } from "@/app/modals/modal";
 import { modalsModel } from "@/app/store/modalmodel";
 
 import { ReactNode } from "react";
-import "./messagemodal.less";
+import "./messagemodal.scss";
 
 const MessageModal = ({ children }: { children: ReactNode }) => {
     function closeModal() {

frontend/app/modals/modal.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import ReactDOM from "react-dom";
 
-import "./modal.less";
+import "./modal.scss";
 
 interface ModalProps {
     children?: React.ReactNode;

frontend/app/modals/tos.tsx

@@ -13,7 +13,7 @@ import { QuickTips } from "@/app/element/quicktips";
 import { atoms, getApi } from "@/app/store/global";
 import { modalsModel } from "@/app/store/modalmodel";
 import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import "./tos.less";
+import "./tos.scss";
 
 const pageNumAtom: PrimitiveAtom<number> = atom<number>(1);
 

frontend/app/modals/typeaheadmodal.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .type-ahead-modal-backdrop {
     position: absolute;
@@ -97,7 +97,7 @@
             }
 
             .typeahead-item-name {
-                .ellipsis();
+                @include mixins.ellipsis();
                 display: flex;
                 gap: 8px;
                 font-size: 11px;

frontend/app/modals/typeaheadmodal.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import React, { forwardRef, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 
-import "./typeaheadmodal.less";
+import "./typeaheadmodal.scss";
 
 interface SuggestionsProps {
     suggestions?: SuggestionsType[];

frontend/app/modals/userinputmodal.tsx

@@ -8,7 +8,7 @@ import * as keyutil from "@/util/keyutil";
 import { UserInputService } from "../store/services";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import "./userinputmodal.less";
+import "./userinputmodal.scss";
 
 const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");

frontend/app/notification/notificationbubbles.tsx

@@ -6,7 +6,7 @@ import { FloatingPortal, useFloating, useInteractions } from "@floating-ui/react
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
-import "./notificationbubbles.less";
+import "./notificationbubbles.scss";
 import { NotificationItem } from "./notificationitem";
 import { useNotification } from "./usenotification";
 

frontend/app/notification/notificationitem.scss

@@ -1,7 +1,8 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.notification-title {
+.notification {
+  .notification-title {
     font-size: 13px;
     font-style: normal;
     font-weight: 500;
@@ -9,63 +10,63 @@
     margin-bottom: 3px;
 
     &.green {
-        color: var(--success-color);
+      color: var(--success-color);
     }
 
     &.red {
-        color: var(--error-color);
+      color: var(--error-color);
     }
 
     &.yellow {
-        color: var(--warning-color);
+      color: var(--warning-color);
     }
-}
+  }
 
-.notification-message {
+  .notification-message {
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     opacity: 0.7;
-}
+  }
 
-.notification-actions {
+  .notification-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 10px;
 
     i {
-        margin-left: 3px;
+      margin-left: 3px;
-        font-size: 11px;
+      font-size: 11px;
     }
-}
+  }
 
-.close-btn {
+  .close-btn {
     position: absolute;
     top: 5px;
     right: 5px;
-}
+  }
 
-.lock-btn {
+  .lock-btn {
     position: absolute;
     top: 5px;
     right: 5px;
     padding: 10px 8px;
     font-size: 11px;
     color: rgb(from var(--main-text-color) r g b / 0.5);
-}
+  }
 
-.notification {
+  .notification {
     width: 100%;
     color: var(--main-text-color);
     padding: 12px 10px;
     display: flex;
     flex-direction: column;
     position: relative;
-}
+  }
 
-.notification-bubble {
+  .notification-bubble {
     position: relative;
     display: flex;
     width: 380px;
@@ -76,43 +77,43 @@
     border: 0.5px solid rgba(255, 255, 255, 0.12);
     background: #232323;
     box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.notification-inner {
+  .notification-inner {
     display: flex;
     align-items: flex-start;
     column-gap: 6px;
 
     .notification-icon {
-        margin-right: 5px;
+      margin-right: 5px;
-        margin-top: 1px;
+      margin-top: 1px;
 
-        i {
+      i {
-            font-size: 16px;
+        font-size: 16px;
-        }
+      }
 
-        i.green {
+      i.green {
-            color: var(--success-color);
+        color: var(--success-color);
-        }
+      }
 
-        i.red {
+      i.red {
-            color: var(--error-color);
+        color: var(--error-color);
-        }
+      }
 
-        i.yellow {
+      i.yellow {
-            color: var(--warning-color);
+        color: var(--warning-color);
-        }
+      }
     }
 
     .notification-timestamp {
-        font-size: 12px;
+      font-size: 12px;
-        font-weight: 400;
+      font-weight: 400;
-        line-height: 18px;
+      line-height: 18px;
-        opacity: 0.5;
+      opacity: 0.5;
-        margin-bottom: 7px;
+      margin-bottom: 7px;
     }
-}
+  }
-
+  &.hovered {
-&.hovered {
     background: #292929;
+  }
 }

frontend/app/notification/notificationitem.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/element/button";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
 
-import "./notificationitem.less";
+import "./notificationitem.scss";
 interface NotificationItemProps {
     notification: NotificationType;
     onRemove: (id: string) => void;

frontend/app/notification/notificationpopover.tsx

@@ -13,7 +13,7 @@ import { NotificationItem } from "./notificationitem";
 import { useUpdateNotifier } from "./updatenotifier";
 import { useNotification } from "./usenotification";
 
-import "./notificationpopover.less";
+import "./notificationpopover.scss";
 
 const NotificationPopover = () => {
     useUpdateNotifier();

frontend/app/tab/tab.tsx

@@ -12,7 +12,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "re
 import { atoms, globalStore, refocusNode } from "@/app/store/global";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
-import "./tab.less";
+import "./tab.scss";
 
 interface TabProps {
     id: string;

frontend/app/tab/tabbar.tsx

@@ -12,7 +12,7 @@ import { OverlayScrollbars } from "overlayscrollbars";
 import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
 import { Tab } from "./tab";
-import "./tabbar.less";
+import "./tabbar.scss";
 import { UpdateStatusBanner } from "./updatebanner";
 import { WorkspaceSwitcher } from "./workspaceswitcher";
 

frontend/app/tab/tabcontent.tsx

@@ -11,7 +11,7 @@ import * as WOS from "@/store/wos";
 import { atom, useAtomValue } from "jotai";
 import * as React from "react";
 import { useMemo } from "react";
-import "./tabcontent.less";
+import "./tabcontent.scss";
 
 const tileGapSizeAtom = atom((get) => {
     const settings = get(atoms.settingsAtom);

frontend/app/tab/updatebanner.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/element/button";
 import { atoms, getApi } from "@/store/global";
 import { useAtomValue } from "jotai";
 import { memo, useEffect, useState } from "react";
-import "./updatebanner.less";
+import "./updatebanner.scss";
 
 const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
     const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);

frontend/app/tab/workspaceswitcher.tsx

@@ -22,7 +22,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { memo, useEffect, useRef } from "react";
 import WorkspaceSVG from "../asset/workspace.svg";
 
-import "./workspaceswitcher.less";
+import "./workspaceswitcher.scss";
 
 interface ColorSelectorProps {
     colors: string[];

frontend/app/view/chat/channels.tsx

@@ -4,7 +4,7 @@
 import { CollapsibleMenu } from "@/app/element/collapsiblemenu";
 import { memo } from "react";
 
-import "./channels.less";
+import "./channels.scss";
 
 const Channels = memo(({ channels }: { channels: MenuItem[] }) => {
     return <CollapsibleMenu className="channel-list" items={channels}></CollapsibleMenu>;

frontend/app/view/chat/chat.tsx

@@ -10,7 +10,7 @@ import { ChatBox } from "./chatbox";
 import { channels, messages, users } from "./data";
 import { UserList } from "./userlist";
 
-import "./chat.less";
+import "./chat.scss";
 
 class ChatModel {
     viewType: string;

frontend/app/view/chat/chatmessages.stories.tsx

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 import { ChatMessages } from "./chatmessages";
-import "./chatmessages.less";
+import "./chatmessages.scss";
 
 export interface ChatMessage {
     id: string;

frontend/app/view/chat/chatmessages.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { memo, useEffect, useRef } from "react";
 
-import "./chatmessages.less";
+import "./chatmessages.scss";
 
 export interface ChatMessage {
     id: string;

frontend/app/view/chat/userlist.stories.tsx

@@ -4,7 +4,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { UserList } from "./userlist";
 
-import "./userlist.less";
+import "./userlist.scss";
 
 export interface UserStatus {
     text: string;

frontend/app/view/chat/userlist.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import { memo } from "react";
 import { Avatar } from "../../element/avatar";
-import "./userlist.less";
+import "./userlist.scss";
 
 export interface UserStatus {
     label: string;

frontend/app/view/codeeditor/codeeditor.tsx

@@ -16,7 +16,7 @@ import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 import ymlWorker from "./yamlworker?worker";
 
-import "./codeeditor.less";
+import "./codeeditor.scss";
 
 // there is a global monaco variable (TODO get the correct TS type)
 declare var monaco: Monaco;

frontend/app/view/helpview/helpview.tsx

@@ -7,7 +7,7 @@ import { WebView, WebViewModel } from "@/app/view/webview/webview";
 import { fireAndForget } from "@/util/util";
 import { atom, useAtomValue } from "jotai";
 import { useCallback } from "react";
-import "./helpview.less";
+import "./helpview.scss";
 
 const docsiteWebUrl = "https://docs.waveterm.dev/";
 const baseUrlRegex = /http[s]?:\/\/([^:\/])+(:\d+)?/;

frontend/app/view/plotview/plotview.tsx

@@ -7,7 +7,7 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import * as React from "react";
 
-import "./plotview.less";
+import "./plotview.scss";
 
 function PlotWindow() {
     return <div className="plot-window"></div>;

frontend/app/view/preview/csvview.scss

@@ -1,12 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../../mixins.less";
+@use "../../mixins.scss";
 
 .csv-view {
     opacity: 0; /* Start with an opacity of 0, meaning it's invisible */
 
-    .ellipsis();
+    @include mixins.ellipsis();
 
     overflow-x: auto;
     overflow-y: hidden;
@@ -53,7 +53,7 @@
                         text-align: left;
                         padding-right: 15px;
                         position: relative;
-                        .ellipsis();
+                        @include mixins.ellipsis();
 
                         .sort-icon {
                             position: absolute;
@@ -85,7 +85,7 @@
                 flex-grow: 2;
                 display: block;
                 text-align: left;
-                .ellipsis();
+                @include mixins.ellipsis();
             }
         }
     }

frontend/app/view/preview/csvview.tsx

@@ -14,7 +14,7 @@ import Papa from "papaparse";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
-import "./csvview.less";
+import "./csvview.scss";
 
 const MAX_DATA_SIZE = 10 * 1024 * 1024; // 10MB in bytes
 

frontend/app/view/preview/directorypreview.less

@@ -1,234 +0,0 @@
-// Copyright 2024, Command Line Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-@import "../../mixins.less";
-
-.dir-table-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    --min-row-width: 35rem;
-    .dir-table {
-        height: 100%;
-        width: 100%;
-        --col-size-size: 0.2rem;
-        display: flex;
-        flex-direction: column;
-
-        &:not([data-scroll-height="0"]) .dir-table-head::after {
-            background: rgb(from var(--block-bg-color) r g b / 0.2);
-        }
-
-        .dir-table-head::after {
-            content: "";
-            z-index: -1;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            backdrop-filter: blur(4px);
-        }
-        .dir-table-head {
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            width: 100%;
-            border-bottom: 1px solid var(--border-color);
-
-            .dir-table-head-row {
-                display: flex;
-                min-width: var(--min-row-width);
-                padding: 4px 6px;
-                font-size: 0.75rem;
-
-                .dir-table-head-cell {
-                    flex: 0 0 auto;
-                    user-select: none;
-                }
-                .dir-table-head-cell:not(:first-child) {
-                    position: relative;
-                    display: flex;
-                    white-space: nowrap;
-                    overflow: hidden;
-
-                    .dir-table-head-cell-content {
-                        padding: 2px 4px;
-                        display: flex;
-                        gap: 0.3rem;
-                        flex: 1 1 auto;
-                        overflow-x: hidden;
-                        letter-spacing: -0.12px;
-
-                        .dir-table-head-direction {
-                            margin-right: 0.2rem;
-                            margin-top: 0.2rem;
-                        }
-
-                        .dir-table-head-size {
-                            align-self: flex-end;
-                        }
-                    }
-
-                    .dir-table-head-resize-box {
-                        width: 12px;
-                        display: flex;
-                        justify-content: center;
-                        flex: 0 0 auto;
-                        .dir-table-head-resize {
-                            cursor: col-resize;
-                            user-select: none;
-                            -webkit-user-select: none;
-                            touch-action: none;
-                            width: 4px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .dir-table-body {
-            display: flex;
-            flex-direction: column;
-            .dir-table-body-search-display {
-                display: flex;
-                border-radius: 3px;
-                padding: 0.25rem 0.5rem;
-                background-color: var(--warning-color);
-
-                .search-display-close-button {
-                    margin-left: auto;
-                }
-            }
-
-            .dir-table-body-scroll-box {
-                position: relative;
-                .dummy {
-                    position: absolute;
-                    visibility: hidden;
-                }
-                .dir-table-body-row {
-                    display: flex;
-                    align-items: center;
-                    border-radius: 5px;
-                    padding: 0 6px;
-                    min-width: var(--min-row-width);
-
-                    &.focused {
-                        background-color: rgb(from var(--accent-color) r g b / 0.5);
-                        color: var(--main-text-color);
-
-                        .dir-table-body-cell {
-                            .dir-table-lastmod,
-                            .dir-table-modestr,
-                            .dir-table-size,
-                            .dir-table-type {
-                                color: var(--main-text-color);
-                            }
-                        }
-                    }
-
-                    &:focus {
-                        background-color: rgb(from var(--accent-color) r g b / 0.5);
-                        color: var(--main-text-color);
-
-                        .dir-table-body-cell {
-                            .dir-table-lastmod,
-                            .dir-table-modestr,
-                            .dir-table-size,
-                            .dir-table-type {
-                                color: var(--main-text-color);
-                            }
-                        }
-                    }
-
-                    &:hover:not(:focus):not(.focused) {
-                        background-color: var(--highlight-bg-color);
-                    }
-
-                    .dir-table-body-cell {
-                        overflow: hidden;
-                        white-space: nowrap;
-                        padding: 0.25rem;
-                        cursor: default;
-                        font-size: 0.8125rem;
-                        flex: 0 0 auto;
-
-                        &.col-size {
-                            text-align: right;
-                        }
-
-                        .dir-table-lastmod,
-                        .dir-table-modestr,
-                        .dir-table-size,
-                        .dir-table-type {
-                            color: var(--secondary-text-color);
-                            margin-right: 12px;
-                        }
-
-                        .dir-table-type {
-                            .ellipsis();
-                        }
-
-                        .dir-table-modestr {
-                            font-family: Hack;
-                        }
-
-                        &:has(.dir-table-name) {
-                            .ellipsis();
-                        }
-                        .dir-table-name {
-                            font-weight: 500;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .dir-table-search-line {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.7rem;
-
-        .dir-table-search-box {
-            width: 0;
-            height: 0;
-            opacity: 0;
-            padding: 0;
-            border: none;
-            pointer-events: none;
-        }
-    }
-}
-
-.dir-table-button {
-    background-color: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 0.2rem;
-    border-radius: 6px;
-
-    input {
-        width: 0;
-        height: 0;
-        opacity: 0;
-        padding: 0;
-        border: none;
-        pointer-events: none;
-    }
-
-    &:hover {
-        background-color: var(--highlight-bg-color);
-    }
-
-    &:focus {
-        background-color: var(--highlight-bg-color);
-    }
-
-    &:focus-within {
-        background-color: var(--highlight-bg-color);
-    }
-}