ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 07:19:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): figma mapper prefixes digit-leading element ids

Browse Source 
slugify("3D Object - Headphones") produced id="3d-object-headphones" —
valid HTML, but querySelector("#3d-…") throws (CSS idents cannot start
with a digit), which kills GSAP targeting and figma-motion translation
against imported components. uniqueSlug now prefixes digit-leading slugs
("n3d-object-headphones"). Found translating a real Figma Motion timeline.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
2026-07-09 00:47:04 -07:00
co-authored by Claude Fable 5
parent dfe63af3ae
commit 63ff046c30
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/figma/nodeToHtml.ts
+6 -1
View File
@@ -162,7 +162,12 @@ interface RenderContext {
}
function uniqueSlug(ctx: RenderContext, name: string): string {
const base = slugify(name);
const raw = slugify(name);
// A digit-leading id ("3D Object" → "3d-object") is valid HTML but not a
// valid CSS selector — querySelector("#3d-object") throws, which breaks
// GSAP targeting and figma-motion translation. Prefix so ids stay
// selector-safe.
const base = /^[0-9]/.test(raw) ? `n${raw}` : raw;
let slug = base;
let n = 2;
while (ctx.usedSlugs.has(slug)) slug = `${base}-${n++}`;