Skip to content

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

@HPCesia

Description

@HPCesia

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    - P2: nice to haveNot breaking anything but nice to have (priority)feat: syntaxIssue in our syntax highlighting (scope)good first issueGood for newcomers. If you need additional guidance, feel free to post in #contribute on Discordpkg: language-toolsRelated to language-tooling (scope)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions