Wrong dynamic classes generated on build when using sass math.random

Describe the bug

Using the static adapter, sass math.random function has a strange side effect on dynamic classes when building.

The following code gives a blue title with a random box-shadow when using npm run dev:

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

<style lang="scss">
  @use 'sass:math';

  h1 {
    color: blue;
    box-shadow: 0 0 math.random(10)+px rgba(0, 0, 0, 0.1);
  }
</style>

However, after npm run build and npm run preview, no styles are applied.

It seems the math.random call on sass affects the dynamic classes ids.

Class on h1:

Class on generated css:

Reproduction

https://github.com/stefandevai/svelte-classes-issue

Logs

No response

System Info

System:
  OS: macOS 14.4
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 64.11 MB / 8.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn: 1.22.22 - /usr/local/bin/yarn
  npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
Browsers:
  Safari: 17.4
npmPackages:
  @sveltejs/adapter-static: ^3.0.6 => 3.0.8 
  @sveltejs/kit: ^2.0.0 => 2.15.1 
  @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
  svelte: ^5.0.0 => 5.16.0 
  vite: ^5.4.11 => 5.4.11

Severity

blocking all usage of SvelteKit

Additional Information

No response

Start with the linked reproduction and compare npm run dev with npm run build followed by npm run preview. Trace how the Sass math.random output affects generated dynamic class IDs and the matching CSS, then verify that the h1 styles are applied in the built preview as they are during development.