We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
@property
Using @property rule seems to confuse syntax highlight such that everything after <style> closing tag does not get properly highlighted.
Copy and past the following .svelte file.
Things that are going to be highlighted incorrectly:
</style>
<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>
Things should be highlighted after the @property rule
Svelte for VS Code extension
I should mention it also happens with the default vs code theme
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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:
@property
rule</style>
tag</style>
closing tagExpected behaviour
Things should be highlighted after the
@property
ruleSystem Info
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
The text was updated successfully, but these errors were encountered: