Drop Less in favor of modern CSS

Less is a CSS pre-processor that makes working with styles a lot easier. The most notable features we use include:

• Variables
• Parent selectors &
• @import rules

CSS has evolved over the years, overcoming many of the pains of working with plain CSS:

• CSS variables/custom properties (already in use for theme colors)
• Nested rules
• @import

A Less sample:

@import (less) "./SharedStyles.css"

@themeColor = #123456;

.grid {
    background: @themeColor;
    display: grid;
    grid-template-columns: auto 1fr;

    .name {
        grid-column: ~"1 / 2";
    }

    .data {
        grid-column: ~"2 / 3";
    }
}

An equivalent modern CSS sample:

@import url("./SharedStyles.css");

:root {
    --themeColor = #123456;
}

.grid {
    background: var(--themeColor);
    display: grid;
    grid-template-columns: auto 1fr;

    .name {
        grid-column: 1 / 2;
    }

    .data {
        grid-column: 2 / 3;
    }
}

Full support for these features is available as of Electron 28 (Chromium 120). I've been able to confirm that these features work in my own experiments using Electron 28.

Less comes with a few downsides:

• Compiling Less files can be time consuming for the build. For example, Standalone takes 7-8 seconds to compile, which adds up quickly over many iterations.
• Debugging generated CSS styles and tracing them back to the original Less declarations can also be cumbersome.
• Compiling more modern CSS syntaxes can lead to subtle issues that require workarounds. For example, grid-column: 1 / 3 is interpreted as math in Less and is compiled incorrectly unless it is written as grid-column: ~"1 / 3".

Switching to modern CSS can save on build time, debugging time, and maintenance costs. The switch can be done gradually over time. Modern CSS can import other CSS files, so styles generated from Less can continue to be used during a migration period. Native CSS can also be declared in HTML, potentially reducing the number of files needed.