cssHash's hash() function may generate invalid CSS identifiers

[Bilge]

Describe the bug

cssHash: ({hash}) => hash('foo'), returns 2nhsez, which is an invalid CSS identifier since it starts with a number, unless the identifier is escaped, which Svelte does not do.

Reproduction

{
    test: /\.svelte$/,
    loader: 'svelte-loader',
    options: {
        compilerOptions: {
            cssHash: ({hash}) => hash('foo'),
        },
    },
},

Logs

No response

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 11.64 GB / 31.94 GB
  Binaries:
    Node: 14.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.9 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.18362.1593.0)
    Internet Explorer: 11.0.18362.1766
  npmPackages:
    svelte: ^3.43.1 => 3.43.1
    webpack: ^5.11.0 => 5.53.0

Severity

annoyance

[peopledrivemecrazy]

You are correct, but the right way to use it is.

  compilerOptions: {
        cssHash: ({ hash, css }) => `custom-${hash(css)}`,
 },

check https://github.com/sveltejs/svelte/pull/6026/files#diff-a5eff3ac7f9d7a3c6fd0d3f987f936192b62c36eb9d2d275a982d055f588bd21R278

[Bilge]

Here's a custom hashing option, but don't you dare use it the wrong way!

I'm well aware how it's supposed to be used. This is a quick POC to prove Svelte does not escape problematic identifiers (howsoever arising).

[gtm-nayan]

The hash function provided is implemented with the assumption that it's output will be prefixed in order to turn the hash into a valid css class name. If you want a truly custom solution, you could very easily substitute the hash function for some other hashing function that guarantees that it's output will always be a valid css class name.

[Conduitry]

https://mathiasbynens.be/notes/css-escapes

Escaping CSS identifiers is a bit of a pain. If someone wants to implement that, great. Another viable option might be to have the compiler throw an exception when the value returned by your cssHash function can't be used without escaping, to at least avoid producing incorrect code.

[Conduitry]

https://github.com/mathiasbynens/cssesc looks like a nice, small, self-contained library for this CSS identifier escaping. If we want to use that to do the escaping, that sounds fine to me.

[Prinzhorn]

Alternatively we could renamed cssHash to cssIdentifier (or generateCSSIdentifier or cssClassName or generateCSSClassName) to get rid of the ambiguity (the implementation doesn't have to use to build-in hash function either). Returning a valid identifier is then in the hands of whoever overrides the default implementation. This person could then include such a library in their code instead of having it in the core. I assume this is a very rare use-case? And most of the time probably to replace the svelte keyword.