Support CSS custom property retrieval when evaluated at runtime

[alexlemaire]

Is your feature request related to a problem? Please describe.
Right now, if we refactor a styles getter from an element to go from

static get styles () {
    return css`
      :host {
        display: inline-block;
        --icon-size: 48px;
        --background-color: white;
        --outline-color: #333;
        --head-color: royalblue;
        --date-color: #333;
        --month-color: white;
        --day-color: #333;
      }
  `
}

to

static get styles () {
    return css`
      ${getHostStyle()}
  `
}

with getHostStyle being a function which returns a css template string containing the previous style for host, we end up being unable to retrieve the custom CSS properties from the styles getter.

This is due to the fact that in the current implementation, the CSS retrieval logic reads our styles getter at build and not at runtime. Therefore it doesn't see the resolution of any functions we may store styles in.

Describe the solution you'd like
We should figure out how to resolve the style as it would at runtime instead of statically checking the build files.