mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
Miguel ÁngelandClaude Opus 4.6
d3c6228d89
scopeCssToComposition corrupted @import url() rules because they have
no {} block. The selector regex ([^{}@]+)\{ treated the text after @
as a selector, producing invalid CSS like:
@[data-composition-id="x"] import url('...')
This broke font loading, CSS variable resolution, and all composition
styling in rendered output.
Fix: extract @import rules before running the scoping regex, then
prepend them back unmodified.
Also adds:
- Regression test fixture (css-import-scoping)
- Common-mistakes docs: autoplay/loop, GSAP TextPlugin, sub-composition
positioning
- Format fix for hyperframeLinter.ts
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
26 lines
904 B
HTML
26 lines
904 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1080, height=1920">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<style>
|
|
body { margin: 0; background: #000; width: 1080px; height: 1920px; overflow: hidden; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="root" data-width="1080" data-height="1920" data-duration="5"
|
|
style="position:absolute;width:1080px;height:1920px;">
|
|
<div data-composition-id="overlay"
|
|
data-composition-src="compositions/overlay.html"
|
|
data-start="0" data-track-index="1"
|
|
data-width="1080" data-height="1920"></div>
|
|
</div>
|
|
<script>
|
|
const tl = gsap.timeline({ paused: true });
|
|
tl.set({}, {}, 5);
|
|
window.__timelines["root"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|