The compiler inserts a `$$css` variable, which cause error: `The $ prefix is reserved and cannot be used for variables or imports.`

[gyurielf]

Describe the bug

Hello guyz!

First of all, the error occurred after upgrading to Svelte v5, it was not a problem with v4.

For some context:
I have a plain JS library, which exports a class. On instance initialization mounts a component into a shadowRoot. (so its style is mostly encapsulated, which was the goal from our side).

I'd separate the problem into two part.

1 - The library complies ts and svelte files into js files and generates d.ts files (to be usable , anywhere). For compiling, it uses rollup, rollup-plugin-svelte, svelte-preprocess, tailwindcss and some other rollup plugins that are irrelevant here.

// Part of my rollup config.
svelte({
    preprocess: sveltePreprocess({
        postcss: true,
        typescript: true,
        sourceMap: !!process.env.NODE_ENV || process.env.NODE_ENV === 'development'
    }),
    compilerOptions: {
        css: 'injected', // This is always 'injected' when compiling with customElement mode.
        customElement: true
    },
    emitCss: false
}),

2 - I got the mentioned error when I wan to use the built library in a SvelteKit app, because the built myComponent.svelte.js file has:

// myComponent.svelte.js
const $$css = {
    hash: 'svelte-1kk8v2h',
    code: '/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n....

Svelte adds that $$css variable itself and its content on compile, not me.

The $ prefix is reserved, and cannot be used for variables and imports
https://svelte.dev/e/dollar_prefix_invalid [plugin vite-plugin-svelte:optimize-module]

So probably this is the problem.

I found these so far, which can be related.:

svelte/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

Line 299 in 548ad7b

body.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));

svelte/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

Line 450 in 548ad7b

state.hoisted.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));

Reproduction

Compile a component via rollup, with the following compilerOptions (rollup-plugin-svelte):

compilerOptions: {
      css: 'injected', // This is always 'injected' when compiling with customElement mode.
      customElement: true
},

Logs

The $ prefix is reserved, and cannot be used for variables and imports
https://svelte.dev/e/dollar_prefix_invalid [plugin vite-plugin-svelte:optimize-module]

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 5.09 GB / 15.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.17.0/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.14.0 - ~/.nvm/versions/node/v22.17.0/bin/pnpm
  Browsers:
    Chrome: 138.0.7204.183

Severity

blocking an upgrade

[gyurielf]

Looks like there is a workaround for this!

This was my rollup output configuration:

const commonBaseConfig = {
    input: 'src/main.ts',
    watch: {
        buildDelay: 1200
    }
};
output: [
    {
        ...commonOutputConfig,
        format: 'esm',
        dir: 'dist/esm',
        entryFileNames: (chunkInfo) => {
            if (chunkInfo.name.includes('node_modules')) {
                return chunkInfo.name.replace('node_modules', 'external') + '.js';
            }

            return '[name].js';
        }
    }
],

Its generated a MyComponent.svelte.js which is the source of the problem. The SvelteKit compiler picks up this and scan for rune mode.

So I added an extra name check:

 entryFileNames: (chunkInfo) => {
    if (chunkInfo.name.includes('node_modules')) {
        return chunkInfo.name.replace('node_modules', 'external') + '.js';
    } else if (components.includes('.svelte')) {
        return chunkInfo.name.replace('.svelte', '-svelte.js');
    }

  return '[name].js';
}

And the problem has been worked around.

[paoloricciuti]

Yeah the problem is that if it a .svelte.js file svelte will try to compile that file...but since it's already compiled it means it's gonna break in all sort of ways. Changing the name will fix the problem, I also wonder if you could ship both a compiled version and an uncompiled version that get's compiled by svelte (i think you should be able to do it using the svelte export condition).

Regardless there's nothing we should do here for this so I'm gonna close this. Thanks for reporting!