Implement CSS theme tokens behind feature flag (#36861)

config/vite/plugin-mastodon-themes.ts

@@ -43,6 +43,10 @@ export function MastodonThemes(): Plugin {
 
       for (const [themeName, themePath] of Object.entries(themes)) {
         entrypoints[`themes/${themeName}`] = path.resolve(jsRoot, themePath);
+        entrypoints[`themes/${themeName}_theme_tokens`] = path.resolve(
+          jsRoot,
+          themePath.replace('styles/', 'styles_new/'),
+        );
       }
 
       return {
@@ -64,7 +68,11 @@ export function MastodonThemes(): Plugin {
         // Rewrite the URL to the entrypoint if it matches a theme.
         if (isThemeFile(req.url ?? '', themes)) {
           const themeName = pathToThemeName(req.url ?? '');
-          req.url = `/packs-dev/${themes[themeName]}`;
+          const themePath = `/packs-dev/${themes[themeName]}`;
+          const isThemeTokenRequest = req.url.includes('_theme_tokens');
+          req.url = isThemeTokenRequest
+            ? themePath.replace('styles/', 'styles_new/')
+            : themePath;
         }
         next();
       });
@@ -77,7 +85,7 @@ export function MastodonThemes(): Plugin {
       const themePathToName = new Map(
         Object.entries(themes).map(([themeName, themePath]) => [
           path.resolve(jsRoot, themePath),
-          `/themes/${themeName}`,
+          `/themes/${areThemeTokensEnabled() ? `${themeName}_theme_tokens` : themeName}`,
         ]),
       );
       const themeNames = new Set<string>();
@@ -140,6 +148,7 @@ async function loadThemesFromConfig(root: string) {
       console.warn(`Invalid theme path "${themePath}" in themes.yml, skipping`);
       continue;
     }
+
     themes[themeName] = themePath;
   }
 
@@ -151,7 +160,7 @@ async function loadThemesFromConfig(root: string) {
 }
 
 function pathToThemeName(file: string) {
-  const basename = path.basename(file);
+  const basename = path.basename(file.replace('_theme_tokens', ''));
   return basename.split(/[.?]/)[0] ?? '';
 }
 
@@ -163,3 +172,12 @@ function isThemeFile(file: string, themes: Themes) {
   const basename = pathToThemeName(file);
   return basename in themes;
 }
+
+function areThemeTokensEnabled() {
+  const raw = process.env.EXPERIMENTAL_FEATURES ?? '';
+  const features = raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  return features.includes('theme_tokens');
+}