How to enable CSS or SCSS intelligence in Angular TypeScript file?

How to enable CSS auto intelligence with TypeScript inline styles in Angular with Visual Studio Code?

Here is my code:

import { Component } from "@angular/core";
import { RouterLink } from "@angular/router";

@Component({
  selector: "app-header",
  imports: [RouterLink],
  template: ` <h1><a [routerLink]="['/']">Connect</a></h1> `,
  styles: `
      h1 {
        display: inline-block;
      }
      h1 a {
        cursor: pointer;
        padding: 1rem 2.5rem;
        display: block;
        background: url("../../../assets/connect-desktop-header-bi.svg") 0 center no-repeat;
        text-indent: -9999px;
        overflow: hidden;
        
      }
    `,
})
export class Header {}

While I type, I am not getting "auto complete" with CSS section. it works fine with CSS files.

Known Issue

Indeed this looks like something the official Angular Language Service VS Code extension doesn't provide at the moment. There is a (very recently opened!) issue on the extension repo documenting the problem and requesting that the IntelliSense be added.

Workaround

In the meantime, there is a workaround you can use (though it is a bit janky):

• Install the Inline HTML VS Code extension
• Add the string /*css*/ in front of the CSS inline style template string you want to have IntelliSense
• Use the IntelliSense within those inline styles: