New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drop Less in favor of modern CSS #7567
Comments
Please spend 1-3 days during further investigation. Including resolving some open questions ideas including:
|
Virtually nothing. Less files can continue to be compiled, which will produce generated CSS files. All we really need is to add a build task that copies authored CSS files to the output directory like any other static file (like HTML or SVG). The only thing to keep in mind is CSS files will need to refer to generated CSS file paths.
Ironically, Less would be the ideal tool for this. Unfortunately, Less does not currently support CSS nesting, and it's not clear when/if they will. However, the syntax is so similar that converting Less to CSS wouldn't be hard to do by hand. We're not using too many fancy Less features, so most of our existing Less files could be converted with virtually no editing. And the fact that they can both import means conversion doesn't have to be done all at once. |
Some build script updates need to be made for some light CSS processing. This is because compiled files have different paths than source files. Thus, paths in source CSS (via
Fortunately, |
Less is a CSS pre-processor that makes working with styles a lot easier. The most notable features we use include:
&
@import
rulesCSS has evolved over the years, overcoming many of the pains of working with plain CSS:
@import
A Less sample:
An equivalent modern CSS sample:
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:
grid-column: 1 / 3
is interpreted as math in Less and is compiled incorrectly unless it is written asgrid-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.
The text was updated successfully, but these errors were encountered: