Clean up grammars

.fantomasignore

@@ -0,0 +1 @@
+test/grammar.fsx

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 *.log
-/out
+out
+target

README.md

@@ -1,6 +1,12 @@
-# Syntax highlighting for template strings in F#
+# Syntax highlighting for template strings in F\#
 
-VS Code extension that highlights HTML/SVG/CSS/SQL/JS F# triple quoted strings (interpolated or not) preceded by a function named `html/svg/css/sql/js`.
+VS Code extension that highlights embedded code in F# triple quoted strings (interpolated or not) preceded by a function named:
+
+- `html`
+- `svg`
+- `css`
+- `js`
+- `sql`
 
 ```fsharp
 html """<h1>Hello World!</h1>"""
@@ -9,17 +15,54 @@ html """<h1>Hello World!</h1>"""
 You need to declare the functions by yourself. If you need to do some transformation, make the function accept `FormattableString`:
 
 ```fsharp
-let sql (s: FormattableString) = ...
+let sql (s: FormattableString) = // ...
 ```
 
-If you just want to trigger highlighting, use an identity function:
+> The extension will also accept prefixed function names (case-insensitive) like `toHTML`, `query_sql`, etc.
+
+If you just want to trigger highlighting, use a language comment (also case-insensitive) instead:
 
 ```fsharp
