Bootstrap is included twice in evap.css

[niklasmohrin]

When I open evap.css (on the development branch, or on production), I see the following (with long lines truncated):

/*!
 * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */.fa{font-family:var(--fa-style-family, "Font Awesome 6 Free");font-weight:var(--fa-style, 900)}.fa-solid,.fa-regular,.fa-brands,.fas,.far,.fab,.fa-
 * Bootstrap  v5.3.0-alpha1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;
 * Bootstrap  v5.3.0-alpha1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue: #0d6efd;--bs-indigo: #6610f2;--bs-purple: #6f42c1;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #fd7e14;

It seems like we include two copies of bootstrap. Some initial observations:

• The two lines start out the same and still look the same at column 78390 (where the font-awesome line ends).
• At column 226300 (where the first bootstrap line ends), the two lines are already different.
• The first occurrence of "evap" in the file is in the last line at column 228691.

[niklasmohrin]

By adding @warn("foo"); to evap/static/bootstrap/scss/_root.scss, I get

Warning: foo
    evap/static/bootstrap/scss/_root.scss 12:3  @import
    evap/static/scss/_bootstrap.scss 12:9       @import
    evap/static/scss/evap.scss 5:9              root stylesheet

Warning: foo
    evap/static/bootstrap/scss/_root.scss 12:3     @import
    evap/static/scss/_bootstrap.scss 12:9          @import
    evap/static/scss/components/_buttons.scss 1:9  @import
    evap/static/scss/_components.scss 5:9          @import
    evap/static/scss/evap.scss 6:9                 root stylesheet

The duplicate import was added in #1771, so I suppose we can just remove it again. Will test later

[niklasmohrin]

From https://sass-lang.com/documentation/at-rules/import/ :

As of Dart Sass 1.80.0, the @import rule is deprecated and will be removed from the language in Dart Sass 3.0.0. Prefer the @use rule instead.

The use system is more like a module system like the one in Python, for example

@use only ever loads each file once. This ensures you don’t end up accidentally duplicating your dependencies’ CSS many times over.

So it would be a worthwhile change, probably. @janno42 and I briefly discussed whether or not we actually still need SCSS at all. Many of the originally motivating features like imports, variables, nesting have made their way onto CSS by now, and bootstrap seems to use more CSS variables nowadays. We concluded that it's still nice to have SCSS for the loops etc. Also note that the SCSS tutorial for bootstrap still shows @import instead of @use. It seems that they will switch at bootstrap 6, but who knows (https://stackoverflow.com/a/78786407/13679671).