From 4096bc55bea787b15c9281945aca5b87ce1acdc5 Mon Sep 17 00:00:00 2001 From: Vitaly Slobodin Date: Mon, 15 Dec 2025 23:48:54 +0100 Subject: [PATCH] languages: Add injections for string and tagged template literals for JS/TS(X) (#44180) Hi! This pull request adds language injections for string and tagged template literals for JS/TS(X). This is similar to what [this extension](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates) provides for VSCode. This PR is inspired by this tweet https://x.com/leaverou/status/1996306611208388953?s=46&t=foDQRPR8oIl1buTJ4kZoSQ I've added injections queries for the following languages: HTML, CSS, GraphQL and SQL. This works for: - String literals: `const cssString = /* css */'button { color: hotpink !important; }';` - Template literals: ```const cssString = /* css */`button { color: hotpink !important; }`;``` All injections support the format with whitespaces inside, i.e. `/* html */` and without them `/*html*/`. ## Screenshots |before|after| |---------|-----------| | CleanShot 2025-12-04 at 21 12 00@2x | CleanShot 2025-12-04 at 21 08 35@2x| Release Notes: - Added language injections for string and tagged template literals in JS/TS(X) --- .../languages/src/javascript/injections.scm | 43 +++++++++++++++++++ crates/languages/src/tsx/injections.scm | 43 +++++++++++++++++++ .../languages/src/typescript/injections.scm | 43 +++++++++++++++++++ 3 files changed, 129 insertions(+) diff --git a/crates/languages/src/javascript/injections.scm b/crates/languages/src/javascript/injections.scm index f79cd788d78964f61f611023d0645c95c88aaf17..244e025a6f5d62f1d3500fc35fc480b1baa2471e 100644 --- a/crates/languages/src/javascript/injections.scm +++ b/crates/languages/src/javascript/injections.scm @@ -83,3 +83,46 @@ arguments: (arguments (template_string (string_fragment) @injection.content (#set! injection.language "isograph"))) ) + +; Parse the contents of strings and tagged template +; literals with leading ECMAScript comments: +; '/* html */' or '/*html*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*html\\s*\\*\\/") + (#set! injection.language "html") +) + +; '/* sql */' or '/*sql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*sql\\s*\\*\\/") + (#set! injection.language "sql") +) + +; '/* gql */' or '/*gql*/' +; '/* graphql */' or '/*graphql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(gql|graphql)\\s*\\*\\/") + (#set! injection.language "graphql") +) + +; '/* css */' or '/*css*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(css)\\s*\\*\\/") + (#set! injection.language "css") +) diff --git a/crates/languages/src/tsx/injections.scm b/crates/languages/src/tsx/injections.scm index 3cca9e8e81c31d3565554595456fa62be89bc81f..2cf3ea69ca2fd95402eba6fadb85f3505c5562b7 100644 --- a/crates/languages/src/tsx/injections.scm +++ b/crates/languages/src/tsx/injections.scm @@ -83,3 +83,46 @@ arguments: (arguments (template_string (string_fragment) @injection.content (#set! injection.language "isograph"))) ) + +; Parse the contents of strings and tagged template +; literals with leading ECMAScript comments: +; '/* html */' or '/*html*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*html\\s*\\*\\/") + (#set! injection.language "html") +) + +; '/* sql */' or '/*sql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*sql\\s*\\*\\/") + (#set! injection.language "sql") +) + +; '/* gql */' or '/*gql*/' +; '/* graphql */' or '/*graphql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(gql|graphql)\\s*\\*\\/") + (#set! injection.language "graphql") +) + +; '/* css */' or '/*css*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(css)\\s*\\*\\/") + (#set! injection.language "css") +) diff --git a/crates/languages/src/typescript/injections.scm b/crates/languages/src/typescript/injections.scm index 5321e606c118a41df127c8aa37c7c2811dc8bd23..91880407900e7407e46982a54dbeaa3e30277bdd 100644 --- a/crates/languages/src/typescript/injections.scm +++ b/crates/languages/src/typescript/injections.scm @@ -124,3 +124,46 @@ ] ))) (#set! injection.language "css")) + +; Parse the contents of strings and tagged template +; literals with leading ECMAScript comments: +; '/* html */' or '/*html*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*html\\s*\\*\\/") + (#set! injection.language "html") +) + +; '/* sql */' or '/*sql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*sql\\s*\\*\\/") + (#set! injection.language "sql") +) + +; '/* gql */' or '/*gql*/' +; '/* graphql */' or '/*graphql*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(gql|graphql)\\s*\\*\\/") + (#set! injection.language "graphql") +) + +; '/* css */' or '/*css*/' +( + ((comment) @_ecma_comment [ + (string (string_fragment) @injection.content) + (template_string (string_fragment) @injection.content) + ]) + (#match? @_ecma_comment "^\\/\\*\\s*(css)\\s*\\*\\/") + (#set! injection.language "css") +)