-let css (s: string) = s
+(* css *) """:root::before { content: "Hello World!"; }"""
 ```
 
-> The extension will also accept functions ending with `_html`/`_sql`/etc.
-
 For HTML/CSS/JS templates, the extension will forward completion and hover requests to the built-in language providers in VS Code.
 
-![Example](screencast.gif)
+![Example](screencast.gif)
+
+## Contributing
+
+- Click **Run and Debug > Launch Extension**
+- Open [test cases](./test/grammar.fsx)
+
+### Grammar Debugging
+
+- Install [TextMate Languages](https://marketplace.visualstudio.com/items?itemName=pedro-w.tmlanguage) support
+- Update YAML and run **Commmand Palette > Convert to tmLanguage JSON**
+- Format YAML and JSON with [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- Add recommended debug tokens to **User Settings**:
+
+  ```jsonc
+  "editor.tokenColorCustomizations": {
+    "textMateRules": [
+      {
+        "scope": [
+          "DEBUG"], "settings": {
+            "fontStyle": "underline",
+            "foreground": "#9A9A9A" }
+      },
+      {
+        "scope": [
+          "DEBUG.green"], "settings": {
+            // Inherits fontStyle from DEBUG
+            "foreground": "#17C984" }
+      },
+      // DEBUG.orange -> #FF8B2D
+      // DEBUG.red -> #C62B2B
+    ]
+  }
+  ```
+
+## Acknowledgements
+
+Inspired by [@mjbvz](https://github.com/mjbvz)'s JavaScript/TypeScript support for [Comment tagged templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates).

package.json

@@ -4,24 +4,24 @@
   "description": "Syntax highlighting for template strings in F#",
   "icon": "fsharp.png",
   "version": "1.4.1",
-  "publisher": "alfonsogarciacaro",  
+  "publisher": "alfonsogarciacaro",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/alfonsogarciacaro/vscode-template-fsharp-highlight.git"
   },
   "bugs": {
-      "url": "https://github.com/alfonsogarciacaro/vscode-template-fsharp-highlight/issues"
+    "url": "https://github.com/alfonsogarciacaro/vscode-template-fsharp-highlight/issues"
+  },
+  "engines": {
+    "vscode": "^1.43.0"
   },
-	"engines": {
-		"vscode": "^1.43.0"
-	},
   "categories": [
     "Other"
   ],
-	"activationEvents": [
-		"onLanguage:fsharp",
+  "activationEvents": [
+    "onLanguage:fsharp",
     "onCommand:template.fsharp.comment"
-	],  
+  ],
   "main": "./out/extension",
   "contributes": {
     "commands": [
@@ -35,57 +35,96 @@
       }
     ],
     "keybindings": [
-			{
-				"command": "template.fsharp.addComment",
-				"key": "ctrl+shift+k ctrl+shift+c",
-				"when": "editorFocus && editorLangId == 'fsharp'"
-			},
-			{
-				"command": "template.fsharp.removeComment",
-				"key": "ctrl+shift+k ctrl+shift+u",
-				"when": "editorFocus && editorLangId == 'fsharp'"
-			}
+      {
+        "command": "template.fsharp.addComment",
+        "key": "ctrl+shift+k ctrl+shift+c",
+        "when": "editorFocus && editorLangId == 'fsharp'"
+      },
+      {
+        "command": "template.fsharp.removeComment",
+        "key": "ctrl+shift+k ctrl+shift+u",
+        "when": "editorFocus && editorLangId == 'fsharp'"
+      }
     ],
     "grammars": [
       {
         "injectTo": [
           "source.fsharp"
         ],
-        "scopeName": "template.fsharp.injection",
-        "path": "./syntaxes/grammar.json",
+        "scopeName": "inline.template-fsharp-highlight",
+        "path": "./syntaxes/grammar.json"
+      },
+      {
+        "injectTo": [
+          "source.fsharp"
+        ],
+        "scopeName": "inline.template-fsharp-highlight.reinjection",
+        "path": "./syntaxes/reinject-grammar.json",
         "embeddedLanguages": {
-          "meta.embedded.string.html": "html",
-          "meta.embedded.string.sql": "sql",
-          "meta.embedded.string.css": "css",
-          "meta.embedded.string.js": "js",
-          "meta.embedded.interpolated.html": "html",
-          "meta.embedded.interpolated.sql": "sql",
-          "meta.embedded.interpolated.css": "css",
-          "meta.embedded.interpolated.js": "js"
+          "meta.template.expression.fsharp": "fsharp"
         }
       },
       {
         "injectTo": [
           "source.fsharp"
         ],
-        "scopeName": "template.fsharp.reinjection",
-        "path": "./syntaxes/reinject-grammar.json",
+        "scopeName": "inline.template-fsharp-highlight.injection.html",
+        "path": "./syntaxes/inject-html.json",
+        "embeddedLanguages": {
+          "string.quoted.triple.template.html.fsharp": "html"
+        }
+      },
+      {
+        "injectTo": [
+          "source.fsharp"
+        ],
+        "scopeName": "inline.template-fsharp-highlight.injection.svg",
+        "path": "./syntaxes/inject-svg.json",
         "embeddedLanguages": {
-          "meta.embedded.interpolated.substitution": "fsharp"
+          "string.quoted.triple.template.svg.fsharp": "xml"
+        }
+      },
+      {
+        "injectTo": [
+          "source.fsharp"
+        ],
+        "scopeName": "inline.template-fsharp-highlight.injection.css",
+        "path": "./syntaxes/inject-css.json",
+        "embeddedLanguages": {
+          "string.quoted.triple.template.css.fsharp": "css"
+        }
+      },
+      {
+        "injectTo": [
+          "source.fsharp"
+        ],
+        "scopeName": "inline.template-fsharp-highlight.injection.js",
+        "path": "./syntaxes/inject-js.json",
+        "embeddedLanguages": {
+          "string.quoted.triple.template.js.fsharp": "javascript"
+        }
+      },
+      {
+        "injectTo": [
+          "source.fsharp"
+        ],
+        "scopeName": "inline.template-fsharp-highlight.injection.sql",
+        "path": "./syntaxes/inject-sql.json",
+        "embeddedLanguages": {
+          "string.quoted.triple.template.sql.fsharp": "sql"
         }
       }
     ]
   },
-	"scripts": {
+  "scripts": {
     "compile": "tsc -b",
-		"watch": "tsc -b -w",
+    "watch": "tsc -b -w",
     "pack": "vsce package"
-	},
-	"dependencies": {
-	},
-	"devDependencies": {
+  },
+  "dependencies": {},
+  "devDependencies": {
     "@types/node": "^16.7.13",
-		"@types/vscode": "^1.43.0",
+    "@types/vscode": "^1.43.0",
     "typescript": "^4.2.2"
-	}
-}
+  }
+}