Card_Mod CSS erases when selecting 'EDIT' for a section of a dashboard

[Todd-Bec-Smart-Home]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I know card_mod is a custom function, but it is the visual editor that erases the code. If I open the editor in YAML, it retains the card mod css section, but not in visual editor.

It only erases the code of the selected card though, so when I have a horizontal row of cards with card_mod added and the first card is selected, only that card looses it's card mod YAML, the rest of the row retains the code until they are selected (by selecting card number: 1,2,3,4,etc).

Describe the behavior you expected

Any additional YAML code should not be errased.

I don't understand why a CSS editor is not just an existing function of the visual editor in the first place, as this seems to be EXTREMELY popular amongst dashboard creators. But why does it have to erase additional code, it didn't in previous versions.

Steps to reproduce the issue

1. add additional YAML to a card,
2. open the card in visual editor
3. additional code will disapear, as though the visual editor reformats the card each time it is opened?

...

What version of Home Assistant Core has the issue?

2024.12.5

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome and HA app

Which operating system are you using to run this browser?

Windows 10 Pro, iOS on iPhone (always the latest, but not beta)

State of relevant entities

No response

Problem-relevant frontend configuration

cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-climate-card
                entity: climate.living_room
                icon: mdi:air-conditioner
                name: Living Room
                layout: vertical
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 50px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('climate.living_room')=='heat' %}
                      background: rgba(255, 166, 0, 0.2);
                      color: #ffa600;
                      border: 3px solid rgba(255, 166, 0, 0.3);
                      {% elif states('climate.living_room')=='cool' %}
                      background: rgba(0, 115, 255, 0.2);
                      color: #33ceff;
                      border: 3px solid rgba(0, 115, 255, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
              - type: custom:mushroom-climate-card
                entity: climate.master_bedroom
                icon: mdi:air-conditioner
                name: Master Bedroom
                layout: vertical
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 50px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('climate.master_bedroom')=='heat' %}
                      background: rgba(255, 166, 0, 0.2);
                      color: #ffa600;
                      border: 3px solid rgba(255, 166, 0, 0.3);
                      {% elif states('climate.master_bedroom')=='cool' %}
                      background: rgba(0, 115, 255, 0.2);
                      color: #33ceff;
                      border: 3px solid rgba(0, 115, 255, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
              - type: custom:mushroom-climate-card
                entity: climate.lilys_room
                icon: mdi:air-conditioner
                name: Lily's Room
                layout: vertical
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 50px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('climate.lilys_room')=='heat' %}
                      background: rgba(255, 166, 0, 0.2);
                      color: #ffa600;
                      border: 3px solid rgba(255, 166, 0, 0.3);
                      {% elif states('climate.lilys_room')=='cool' %}
                      background: rgba(0, 115, 255, 0.2);
                      color: #33ceff;
                      border: 3px solid rgba(0, 115, 255, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
                entity: light.toilet_light
                icon: mdi:lightbulb-on-outline
                fill_container: true
                layout: vertical
                show_brightness_control: true
                collapsible_controls: true
                name: Toilet
                icon_color: yellow
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 40px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('light.toilet_light')=='on' %}
                      background: rgba(252, 236, 3, 0.2);
                      color: #FCEC03;
                      border: 3px solid rgba(252, 236, 3, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
              - type: custom:mushroom-light-card
                entity: light.kitchen_light
                icon: mdi:lightbulb-on-outline
                fill_container: true
                layout: vertical
                show_brightness_control: true
                collapsible_controls: true
                name: Kitchen
                icon_color: yellow
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 40px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('light.kitchen_light')=='on' %}
                      background: rgba(252, 236, 3, 0.2);
                      color: #FCEC03;
                      border: 3px solid rgba(252, 236, 3, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
              - type: custom:mushroom-light-card
                entity: light.hall_dimmer_light
                icon: mdi:lightbulb-on-outline
                fill_container: true
                layout: vertical
                show_brightness_control: true
                collapsible_controls: true
                name: Hallway
                icon_color: yellow
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 40px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('light.hall_dimmer_light')=='on' %}
                      background: rgba(252, 236, 3, 0.2);
                      color: #FCEC03;
                      border: 3px solid rgba(252, 236, 3, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }
              - type: custom:mushroom-light-card
                entity: light.lounge_light_switch_light_2
                icon: mdi:coach-lamp
                fill_container: true
                layout: vertical
                show_brightness_control: true
                collapsible_controls: true
                name: Porch
                icon_color: yellow
                card_mod:
                  style: |
                    :host {
                      --mush-icon-symbol-size: 30px;
                      --mush-icon-size: 40px;
                      --mush-card-primary-font-size: 14px;
                      --mush-card-secondary-font-size: 14px;
                      --mush-card-primary-font-weight: bold;
                      --mush-card-secondary-font-weight: light;
                    }
                    ha-card {
                      {% if states('light.lounge_light_switch_light_2')=='on' %}
                      background: rgba(252, 236, 3, 0.2);
                      color: #FCEC03;
                      border: 3px solid rgba(252, 236, 3, 0.3);
                      {% else %}
                      border: 3px solid rgba(100, 100, 100, 0.3);
                      {% endif %}
                    }

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[ildar170975]

