Markdown and themes - style doesn't stick

[matt8707]

My Home Assistant version:
2021.6.0

My lovelace configuration method (GUI or yaml):
yaml

What I am doing:
styling markdown from themes

What I expected to happen:
style to be applied

What happened instead:
style doesn't apply until I have the dashboard open, and call frontend.reload_themes from a different tab. Next time I open the dashboard the style is gone.

EDIT: Issue started on 2021.6.0, and styling from the card and not from themes works, but impacts performance
https://user-images.githubusercontent.com/36163594/120754416-ea881b80-c50c-11eb-8e5e-2fcf54c446f7.mp4

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
views:
  - title: Home
    cards:
      - type: markdown
        content: |-
          red

          green

          blue


#themes.yaml
card-mod-view-yaml: |
  hui-masonry-view $ hui-markdown-card $ ha-markdown $: |
    p {
      color: green;
    }
    p:first-of-type {
      color: red;
    }
    p:last-of-type {
      color: blue;
    }
# End of code

Error messages from the browser console:
none

---

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

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

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

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

• 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.

[ASNNetworks]

Hi Mattias, sorry if I'm hijacking your ticket. But there is a chance our issues are related. I notice a huge performance issue while running 3.x. It just so happens I use markdown card a lot as well (and button-card). All my styling is done through the cards and not through theme.yaml. Seeing as you state: styling from the card and not from themes works, but impacts performance, I wanted to see if our issues are related. Could be just a coincidence though.

I just created this ticket: #132

[ildar170975]

HA 2022.7.7
card-mod 3.1.5
Chrome, Win10x64

Test theme:

  card-mod-card-yaml: |
    ha-markdown $: |
      p {
        color: green;
      }
      p:first-of-type {
        color: red;
      }
      p:last-of-type {
        color: blue;
      }

    .: |

      ha-card {
        color: cyan;
      }

Test card (storage mode):

type: markdown
content: |-
  red

  green

  blue
title: title

The style is applied:

I do not see any increased CPU load.

Note that I am using card-mod-card-yaml instead of card-mod-view-yaml.