@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   Avoid intercepting esbuild virtual modules, preserve root custom-property priorities on cleanup, and reject non-finite RGB seed channels while treating missing (`none`) RGB channels as zero. ([#83355](https://github.com/WordPress/gutenberg/pull/83355))
+-   Make JavaScript token fallback transforms syntax-aware, preserve tagged-template values and source maps, and support Vite query-string module IDs. Use the TypeScript loader for `.ts`, `.mts`, and `.cts` files handled by the esbuild plugin, including files whose token values are unchanged. ([#83356](https://github.com/WordPress/gutenberg/pull/83356))
 
 ## 2.2.0 (2026-09-23)
 
 
@@ -278,7 +278,13 @@ The build plugins inject generated fallbacks into bare `var(--wpds-*)` reference
 | `@wordpress/theme/esbuild-plugins/esbuild-ds-token-fallbacks`           | esbuild       | JS/TS |
 | `@wordpress/theme/vite-plugins/vite-ds-token-fallbacks`                 | Vite          | JS/TS |
 
-Existing fallbacks are unchanged. An unknown token in a bare reference fails the build.
+Existing fallbacks are unchanged. An unknown token in a bare reference in transformed values fails the build.
+
+The JavaScript plugins treat token references in string values, JSX attribute values, and static template parts as CSS. This includes tagged templates such as `String.raw`. They leave comments, regular expressions, property names, module paths, JSX text, and TypeScript types unchanged. Token names assembled across template expressions are not resolved. As before, a token reference in a runtime message string is also treated as CSS.
+
+Files the JavaScript parser cannot read are left unchanged for the downstream compiler. To add fallbacks in Vite files that use custom syntax, configure the syntax-stripping plugin with `enforce: 'pre'` and list it before the token fallback plugin.
+
+Both JavaScript plugins preserve source maps. The Vite plugin runs before JavaScript and TypeScript compilation and supports module IDs with query strings. It skips `?raw` and `?url` imports so their exported file contents and URLs stay unchanged.
 
 ### PostCSS
 
 
@@ -1,16 +1,19 @@
 import { readFile } from 'fs/promises';
-import { addFallbackToVar } from '../postcss-plugins/ds-token-fallbacks.mjs';
+import { fileURLToPath, pathToFileURL } from 'url';
+import remapping from '@jridgewell/remapping';
+import { AnyMap } from '@jridgewell/trace-mapping';
+import { transformDsTokenFallbacks } from '../js-plugins/transform-ds-token-fallbacks.mjs';
 
 /** @type {Record<string, import('esbuild').Loader>} */
 const LOADER_MAP = {
 	'.js': 'jsx',
 	'.jsx': 'jsx',
-	'.ts': 'tsx',
+	'.ts': 'ts',
 	'.tsx': 'tsx',
 	'.mjs': 'jsx',
-	'.mts': 'tsx',
+	'.mts': 'ts',
 	'.cjs': 'jsx',
-	'.cts': 'tsx',
+	'.cts': 'ts',
 };
 
 /**
@@ -40,12 +43,79 @@ const plugin = {
 				}
 
 				const ext = args.path.match( /(\.[^.]+)$/ )?.[ 1 ] || '.js';
+				const result = transformDsTokenFallbacks( source, args.path );
+				if ( ! result ) {
+					return {
+						contents: source,
+						loader: LOADER_MAP[ ext ] || 'jsx',
+					};
+				}
+				let sourceMap = result.map.toUrl();
+				/** @type {string[]} */
+				const watchFiles = [];
+				/** @type {import('esbuild').PartialMessage[]} */
+				const warnings = [];
+				if ( result.sourceMappingURL ) {
+					try {
+						const url = new URL(
+							result.sourceMappingURL,
+							pathToFileURL( args.path )
+						);
+						/** @type {string | undefined} */
+						let inputMap;
+						let mapPath = args.path;
+						if ( url.protocol === 'data:' ) {
+							const comma = url.href.indexOf( ',' );
+							const data = decodeURIComponent(
+								url.href.slice( comma + 1 )
+							);
+							inputMap = url.href
+								.slice( 0, comma )
+								.endsWith( ';base64' )
+								? Buffer.from( data, 'base64' ).toString(
+										'utf8'
+									)
+								: data;
+						} else if ( url.protocol === 'file:' ) {
+							mapPath = fileURLToPath( url );
+							watchFiles.push( mapPath );
+							inputMap = await readFile( url, 'utf8' );
+						}
+						// Like esbuild, do not fetch remote source-map URLs.
+						if ( inputMap !== undefined ) {
+							const map = remapping(
+								[
+									result.map.toString(),
+									new AnyMap(
+										inputMap,
+										pathToFileURL( mapPath ).href
+									),
+								],
+								() => null
+							);
+							sourceMap = `data:application/json;base64,${ Buffer.from( map.toString() ).toString( 'base64' ) }`;
+						}
+					} catch ( error ) {
+						// esbuild ignores missing maps and warns for malformed maps.
+						if ( ! (
+							error &&
+							typeof error === 'object' &&
+							'code' in error &&
+							error.code === 'ENOENT'
+						) ) {
+							warnings.push( {
+								text: `Could not load the input source map: ${ error instanceof Error ? error.message : String( error ) }`,
+								detail: error,
+							} );
+						}
+					}
+				}
 
 				return {
-					contents: addFallbackToVar( source, {
-						escapeQuotes: true,
-					} ),
+					contents: `${ result.code }\n//# sourceMappingURL=${ sourceMap }`,
 					loader: LOADER_MAP[ ext ] || 'jsx',
+					watchFiles,
+					warnings,
 				};
 			}
 		);