css - Dynamic CSS counter crashes when using t, am I using '@property' or 'counter' wrong?

Question

I'm creating a dashboard that displays my CPU and GPU load. It's a number that is refreshed every 5 seconds, and hence the jumps are very, sudden; like 0% -> 50%.

I've googled around trying to animate this jump, so it actually counts up 0 -> 1 -> .. -> 50 etc. The code below works flawlessly actually. The {{ itemValue('gpu_load') }} changes every 5 seconds.

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('gpu_load') }};
}
    
.test::after {
  content: counter(num);
}
  
</style>  
<div class="test"></div>

HOWEVER; this is just one counter. I would like to make two. I thought I could just duplicate the above and just add '2' to everything, like so:

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}
    
.test::after {
  content: counter(num);
}

@property --num2 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test2 {
  transition: --num2 4s;
  counter-reset: num2 var(--num2);
  --num2: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 
</style>  
<div class="test"></div>
<div class="test2"></div>

So this also works, but only temporarily. Whenever I'm displaying this code, the browser (seemingly) crashes randomly with an "Error code: STATUS_ACCESS_VIOLATION".

I can't seem to figure out what causes this. I'm probably using something wrong?

Answer 1

You don't need to duplicate the CSS custom property. You can do like below:

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.main {
  transition: --num 4s;
}

.test {
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}

.test::after {
  content: counter(num);
}

.test2 {
  counter-reset: num2 var(--num);
  --num: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 

<div class="test  main"></div>
<div class="test2 main"></div>