Firefox inspector and too many css variables

[Kutuzovska]

This is about Bulma.

Problems during development in firefox. There are too many css variables that cannot be hidden in the inspector.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [1.0.0] My browser is: Firefox

Description

During the selection of any element on the page where bulma is connected, severe lags begin.

Disabling the dark theme helps a bit.

There is no such problem in chrome, there is a limitation of the list of css variables in the console

[ANovokmet]

Yes this is horrible for developers using firefox. Even without the performance issues on firefox I believe this amount of CSS variables is too much. The way I helped this issue is by creating a single theme (no light/dark theme) and removing the color palette variables:

@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/derived-variables" as dv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/functions" as fn;
@use "bulma/sass/themes/setup";

@use "sass:list";

// The main lightness of this theme
$scheme-main-l: 100%;

// The main scheme color, used to make calculations
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);

@mixin my-theme {
  @include cv.register-vars(
    (
      "scheme-h": iv.$scheme-h,
      "scheme-s": iv.$scheme-s,
      "light-l": iv.$light-l,
      "light-invert-l": iv.$dark-l,
      "dark-l": iv.$dark-l,
      "dark-invert-l": iv.$light-l,
      "soft-l": iv.$light-l,
      "bold-l": iv.$dark-l,
      "soft-invert-l": iv.$dark-l,
      "bold-invert-l": iv.$light-l,

      // Deltas
      "hover-background-l-delta": -5%,
      "active-background-l-delta": -10%,

      "hover-border-l-delta": -10%,
      "active-border-l-delta": -20%,

      "hover-color-l-delta": -5%,
      "active-color-l-delta": -10%,

      "hover-shadow-a-delta": -0.05,
      "active-shadow-a-delta": -0.1,

      // Light only
      "scheme-brightness": "light",
      "scheme-main-l": $scheme-main-l,
      "scheme-main-bis-l": 98%,
      "scheme-main-ter-l": 96%,
      "background-l": 96%,
      "border-weak-l": 93%,
      "border-l": 86%,
      "text-weak-l": 48%,
      "text-l": 29%,
      "text-strong-l": 21%,
      "text-title-l": 14%,
      "scheme-invert-ter-l": 14%,
      "scheme-invert-bis-l": 7%,
      "scheme-invert-l": 4%,

      // Typography
      "family-primary": dv.$family-primary,
      "family-secondary": dv.$family-secondary,
      "family-code": dv.$family-code,
      "size-small": dv.$size-small,
      "size-normal": dv.$size-normal,
      "size-medium": dv.$size-medium,
      "size-large": dv.$size-large,
      "weight-light": iv.$weight-light,
      "weight-normal": iv.$weight-normal,
      "weight-medium": iv.$weight-medium,
      "weight-semibold": iv.$weight-semibold,
      "weight-bold": iv.$weight-bold,
      "weight-extrabold": iv.$weight-extrabold,

      // Other
      "block-spacing": iv.$block-spacing,
      "duration": 294ms,
      "easing": ease-out,
      "radius-small": iv.$radius-small,
      "radius": iv.$radius,
      "radius-medium": iv.$radius-medium,
      "radius-large": iv.$radius-large,
      "radius-rounded": 9999px,
      "speed": 86ms,

      "arrow-color": #{cv.getVar("link")},
      "loading-color": #{cv.getVar("border")},
      "burger-h": #{cv.getVar("link-h")},
      "burger-s": #{cv.getVar("link-s")},
      "burger-l": #{cv.getVar("link-l")},
      "burger-border-radius": 0.5em,
      // Using px values to prevent half pixel issues
      "burger-gap": 5px,
      "burger-item-height": 2px,
      "burger-item-width": 20px,
    )
  );

  // Colors
  $no-palette: ("white", "black", "light", "dark");

  @each $name, $color in dv.$colors {
    $base: $color;
    $invert: null;
    $light: null;
    $dark: null;

    @if type-of($color == "list") {
      $base: list.nth($color, 1);

      @if list.length($color) > 3 {
        $invert: list.nth($color, 2);
        $light: list.nth($color, 3);
        $dark: list.nth($color, 4);
      } @else if list.length($color) > 1 {
        $invert: list.nth($color, 2);
      }
    }

    @include cv.generate-basic-palette($name, $base, $invert);
    // I will not be using palettes
    // @if list.index($no-palette, $name) {
    //   @include cv.generate-basic-palette($name, $base, $invert);
    // } @else {
    //   @include cv.generate-color-palette(
    //     $name,
    //     $base,
    //     $scheme-main-l,
    //     $invert,
    //     $light,
    //     $dark
    //   );
    // }

    @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
  }

  // Shades
  @each $name, $shade in dv.$shades {
    @include cv.register-var($name, $shade);
  }

  @include cv.register-hsl("shadow", dv.$shadow-color);

  @each $size in dv.$sizes {
    $i: index(dv.$sizes, $size);
    $name: "size-#{$i}";
    @include cv.register-var($name, $size);
  }
}

:root {
  @include my-theme;
  @include setup.setup-theme;
}

@include cv.bulma-theme($name: "light") {
  @include my-theme;
  @include setup.setup-theme;
}

But this is still not enough for me to switch to the new version, as customization and working with this is way too complex.

Also removing the "bulma" prefix from variables helps for me:

@use "bulma/sass/utilities" as cv with (
  $cssvars-prefix: "",
);