stack-in-card: 'keep: margin: false' is not respected for inserted stack

Checklist:

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

Release with the issue: 0.2.0

Last working release (if known):

Browser and Operating System: Chrome, Win10x64

Description of problem:

If the ‘keep: margin: false’ is set then the margin between card is supposed to be 0. It works for two Entities cards:

  - type: custom:stack-in-card
    mode: vertical
    keep:
      background: true
      box_shadow: false
      margin: false
      outer_padding: false
      border_radius: false
    cards:
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: red;
           }
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: green;
           }

image

But if the 2nd card is stack-in-card, then the margin is present anyway - look at the margin-top:

  - type: custom:stack-in-card
    mode: vertical
    keep:
      background: true
      box_shadow: false
      margin: false
      outer_padding: false
      border_radius: false
    cards:
     - type: entities
       entities:
         - sun.sun
       card_mod:
         style: |
           ha-card {
             background-color: red;
           }
     - type: custom:stack-in-card
       mode: horizontal
       keep:
         background: true
         box_shadow: false
         margin: false
         outer_padding: false
         border_radius: false
       cards:
         - type: entities
           entities:
             - sun.sun
           card_mod:
             style: |
               ha-card {
                 background-color: red;
               }
         - type: entities
           entities:
             - sun.sun
           card_mod:
             style: |
               ha-card {
                 background-color: green;
               }

image

image

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


Additional information:

About this issue

Most upvoted comments

For anyone finding this, the solution for getting a clean no borders with this plugin and card mod is:

- type: custom:stack-in-card
  title: Air Conditioners
  mode: vertical
  card_mod:
    style:
      hui-vertical-stack-card $: |
        div#root > * {
          margin: 0px !important;
          --ha-card-border-width: 0;
        }
# elided the rest of the config...

Before: image

After: image

EDIT: Probably need to tweak the paddings to get it seamless, but you get the idea.