1. card-mod is a custom plugin.
2. You code contains custom cards & this huge code surely cannot be called a "Minimal working example".
3. Duplicate of closed Card Mod Styles Disappearing #23034.
4. This is a main card-mod issue - card-mod code may be not saved in UI editor - or just auto-deleted after typing - or may not be shown in editor thomasloven/lovelace-card-mod#337.

[Todd-Bec-Smart-Home]

Thanks for the reply,

1. card-mod is a custom plugin.

Card_mod is a custom plugin, yes, but it is the HA visual editor that is removing the code, not the plugin.

2. You code contains custom cards & this huge code surely cannot be called a "Minimal working example".

I wouldn't say huge, but if you can't take an example from the provided code, that's on you. I'm just trying to provide a large enough sample, it doesn't ask for a minimal sample, it asks for YAML, regardless if I feel it is relevant, so I provided a large enough selection.

3. Duplicate of closed Card Mod Styles Disappearing #23034.

Thanks

4. This is a main card-mod issue - card-mod code may be not saved in UI editor - or just auto-deleted after typing - or may not be shown in editor thomasloven/lovelace-card-mod#337.

Thanks

This would be less of an issue if when you click on edit it gave you the option for visual or code editor or code editor was an option in the drop down menu from the three dots on the right, but unfortunately you have to open the entire dashboard in YAML if you want to go straight to code, which is a pain when you want to focus on just one section.

[ildar170975]

I wouldn't say huge, but if you can't take an example from the provided code, that's on you. I'm just trying to provide a large enough sample, it doesn't ask for a minimal sample, it asks for YAML, regardless if I feel it is relevant, so I provided a large enough selection.

I will not be a person go will decide to close this issue. For your future experience - google what MWE is & why it is crucial to provide MWE in issues (even if it is not said explicitly in "Create issue" template).

[karwosts]

I looked at this before and I'm quite sure its from a behavior of card mod injecting code into and messing with the visual editor. Card mod repo is the right place to look at it.

[Todd-Bec-Smart-Home]

google what MWE is & why it is crucial to provide MWE in issues (even if it is not said explicitly in "Create issue" template).

That's your opinion, but I will respond to the requirements of the form how I interpret.

[Todd-Bec-Smart-Home]

I looked at this before and I'm quite sure its from a behavior of card mod injecting code into and messing with the visual editor. Card mod repo is the right place to look at it.

Thanks Karwosts, if that is the case, I appreciate the response.

Is it possible to put on the future features list, the ability to select from the three dots drop down menu, to open in code editor, that way you can bypass the visual editor for a specific section where issues like this occur through opening the visual editor?

[karwosts]

What happens if you add just a non-existant key to your card source, just add like foo: bar to the card definition?

I believe that will also disable the visual editor.

You can request the feature on the forum, I am not sure about how UX designers will feel about it.

[Todd-Bec-Smart-Home]

What happens if you add just a non-existant key to your card source, just add like foo: bar to the card definition?

I believe that will also disable the visual editor.

I will give it a try, the only downside is if the issue is fixed in card_mod I won't know because the editor will always default to code editor. At the moment, I can open the editor and if the card_mod is removed, I just click on cancel and it leaves the code there. I hope at some point there will be a fix and I can go back to editing as previous, using both visual and code for a card_mod card.