CSS `@property` confuses syntax highlighting

[EnzoHB]

Describe the bug

Using @property rule seems to confuse syntax highlight such that everything after

Reproduction

Copy and past the following .svelte file.

Things that are going to be highlighted incorrectly:

• The closing curly brace from the @property rule
• The slash from the closing </style> tag
• Everything after the </style> closing tag

<script>

const width = 12;
const radius = 64;
const percentage = 40;
const diameter = radius * 2;

// Todo 

</script>

<style>

    @property --deg {
        syntax: "<angle>";
        inherits: false;
        initial-value: 180deg;
    }

    .progress {
        --width:12px;
        --radius: 64px;
        --diameter: calc(var(--radius) * 2);
        position: relative;
        width: var(--diameter);
        height: var(--diameter);
    }
    
    .background {
        position: absolute;;
        width: var(--diameter);
        height: var(--diameter);
        border-radius: 1000px;
        background: conic-gradient(#2C8444 var(--deg), #373737 var(--deg));
        transition: --deg 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .center {
        position: absolute;
        left: var(--width);
        top: var(--width);
        width: calc((var(--radius) - var(--width)) * 2);
        height: calc((var(--radius) - var(--width)) * 2);
        border-radius: 1000px;
        background-color: #2c2c2c;
    }

    .endpoint {
        position: absolute;
        width: var(--diameter);
        height: var(--diameter);
        z-index: 1;
        transition: --deg 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .ball {
        position: absolute;
        width: var(--width);
        height: var(--width);
        background-color: #2C8444;
        border-radius: 1000px;
        left: calc(var(--radius) - var(--width) / 2);
        z-index: 1;
    }

    .start  {
        transform: rotate(0deg);
    }

    .end {
        transform: rotate(var(--deg));
    }

</style>

<div class=progress>
    <div class="start endpoint">
        <div class=ball></div>
    </div>
    <div class=background></div>
    <div class=center></div>
    <div class="end endpoint">
        <div class=ball></div>
    </div>
</div>

Expected behaviour

Things should be highlighted after the @property rule

System Info

• OS: Ubuntu 24.04.1 LTS
• IDE: VS Code 1.96.4

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

I should mention it also happens with the default vs code theme