Repository navigation
Description
Describe the bug
Hi! I'm learning hyperframes, and for that I usually do things manually (w/o AI, so "I read the code" (c)) to get the understanding of how tools works, and test all its capabilities.
And I think I found an issue.
I have this composition file I want to reuse:
<template>
<section
id="required-id"
data-composition-id="intro-comp"
data-start="0"
data-width="1500"
data-height="900"
data-hf-id="hf-ku95"
>
<style>
/* Don't use comp ID: it is removed or something */
/* All good */
[data-composition-id="intro-comp"] h1 {
text-align: center;
color: orangered;
font-size: 5rem;
}
/* Just ignored */
[data-composition-id="intro-comp"] {
.title {
color: brown;
text-align: center;
font-size: 6rem;
}
}
</style>
<h1 data-hf-id="hf-tvzt">Hyperframes</h1>
<div data-hf-id="hf-xgyd" class="title">Welcome!</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("h1", { opacity: 0, y: -50, duration: 1 });
tl.from(".title", { opacity: 0, y: -50, duration: 1 });
window.__timelines["intro-comp"] = tl;
</script>
</section>
</template>But, the .title selector is just ignored :( This means the [data-composition-id="intro-comp"] selector must be repeated for each tag I want to style (and there are a lot) and that makes code really hard to read (old-school times :) )
Hyperframes version: 0.7.66
BTW, If I try to use body tag instead of template (to check the layout in browser) the rendering fails with: The file has no <template> or <body> content to render\n\nCheck that each file referenced by data-composition-src contains valid HTML with a <template> or <body> containing a [data-composition-id] element.
Oh, and another one: linter or checker wants me to add data-layout-allow-overlap in some cases, but there's no such attribute listed in docs.
Thank you for your work!
Link to reproduction
https://lvh.me
Steps to reproduce
See the code
Expected behavior
See the ticket description
Actual behavior
See the ticket description
Environment
Hyperframes version: `0.7.66`
CHrome 150
Node: 24Additional context
No response
Activity
fix(core): preserve nested-rule selectors in composition CSS scoping (#…
fix(core): preserve nested-rule selectors in composition CSS scoping (h…