Skip to content

Nested CSS just ignored #2721

Closed
Closed

Description

@qd3v

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: 24

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions