Skip to content

Svelte 5: ::view-transition-old is not a valid CSS identifier #10019

@ayroblu

Description

@ayroblu

Describe the bug

I was trying to try view transitions, and I couldn't get my vite svelte server to compile.

Internal server error: /path/to/project/src/routes/component-name/+page.svelte:95:28 Expected a valid CSS identifier
  Plugin: vite-plugin-svelte
  File: /path/to/project/src/routes/component/+page.svelte:95:28
  94 |      view-transition-name: component-name;
  95 |    }
  96 |    :root::view-transition-old(component-name),
     |                          ^
  97 |    :root::view-transition-new(component-name) {
  98 |      animation-delay: 5s;

I feel like I'm doing it wrong cause I see it used in this blog post, so maybe a regression or I'm just doing something wrong

Reproduction URL

I can add this if this is actually an issue and not just a dumb mistake on my part

Reproduction

No response

Logs

No response

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 55.55 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Edge: 113.0.1774.42
    Safari: 17.1.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.0.1
    @sveltejs/adapter-static: ^3.0.1 => 3.0.1
    @sveltejs/kit: ^2.0.0 => 2.0.6
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1
    svelte: ^5.0.0-next.1 => 5.0.0-next.26
    vite: ^5.0.3 => 5.0.10

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions