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

[stefandevai]

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

[eltigerchino]

similar to vitejs/vite#15391

The math.random function is causing the CSS content to be different for the SSR and CSR CSS output so we end up with two different CSS class name hashes. The prerendered page is importing the CSS with the CSR generated class name but the element is referencing the SSR generated class name. You'd also get a different CSS value each time you build the app. Not sure what we can do here.