Modern / new CSS code is not highlighted properly.

Describe the bug

Syntax highlight for CSS looks weird with modern css syntax, for example:

@property --hue {
        syntax: '<number>'; /* no highlight & white text */
        inherits: false; /* no highlight & white text */
        initial-value: 200;
    }

.results-container {
        display: grid;
        gap: 0.75rem;
        container-type: inline-size; /* no highlight & white text */
        container-name: results; /* no highlight & white text */
    }

.info-icon {
        padding: 0.25rem;
        color: hsl(var(--primary) / 0.6);
        border-radius: var(--radius-sm);
        transition: all 0.2s ease;

        &:hover { /* no highlight & white text */
            background: hsl(var(--primary) / 0.1); 
            color: hsl(var(--primary));
        }
    }

@container results (max-width: 1200px) {  /* no highlight & white text */

Reproduction

Create a new svelte project and paste the following code in your +page.svelte, highlights will be missing

<div class="container">
    <div class="card" style:view-transition-name="card">
        <div class="content">Hover me!</div>
    </div>
</div>

<style>
    @property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --sparkle {
    syntax: '<color>';
    inherits: true;
    initial-value: oklch(80% 0.15 270);
}

.container {
    container: main / inline-size;
    anchor-name: --wrapper;
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: 2rem;
}

.card {
    container-type: size;
    border-block: 3px solid color-mix(in lch, purple 50%, blue);
    border-inline: 3px solid color-mix(in oklch, purple 70%, blue);
    background-color: light-dark(lab(95% 10 20), lab(20% -10 -20));
    color: color-contrast(var(--sparkle) vs oklch(98% 0.2 250), oklch(30% 0.3 270));
    text-wrap: balance;
    padding: clamp(1rem, 5cqi, 3rem);
    border-radius: 1rem;
    transition: all 0.3s ease;
    view-timeline-name: --card-scroll;
    animation-range: entry 25% cover 50%;

    @starting-style {
        transform: translateY(20px) rotateX(-20deg);
        opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    &:hover {
        box-shadow: 
            0 0 2rem color-mix(in oklch, var(--sparkle), transparent 50%),
            0 0 4rem color-mix(in oklch, var(--sparkle), transparent 80%);
        backdrop-filter: blur(5px);
    }

    &:has(.content:hover) {
        scale: 1.1;
        rotate: y var(--angle);
    }
}

.content {
    font-size: clamp(1rem, 5cqi, 2rem);
    text-wrap: pretty;
    hyphenate-character: "→";
    text-emphasis-position: over right;
}

::view-transition-old(card),
::view-transition-new(card) {
    animation-timeline: scroll();
    animation-range: entry 25% cover 50%;
}

@container main (width > 30em) {
    .card {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}

@container style(--theme: dark) {
    .card {
        color-scheme: dark;
        background: canvas;
    }
}

@scope (.card) to (.content) {
    :scope {
        isolation: isolate;
        contain: layout style;
    }
}

@keyframes rotate {
    from { --angle: 0deg; }
    to { --angle: 360deg; }
}
</style>

Expected behaviour

The expected behaviour should be the proper highlighting of the css properties

System Info

OS: Windows
IDE: VSCode

Which package is the issue about?

No response

Additional Information, eg. Screenshots

Example

sveltejs / language-tools

Modern / new CSS code is not highlighted properly. #2583