Allow cssHash value to be null

[alejandrovrojas]

Describe the problem

Scoped styles in Svelte have been notoriously problematic over the years. The changes introduced in #4377 could in theory have allowed to disable the scoping css class altogether but in the current implementation falsy values are returned as strings – where:

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

<style>
  .test {
    color: red;
  }
</style>

compiled with cssHash: () => false returns:

{
  html: '<div class="test false"></div>',
  css: { code: '.test.false{color:red}' },
}

and an empty string cssHash: () => '' returns:

{
  html: '<div class="test "></div>',
  css: { code: '.test.{color:red}' },
}

Describe the proposed solution

Better handling of the cssHash property should instead remove the class in its entirety, so that for instance cssHash: () => null would return:

{
  html: '<div class="test"></div>',
  css: { code: '.test{color:red}' },
}

Alternatives considered

If the goal is to disable css scoping there's also the possibility of defining the value of cssHash to be a unique string and manually remove all instances of it in the html and css code respectively. But it all seems like a tedious workaround for a feature that should have been optional in the first place.

Importance

i cannot use svelte without it

[bluwy]

I'm not sure if we want cssHash to be a way of disabling scoped styles altogether. Shouldn't you use :global or <style global> if you want to avoid it? I think scoped styles should always work regardless so it doesn't interfere with third-party components. For vite-plugin-svelte, we also use it for HMR, so it must be turned on in dev mode, otherwise it could cause inconsistencies in the production build.

[dummdidumm]

I feel the same. If anything, this should throw an error if you don't return a string with a length of more than zero.

[Conduitry]

We have #6821 for making the compiler throw an error when the return value would result in an invalid class name.

We don't want a falsy return value to be a backdoor way into disabling scoping. (Even if it rendered the styles with no scoping class, it wouldn't prevent it from matching selectors against this component and removing unused ones. ) There are other mechanisms for this (like :global() and svelte-preprocess's <style global>) as mentioned above.

[alejandrovrojas]

:global is not at all a scalable solution and has been discussed endlessly already #6972. Regardless, the point here is that cssHash makes some assumptions about its usage that aren't exactly coherent.