withastro/astro

🐛 BUG: SASS content incorrectly highlighted as CSS syntax when `lang='sass'` is not on the same line with `<style`

Open

#14,657 opened on Jan 17, 2025

View on GitHub
 (12 comments) (0 reactions) (0 assignees)TypeScript (3,444 forks)batch import
- P2: nice to havefeat: syntaxgood first issuepkg: language-toolstriage: needs triage

Repository metrics

Stars
 (59,282 stars)
PR merge metrics
 (Avg merge 4d 23h) (197 merged PRs in 30d)

Description

Describe the Bug

When the lang attribute of the <style> tag is not on the same line as the style tag, the content may be incorrectly highlighted as CSS syntax.

Steps to Reproduce

  1. npm create astro@latest
  2. open the project in vscode
  3. install newest astro extension
  4. create anyname.astro with the contents
<style
  lang="sass"
  define:vars={{
    // any comment to avoid formatter collapse content into a single line
    foo: '#fff',
  }}
>
  .bar
    color: var(--foo)
</style>
  1. the content below .bar (include </style>) will be incorrectly highlighted as css syntax, not sass.

Link to Minimal Reproducible Example

https://gist.github.com/HPCesia/6e935433cfd6e414099f71714cb4961d

Contributor guide

Research direction
Investigate the Astro VS Code extension's grammar or syntax highlighting logic for `<style>` tags. Specifically, look at how the language is inferred when `lang` attribute is on a separate line from `<style`. The bug suggests the grammar uses a single line regex or fails to parse multi line attributes. Check the TextMate grammar or semantic token provider for Astro files.
Tech stack
typescript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
GitVS Code extension development basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60