Style gone after page refresh

My Home Assistant version: core-2021.11.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Using card-mod to apply different colors to badges based on availability (home / not home)

  - entity: device_tracker.82_98_86_f8_67_aa
    card_mod:
      style: |
        :host {
          --label-badge-red: {% if is_state('device_tracker.82_98_86_f8_67_aa', 'home') %} green {% else %} grey {% endif %};
        } 
  - entity: device_tracker.18_01_f1_4a_a0_52
    style: |
      :host {
        --label-badge-red: {% if is_state('device_tracker.18_01_f1_4a_a0_52', 'home') %} green {% else %} grey {% endif %};
      } 

What I expected to happen: See different colors for badges

After page refresh in browser style is gone. badges are just red:

What happened instead: Correct colors are sometimes visible but after a page refresh they are just red. Happens with Edge, Chrome and on Android Mobile.

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

      - entity: device_tracker.82_98_86_f8_67_aa
        card_mod:
          style: |
            :host {
              --label-badge-red: {% if is_state('device_tracker.82_98_86_f8_67_aa', 'home') %} green {% else %} grey {% endif %};
            } 
      - entity: device_tracker.18_01_f1_4a_a0_52
        style: |
          :host {
            --label-badge-red: {% if is_state('device_tracker.18_01_f1_4a_a0_52', 'home') %} green {% else %} grey {% endif %};
          } 

# End of code

Error messages from the browser console:

card-mod.js?hacstag=1909275243013:1

   The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information.

(anonym) @ card-mod.js?hacstag=1909275243013:1

---

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.

[tabnul]

I had exact this issue , sometimes the style was applied, sometimes not. When i edited the style, and stayed in the ‘edit dashboard view’ all was fine. After i went back to the normal view (click cross) it went wrong.

I got it structurally fixed after installing 3.1.0 and making sure the performance improvement setting is set correctly, for HACS:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

[Kedryn]

I’m experiencing exact same problem. Some cards gets the right colors when refreshing, some don’t, but in the code edit windows, colors are always applied.

HA 2022.2 and card_mod 3.1.2