Svelte preprocessor creates hashed svelte classnames despite there being global style attribute.

[ShahrukhAhmed89]

Describe the bug Even though a global attribute is provided to the style tag, the hashed names like s-foo still prop up. For example,

<style lang="scss" global>
  .main {
    background: wheat;
    .logo {
      height: 6em;
      padding: 1.5em;
      will-change: filter;
    }
  }
</style>

show up like this in the browser console. Additionally you get hashed classnames.

.main .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
}
.s-XsEmFtvddWTw {
}

To Reproduce

Create a new svelte app npm create vite@latest my-app -- --template svelte

Install npm i svelte-preprocess

Configure vite

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import preprocess from 'svelte-preprocess';

export default defineConfig({
  plugins: [
    svelte({
      preprocess: preprocess(),
    })
  ]
})

Add Sass styling

Additional context Now, hashed style name might not bother many. With svelte and :global() CSS, you don't get hashed names. So, a consistent behavior might be good. Also, think this did not happen pre-vite.

Will also add that the hashed names don't show up in the build CSS file. Which is good, maybe there could be a way they don't appear in HTML also.

[bluwy]

It only appears in dev mode when using Svelte + Vite for HMR. In most cases this should be harmless. Also you might want to avoid using global styles this way, see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles

[ShahrukhAhmed89]

Okay, got it. I had a special use case where I was sharing the components between an Iframe widget part of the app and the app itself. I had some issues with styles not coming through. You are right, the class-names don't appear on the build. Thank you for the help.