Stencil: inline style background image is not working in stencil 0.10.2

[boradakash]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
I am using inline style background-image in stencil web component but I notice that it is not setting background image after I upgraded stencil version to 0.10.2

Expected behavior:
It should set background-image to dom

Steps to reproduce:
dependencies and devDependencies are as following

"dependencies": {
    "@ionic/core": "4.0.0-alpha.9",
    "@stencil/core": "^0.10.2",
    "@stencil/router": "^0.2.4"
  },
  "devDependencies": {
    "@stencil/sass": "0.0.5",
    "@types/jest": "^21.1.1",
    "jest": "^21.2.1"
  }

Related code:

import { Component, Prop } from "@stencil/core";

@Component({
  tag: "event-item-image",
  styleUrl: "event-item-image.scss"
})
export class EventItemImage {
  @Prop() url: string;
  @Prop() text: string;

  render() {
    return (
      <div>
        <div
          class="event-item"
          style={{ backgroundImage: "url(" + this.url + ")" }}
        >
          {this.text ? (
            <div class="over-text">
              <h1>{this.text}</h1>
            </div>
          ) : (
            ""
          )}
          </div>
      </div>
    );
  }
}

Other information:

[corysmc]

Same thing happens for style={{marginBottom: '1px'}}

Worth noting, you can get around this issue by using style={{'margin-bottom': '1px'}}

[manucorporat]

We recently changed how the styles are applied to the component in order to have first class support for CSS variables, in addition the new API is easier to understand and more consistent, since it matches the real CSS properties you would usually write in a .css file:

style={{
   'font-size': '12px',
   '--my-varariable': value,
}}

Agreed it was inconvenient breaking change, but we really had to do it. Thinking of adding a diagnostic warning during dev, so this will not break in silent ways.