Skip to content

Printer cannot print css keyframes with percent stops correctly #18207

@nmain

Description

@nmain

Describe the bug

When asked to print @keyframes, the printer adds extra % that invalidate the CSS.

Reproduction

import { print, parse } from "svelte/compiler"; // 5.55.5

const code = `<style>@keyframes foo { 0% { left: 0px; } 100% { left: 100px; } }</style>`;

const parsed = parse(code, { filename: "foobar.svelte", modern: true });

const printed = print(parsed).code;

console.log(printed);

/*
<style>
        @keyframes foo {
                0%% {
                        left: 0px;
                }
                100%% {
                        left: 100px;
                }
        }
</style>
*/

Logs

System Info

System:
    OS: macOS 26.4.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 93.39 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.12.0 - /Users/nmain/.nvm/versions/node/v24.12.0/bin/node
    Yarn: 1.22.22 - /Users/nmain/.nvm/versions/node/v24.12.0/bin/yarn
    npm: 11.6.2 - /Users/nmain/.nvm/versions/node/v24.12.0/bin/npm
    pnpm: 11.1.1 - /Users/nmain/.nvm/versions/node/v24.12.0/bin/pnpm
  Browsers:
    Safari: 26.4
  npmPackages:
    svelte: 5.55.5 => 5.55.5

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions