Breaks syntax highlighting of non angular or angular html files having @import in style

[imaksp]

🐞 bug report

Is this a regression?

Yes

Description

If non angular html file or angular index html file has style tag with @import url statement it breaks syntax highlighting of rest of the file.

Bug Type

What does this bug affect

• [x] Angular Language Service VSCode extension
• [ ] Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. add this style tag following in any html file & check syntax highlighting of rest of the content.

   <style>
   @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
   </style>

Expected behavior

It should not break normal html syntax highlighting.

Screenshots

🌍 Your Environment

Angular Version:

17.0.5

Extension Version:

17.0.2

VSCode Version:

Version: 1.84.2
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:57.054Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.1.0

Operating System:

Mac OS 14.1

[atscott]

This particular issue will be fixed by https://github.com/angular/vscode-ng-language-service/pull/1952

As for syntax highlighting applying to non-Angular templates, unfortunately there is no way to dynamically enable or disable syntax highlighting in VSCode. https://github.com/microsoft/vscode/issues/68647

[imaksp]

Ok, will it be possible to add config based on file extension, like Angular syntax highlighting only gets applied if file ends with component.html OR ng.html?

[atscott]

Ok, will it be possible to add config based on file extension, like Angular syntax highlighting only gets applied if file ends with component.html OR ng.html?

There's some nuance to this, but the short answer is no. Again, there's no option in VSCode to configure grammars dynamically and that includes grammars based on a config file. There are ways to configure the VSCode extension in a way that only provides the grammar for those file extensions across the board, but then they would never be included for files without that extension. Because Angular doesn't require a particular extension for the template files, this isn't ideal.

[atscott]

Closing as resolved by #1952 which was included in the release today.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}