# fast-tagged-templates

> Syntax highlighting support for CSS and HTML tagged template literals

Latest version **0.1.0** (published 2022-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install fast-tagged-templates
pnpm add fast-tagged-templates
yarn add fast-tagged-templates
bun add fast-tagged-templates
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-03-08 |
| First published | 2022-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9671 |
| Author | Microsoft |
| Maintainers | fastsvc |

## Links

- npm: https://www.npmjs.com/package/fast-tagged-templates
- Repository: https://github.com/microsoft/fast
- Homepage: https://github.com/microsoft/fast#readme
- Issues: https://github.com/Microsoft/fast/issues/new/choose
- npm.io page: https://npm.io/package/fast-tagged-templates

## Recent versions

- 0.1.0 (latest) — 2022-03-08

## README

# FAST Tagged Template Literals

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

`fast-tagged-templates` is a Visual Studio Code extension which enables syntax highlighting for `css` and `html` tagged template literals in JavaScript and TypeScript files.

## Screenshots

### CSS Tagged Templates

Both tagged template literals (``css`.style {}`;``) and comment-style untagged template literals (``/* css */`.style {}`;``) are supported.

![CSS tagged template](images/css.png)

### HTML Tagged Templates

In addition to the standard styles, the `html` syntax highlighting also allows for optional generics in Typescript (``html<any>`<div></div>`;`` and ``/* html<Generic> */`<div></div>`;``).

![HTML tagged template](images/html.png)

The theme used in the screenshots is [Boxy Tomorrow](https://marketplace.visualstudio.com/items?itemName=trongthanh.theme-boxythemekit#boxy-tomorrow).

## Installation

### Extension Marketplace

Coming soon!

### Manual installation

To install the extension manually, copy or symlink the `fast-tagged-templates` directory to your [extensions folder](https://code.visualstudio.com/docs/editor/extension-gallery#_where-are-extensions-installed).

## Recommendations

### Adjust existing themes

Some theme extensions may need minor adjustments, depending on how their scopes are maintained. To override certain scopes, you may need to add `textMateRules` to your user settings. For example:

```json
"editor.tokenColorCustomizations": {
  // Fix parentheses on functions and expressions in strings for this particular theme
  "[Boxy Tomorrow]": {
    "textMateRules": [
      { "settings": { "foreground": "#8ABEB7" }, "scope": "meta.brace.round.ts"}
      { "settings": { "foreground": "#C5C8C6" }, "scope": "meta.template.expression.ts"}
    ]
  }
}
```

---
_Source: https://npm.io/package/fast-tagged-templates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._