ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(producer): preserve @import rules during CSS composition scoping

Browse Source 
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>
This commit is contained in:
Miguel Ángel
2026-03-24 18:51:05 -04:00
co-authored by Claude Opus 4.6
parent e6a643ac1d
commit d3c6228d89
7 changed files with 198 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/tests/css-import-scoping/src/index.html
+25
View File
@@ -0,0 +1,25 @@
<!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>