Why is cssHash generated for my library?

[Enes5519]

Describe the bug

Since I can't pass scoped css to child components in Svelte, I use preprocess to do this. When I migrated to Svelte 5, I thought there was a problem when I saw svelte-{hash} classnames in my snapshots. When I printed the cssHash function, it wrote the path of my library.

Reproduction

1. Create project with svelte 5.
2. Use svelte-preprocess-cssmodules in your project.
3. Create library with svelte 4.
4. Use svelte-preprocess-cssmodules in your library.
5. Use your created library in your created project.
6. You can see svelte prefixed classes.

Logs

Css Hash output (filename and css props)

/Users/.../my-project/.../ContentCard.svelte :global(.container) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
:global(.container.horizontal) {
  flex-direction: row;
}
:global(.container.horizontal .sizes) {
  flex: 1;
}

:global(.separator) {
  height: 1px;
  background-color: var(--bl-color-neutral-lighter);
  display: none;
}
:global(.separator:has(+ *)) {
  display: block;
}
:global(.separator.horizontal) {
  height: auto;
  width: 1px;
}

/Users/X/my-project/node_modules/my-library/dist/.../Box.svelte 
  :global(.box-XSmnzi) {
    padding: var(--box-padding);
    border-radius: var(--top-border-radius) var(--top-border-radius) var(--bottom-border-radius)
      var(--bottom-border-radius);
    background: white;
  }

  :global(.box-XSmnzi > [data-remove-margin]) {
    margin-left: calc(var(--box-padding) * -1);
    margin-right: calc(var(--box-padding) * -1);
  }

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 179.03 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 9.4.0 - /usr/local/bin/pnpm
    bun: 1.1.17 - ~/.bun/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.2
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    svelte: ^5.0.0 => 5.19.1 
    svelte-preprocess-cssmodules: ^3.0.0 => 3.0.0 
    vite: ^5.4.10 => 5.4.10

Severity

annoyance

[Ocean-OS]

This reproduction is way too vague, please provide a cloneable GitHub repository or a REPL reproduction.

[Enes5519]

Is it normal for the library to enter the compiler css hash function?

[webJose]

I think this is expected. Component libraries are not compiled. They are simply transpiled out of their TypeScript (if used), and source code is packaged. When a project consumes them, they are compiled, and part of the process is to scope the CSS.

However, this is just my thinking. It would be ideal to provide actual reproductions of the issue.

[Enes5519]

You are right. But I cannot offer reproduction, it is actually something that can be looked at more locally. My main question is that it was not generating hashes before when I used the preprocessor I mentioned. Why is it generating now?

[dominikg]

without a reproduction repo (in this case i suggest 2 branches that showcase the different behavior in svelte4 and svelte5) it is impossible for us to tell. Us trying to reproduce it from your description would be time consuming and error prone.

So if you believe this behavior to be a bug in svelte5, please provide one. If not and this is a more of a question, we can either convert this to a discussion or you ask about it on https://svelte.dev/chat in #questions-svelte-and-kit

[Enes5519]

I think I got it. When you use class directive in your component it automatically generates css hash otherwise it doesn't.

https://stackblitz.com/edit/vitejs-vite-ecolqhvc?file=src%2Flib%2FButton.svelte

[micantoine]

I believe I was a able to replicate the issue, here is the REPL

Happening when:

• A parent element has a global class which is also used to target a child element.

<h1 class="header">Hello <small>world</small></h1>

<style>
  :global(.header) { color: green; }
  :global(.header) small { color: gray; }
</style>

<!--- generating -->

<h1 class="header svelte-1s2fmc">Hello <small class="svelte-1s2fmc">world</small></h1>

<style>
  .header { color: green; }
  .header small.svelte-1s2fmc { color: gray; }
</style>

If the global class is not used to target the child element, then the scoped class is not being added

<h1 class="header">Hello <small>world</small></h1>

<style>
  :global(.header) { color: green; }
  small { color: gray; }
</style>

<!-- generating -->

<h1 class="header">Hello <small class="svelte-1s2fmc">world</small></h1>

<style>
  .header { color: green; }
  small.svelte-1s2fmc { color: gray; }
</style>

• A Child component is inheriting a class from a props and is added with the class array or class object or class directive

<script>
 let props = $props();
</script>

<button class={['btn', props.class]}>Submit</button>

<style>
  :global(.btn) { font-size: 16px; }
</style>

<!-- generating --->

<button class="btn svelte-1d9sw2w">Submit</button>

<style>
  .btn { font-size: 16px; }
</style>

In the case where the props class is simply added to the class attribute along side the other ones, the scoped class does not appear anymore.

<script>
 let props = $props();
</script>

<button class="btn {props.class}">Submit</button>

<style>
  :global(.btn) { font-size: 16px; }
</style>

<!-- generating --->

<button class="btn">Submit</button>

<style>
  .btn { font-size: 16px; }
</style>

[Enes5519]

We want to migrate to Svelte 5 to view the Sourcemap more accurately. This is the only remaining obstacle to our migration. Did you have a chance to look here?

[dummdidumm]

The issue shown in this REPL and the one in Stackblitz is fixed. If there's no scoped class declared in the style tag then it will not apply hashes.