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
Firefox inspector and too many css variables #3811
Comments
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: "",
); |
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
The text was updated successfully, but these errors were encountered: