fix(cli): handle STYLE and REGION blocks unsupported by node-webvtt

Author: AndreyHirsa

packages/cli/src/cli/loaders/index.spec.ts

@@ -2645,6 +2645,98 @@ Another cue
       expect(Object.values(data)).toContain("Another cue");
       expect(Object.values(data)).not.toContain("Hello world!");
     });
+
+    it("should handle vtt files with STYLE blocks", async () => {
+      setupFileMocks();
+
+      const input = `
+WEBVTT
+
+STYLE
+::cue(.heading) {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+00:00:00.000 --> 00:00:01.000
+Hello world!
+
+00:00:30.000 --> 00:00:31.000
+Another cue
+      `.trim();
+
+      const expectedOutput = {
+        "0#0-1#": "Hello world!",
+        "1#30-31#": "Another cue",
+      };
+
+      mockFileOperations(input);
+
+      const vttLoader = createBucketLoader("vtt", "i18n/[locale].vtt", {
+        defaultLocale: "en",
+      });
+      vttLoader.setDefaultLocale("en");
+      const data = await vttLoader.pull("en");
+
+      expect(data).toEqual(expectedOutput);
+    });
+
+    it("should preserve STYLE blocks in push output", async () => {
+      setupFileMocks();
+
+      const input = `
+WEBVTT
+
+STYLE
+::cue(.heading) {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+00:00:00.000 --> 00:00:01.000
+Hello world!
+      `.trim();
+
+      mockFileOperations(input);
+
+      const vttLoader = createBucketLoader("vtt", "i18n/[locale].vtt", {
+        defaultLocale: "en",
+      });
+      vttLoader.setDefaultLocale("en");
+      await vttLoader.pull("en");
+      await vttLoader.push("es", { "0#0-1#": "¡Hola mundo!" });
+
+      const written = (fs.writeFile as any).mock.calls[0][1] as string;
+      expect(written).toContain("STYLE");
+      expect(written).toContain("::cue(.heading)");
+      expect(written).toContain("¡Hola mundo!");
+    });
+
+    it("should handle vtt files with REGION blocks", async () => {
+      setupFileMocks();
+
+      const input = `
+WEBVTT
+
+REGION
+id:sidebar
+width:30%
+lines:3
+
+00:00:00.000 --> 00:00:01.000
+Hello world!
+      `.trim();
+
+      mockFileOperations(input);
+
+      const vttLoader = createBucketLoader("vtt", "i18n/[locale].vtt", {
+        defaultLocale: "en",
+      });
+      vttLoader.setDefaultLocale("en");
+      const data = await vttLoader.pull("en");
+
+      expect(data).toEqual({ "0#0-1#": "Hello world!" });
+    });
   });
 
   describe("XML bucket loader", () => {

packages/cli/src/cli/loaders/vtt.ts

@@ -2,16 +2,44 @@ import webvtt from "node-webvtt";
 import { ILoader } from "./_types";
 import { createLoader } from "./_utils";
 
+// node-webvtt doesn't handle STYLE/REGION blocks — strip them before parsing
+function extractUnsupportedBlocks(input: string): {
+  cleaned: string;
+  blocks: string[];
+} {
+  const parts = input.replace(/\r\n/g, "\n").split("\n\n");
+  const blocks: string[] = [];
+  const kept: string[] = [];
+
+  const unsupportedRegex = /^(?:STYLE|REGION)/;
+
+  for (const part of parts) {
+    const firstLine = part.trimStart().split("\n", 1)[0];
+
+    if (unsupportedRegex.test(firstLine)) {
+      blocks.push(part);
+    } else {
+      kept.push(part);
+    }
+  }
+
+  return { cleaned: kept.join("\n\n"), blocks };
+}
+
 export default function createVttLoader(): ILoader<
   string,
   Record<string, any>
 > {
+  let savedBlocks: string[] = [];
+
   return createLoader({
     async pull(locale, input) {
       if (!input) {
         return ""; // if VTT file does not exist yet we can not parse it - return empty string
       }
-      const vtt = webvtt.parse(input)?.cues;
+      const { cleaned, blocks } = extractUnsupportedBlocks(input);
+      savedBlocks = blocks;
+      const vtt = webvtt.parse(cleaned)?.cues;
       if (Object.keys(vtt).length === 0) {
         return {};
       } else {
@@ -42,7 +70,12 @@ export default function createVttLoader(): ILoader<
         cues: output,
       };
 
-      return webvtt.compile(input);
+      const compiled = webvtt.compile(input);
+      if (savedBlocks.length === 0) return compiled;
+
+      // Re-insert STYLE/REGION blocks after the WEBVTT header
+      const [header, ...rest] = compiled.split("\n\n");
+      return [header, ...savedBlocks, ...rest].join("\n\n");
     },
   });
 }