Commands being ignored in Custom Styles/Templates

[abwino]

Describe the bug
when trying to change multiple sub button icon elements, it seems that only the first commands are actioned, any subsequent commands are ignored.

To Reproduce
See my YAML, this will reproduce the behaviour each time. Only sub button 1 will be affected.

Expected behavior
For all lines of code to be executed

YAML

.bubble-sub-button-1 > ha-icon {  color:
${hass.states['light.breakfast_room_door_outside'].state
=== 'on' ? 'goldenrod' : 'grey'} !important;

.bubble-sub-button-2 > ha-icon {  color:
${hass.states['light.courtyard_lights'].state
=== 'on' ? 'goldenrod' : 'grey'} !important;

Informations (please complete the following information):

• OS: MACOS
• Browser/App: Safari
• Bubble Card version: 2.4.0
• Home Assistant version: 2025.1.4

[MrBearPresident]

Your code doesn't look right.

Try this:

.bubble-sub-button-1 > ha-icon {  
  color: ${hass.states['light.breakfast_room_door_outside'].state === 'on' ? 'goldenrod' : 'grey'} !important;
} 

.bubble-sub-button-2 > ha-icon { 
  color: ${hass.states['light.courtyard_lights'].state === 'on' ? 'goldenrod' : 'grey'} !important;
}