Templates do not work in `style` when it's a string

[tylermenezes]

Checklist:

• [X] I updated to the latest version available
• [X] I cleared the cache of my browser

Release with the issue: 1.3.6

Last working release (if known): unknown

Browser and Operating System: Mac OS / Firefox

Description of problem:

Templates do not work in style if it's a string, it throws an error.

This seems to be because the string is passed unchanged into the last line of evaluateTemplate, which is:

eval(varDef + template.substring(2, template.length - 1))

Javascript errors shown in the web inspector (if applicable):

Uncaught (in promise) SyntaxError: unexpected token: '{'
    _evaluateTemplate config-template-card.js:912
    _evaluateConfig config-template-card.js:860
    _evaluateConfig config-template-card.js:849
    ...

Additional information:

Example of a failing case:

- type: custom:config-template-card
  variables:
    OCCUPIED: states['binary_sensor.living_room_all_occupancy'].state === 'on'
  entities:
    - binary_sensors.living_room_all_occupancy
  card:
    type: iframe
    url: https://go2rtc.weirdvector.xyz/stream.html?src=living_room
    aspect_ratio: 56.5%
    style: 'ha-card { border-width: ${''10px''} !important; }'

Throws an error because eval(varDef + template.substring(2, template.length - 1)) is turned into eval("OCCUPIED = vars['OCCUPIED'];-card { border-width: ${''10px''} !important;")

Works as intended:

- type: custom:config-template-card
  variables:
    OCCUPIED: states['binary_sensor.living_room_all_occupancy'].state === 'on'
  entities:
    - binary_sensors.living_room_all_occupancy
  card:
    type: iframe
    url: https://go2rtc.weirdvector.xyz/stream.html?src=living_room
    aspect_ratio: 56.5%
    style: 'xx`ha-card { border-width: ${''10px''} !important; }`x'

[ildar170975]

I will put is super simple: this is wrong:

type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  entities:
    - entity: sun.sun
      name: >-
        Currently ${states['sun.sun'].state}

and throws an error:

Uncaught (in promise) SyntaxError: Unexpected identifier '$'
    at ConfigTemplateCard._evaluateTemplate (config-template-card.js?hacstag=172177543136:937:28)
    at config-template-card.js?hacstag=172177543136:877:40
    at Array.forEach (<anonymous>)
    at ConfigTemplateCard._evaluateConfig (config-template-card.js?hacstag=172177543136:866:32)
    at ConfigTemplateCard._evaluateArray (config-template-card.js?hacstag=172177543136:891:33)
    at config-template-card.js?hacstag=172177543136:871:40
    at Array.forEach (<anonymous>)
    at ConfigTemplateCard._evaluateConfig (config-template-card.js?hacstag=172177543136:866:32)
    at ConfigTemplateCard.render (config-template-card.js?hacstag=172177543136:824:23)
    at ConfigTemplateCard.update (config-template-card.js?hacstag=172177543136:265:321)

And this is correct:

type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  entities:
    - entity: sun.sun
      name: >-
        ${'Currently ' + states['sun.sun'].state}

Seems that currently the whole option's value (a string) should be a template, could be by a design. Check https://github.com/iantrich/config-template-card/pull/110 which allows to use templates along with strings.

So, what we can do is:

• close this issue since it is not a bug - but a result of a design;
• or transform it to FR - which may be probably solved by that PR.

[ildar170975]

As for your code:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_number
  - type: custom:config-template-card
    entities:
      - input_number.test_number
    card:
      type: iframe
      url: http://yahoo.com
      style: >-
        ${ 'ha-card { border-width: ' + states['input_number.test_number'].state + 'px !important;' }

[ildar170975]

Explanations were provided. No feedback from OP. Closed.