extra_styles not imported via configuration template when in html <p>

[Mariusthvdb]

having all of my @Keyframes animations in a separate extra_styles template, allows me to add animations to all options in button-card, without having to declare these animations in each and every button-card under extra_styles.

Today, I noticed there is an exception to this, when using the following structure:

marquee:
  entity: sensor.marquee_alerts
#   template: extra_styles #does not work on the p extra_styles..??
    etcetc
    custom_fields:
      marquee:
        - font-family: led_counter-7
#         - animation: scroll var(--scroll-time) linear infinite, blink 2s infinite; # not here, only animate the <p></p>
  custom_fields:
    marquee: >
      [[[ return `<p>${variables.marquee}</p>`; ]]]
  extra_styles: |
    p {
      color: var(--alert-color);
      font-weight: bold;
      animation: scroll var(--scroll-time) linear infinite, blink 2s infinite;
      animation-delay: 1s;
      /*animation-direction: reverse;*/
    }
    @keyframes scroll {
      0% {transform: translateX(90%);}
      100% {transform: translateX(var(--trans-x));}
    }

I have the

extra_styles:
  extra_styles: |
    @keyframes scroll {
      0% {transform: translateX(90%);}
      100% {transform: translateX(var(--trans-x));}
    }
    @keyframes spin-back {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(-360deg);}
    }
    @keyframes etcetc

in my template extra_styles, but as you see I have that template commented, and now explicitly create it at the bottom, to be used next to the builtin blink.

somehow this is a first, and I cant explain how and why

actual button:

full button yaml (sorry cant find how to 'hide' this in a details tag in GitHub ):

marquee:
  entity: sensor.marquee_alerts
#   template: extra_styles #does not work on the p extra_styles..??
  show_icon: false
  variables:
    count: >
      [[[ return entity.state; ]]]
    phrase: >
      [[[ return entity.state == 1 ? 'Alert:' : 'Alerts:'; ]]]
    marquee: >
      [[[ return entity.attributes.marquee; ]]]
    lengte: >
      [[[ return Math.round(entity.attributes.marquee.length); ]]]
    snelheid: >
       [[[ return states['input_number.marquee_snelheid'].state; ]]]
  styles:
    grid:
      - grid-template-areas: '"n marquee" '
      - grid-template-columns: max-content 1fr
    card:
      - background: var(--header-background)
      - color: var(--text-color-off)
      - font-size: 20px
      - font-weight: 400
      - padding: 12px
      - height: 48px
    name:
#       - justify-self: left
#       - text-align: center
      - padding-right: 4px
      - font-family: led_counter-7
    custom_fields:
      marquee:
        - font-family: led_counter-7
#         - animation: scroll var(--scroll-time) linear infinite, blink 2s infinite;
#         - text-align: center

# create local vars to inject in extra_styles
        - --scroll-time: >
            [[[ return variables.snelheid*variables.lengte/100 + 's'; ]]]
  #       - animation: scroll 5s linear infinite # not here because overflows name/full button
        - --trans-x: >
            [[[ return '-' + 100*(variables.lengte/variables.available) + '%' ; ]]]
  name: >
    [[[ return variables.count + ' ' + variables.phrase; ]]]
  custom_fields:
    marquee: >
      [[[ return `<p>${variables.marquee}</p>`; ]]]
  extra_styles: |
    p {
      color: var(--alert-color);
      font-weight: bold;
      animation: scroll var(--scroll-time) linear infinite, blink 2s infinite;
      animation-delay: 1s;
      /*animation-direction: reverse;*/
    }
    @keyframes scroll {
      0% {transform: translateX(90%);}
      100% {transform: translateX(var(--trans-x));}
    }

[RomRider]

I'm not really sure I understand your problem.

However extra_styles is overridden when defined in a template and in the card at the same time, not merged. So if it's defined in the template and in the card, only the card piece is used.

Maybe it's something we could improve...

[RomRider]

Also, if you want to use any style defined in extra_styles in a nested card, you have to define the extra style also on the nested card else it won't be available to the nested card because of the shadow-dom. Maybe that's what you wanted to show...

[Mariusthvdb]

Suppose it indeed is a matter of merging, like we can do in regular styles.

[RomRider]

PR #1108 should implement that

[Mariusthvdb]

Wow, thanks!

[Mariusthvdb]

can confirm extra_styles configuration template containing the 'scroll' keyframes, is now (v 7.0.0) correctly merged, also on the

  extra_styles: |
    p {
      color: var(--alert-color);
      font-weight: bold;
      animation: scroll var(--scroll-time) linear infinite, blink 2s infinite;
      animation-delay: 1s;
      /*animation-direction: reverse;*/
    }

and the built-in 'blink' working fine together with that.

sweet, thank you very much!