Freeze problem with nested style attribute

[sonyboypatrick]

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): GUI with Yaml Code

What I am doing: I use cardmod in combination with the custom:mushroom-template-card to create a "room card" (I copied some parts from the internet and it exactly looks like i want it to be)

What I expected to happen: everything should work and the browser shouldnt "freeze"

What happened instead: the browser "freezes" after some minutes, I'm not able to click on settings or anything like that

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.test
    icon: mdi:test-tube
    primary: Problem
    layout: horizontal
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            position: absolute;
            left: 0;
            top: 70px;
            width: 100%;
            text-align: center;
          }
          .primary {
            font-size: 25px !important;
            width: 100%;
            color: var(--primary-text-color) !important;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -35px;
            top: 63px;
          }
        .: |
          :host {
            --mush-icon-size: 130px;
          }
        style: |
          ha-card {
            width: 100%; !important;
            background: none;
          }



# End of code

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

---

Update: I've found my Problem and i know how to fix it, maybe this helps somebody else. My Problem was a nested style attribute. I just removed the second "style: |" and everything works, no freezes anymore.

    card_mod:
      style:
          #some code here
        style: |
         #some code here

the new example code looks like this:

# The least amount of code possible to reproduce my error

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: light.test
    icon: mdi:test-tube
    primary: No Problem
    layout: horizontal
    card_mod:
      style:
        mushroom-state-info$: |
          .container {
            position: absolute;
            left: 0;
            top: 70px;
            width: 100%;
            text-align: center;
          }
          .primary {
            font-size: 25px !important;
            width: 100%;
            color: var(--primary-text-color) !important;
          }
        mushroom-shape-icon$: |
          .shape {
            position: relative;
            left: -35px;
            top: 63px;
          }
        .: |
          :host {
            --mush-icon-size: 130px;
          }
          ha-card {
            width: 100%; !important;
            background: none;
          }



# End of code

[kulmegil]

+1 I have started encountering similar if not the same issue. With the exception I have used those selectors (that doesn't always resolves to element) intentionally - to make my code more universal and apply to different cards (it's applied by BC template). And now I'm being punished with hanged interface.

It looks like Card Mod no longer handles situation when child selectors don't resolve to actual element. Looking at the source code it should give up after a few attempts but it looks like it goes into infinite loops instead. I suspect problems lies in the findParentCardMod() and/or _style_child() method.

ps Trying to debug Babel generated JS code is a nightmare, is there a proper debug build with maps to typscript code)