How can I make VSCode syntax-highlight and give suggestions for CSS written inside tagged template literals in TypeScript files?

Question

When using Angular with VSCode I have seen in tutorials how people have been able to write the "styles" part of "@Component" in Strings using backticks (`) to allow multiline Strings to be directly written as CSS code inside an "app.component.ts" file. The tutorials show that as when written, all expressions typed in allows faster autocompletion with suggestions for values presented after an element has been added.

Like for example if "color:" is used suggested avaliable colors whose values can be used appear.

For me however no such suggestions ever appear when writting within multiline Strings inside a TypeScript file for CSS, although they do appear when using a regular CSS file, as well as when being written within a "style" element inside a HTML file. Still even though no autocomplete suggestions appear withing my TypeScript file, the CSS text code changes color depending on the used elements and values exactly as they do in CSS, so the TypeScript file does indeed recognize the CSS code as CSS, and the results when the server is run looks exactly as they should.

But how do I make it so that I still can get autocomplete suggestions when writting CSS code inside TypeScript to make things easier though?

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
      h3 {
        color:  /*<--Expects automatic suggestions for auto completion, but I never get any.*/
      }
    `,
  ],
})
export class AppComponent {
  title = 'my-dream-app';
}

Answer 1

This is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:

VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.

Two extensions are already making use of this:

• vscode-styled-components — Syntax highlighting, IntelliSense, and error reporting for styled-component CSS strings.
• lit-html — Syntax highlighting, IntelliSense, and formatting for lit-html template strings

If you are interested in writing an extension for a template string embedded language, take a look at how the implementation of these extensions. And let me know if you run into any problems or have any questions about the new contribution point (please open a new issue or post a question to stack overflow)

^{Note: The link to the Visual Studio Marketplace page for vscode-styled-components in the above quote is now dead. I think it has moved to here (but don't quote me on that. I'm not 100% sure what the history is here.)}

I'm not aware of CSS currently having such a ts server plugin, so what you can do in the meantime before one is created is:

You can use the Template Literal Editor extension.

Quoting from its readme:

Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).

Instructions:

• Install extension to VS Code.
• Open a JavaScript or TypeScript file, or a file in some other language if customized via "templateLiteralEditor.regexes" configuration. Many languages have a starter configuration included.
• Place cursor inside any template literal string and press Ctrl+Enter.
• Select language (defaults to html). Remembers the last selection as default.
• Outermost template literal range opens in the selected language in a side-by-side view, synced with the original. Multiple cursors and undo work as usual, and saving the template results in saving of the original document.
• Enjoy syntax highlighting, completions, formatting, commenting, snippets, your preferred editing extensions, etc!
• When you edit the original document the template editor is kept in sync. If template boundaries are modified or a sync error happens, then the template literal editor is closed for safety.
• Ctrl+Enter in the literal editor closes it and keeps the cursor position. Also ordinary close or "Revert And Close Editor" action should work without unnecessary save dialogs. There's also a Ctrl+Shift+Backspace shortcut to close all literal editors quickly, from any editor.

Other related tools:

This won't add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner. If you're already using styled-components, you can use vscode-styled-components ^{_{(I have no affiliation with this extension)}}.