Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS @property confuses syntax highlighting #2692

Open
EnzoHB opened this issue Feb 21, 2025 · 0 comments
Open

CSS @property confuses syntax highlighting #2692

EnzoHB opened this issue Feb 21, 2025 · 0 comments
Labels

Comments

@EnzoHB
Copy link

EnzoHB commented Feb 21, 2025

Describe the bug

Using @property rule seems to confuse syntax highlight such that everything after <style> closing tag does not get properly highlighted.

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

Image
Image
Image
Image

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

@EnzoHB EnzoHB added the bug Something isn't working label Feb 21, 2025
@jasonlyu123 jasonlyu123 added upstream and removed bug Something isn't working labels Feb 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants