Freeze problem with nested style attribute

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

thomasloven / lovelace-card-mod

Freeze problem with nested style attribute #343