css-attribute without template does not translate to style-attribute

[vuorinem]

I'm submitting a bug report

• Library Version: 1.0.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 4.4.6

• NPM Version: 3.10.2

• JSPM OR Webpack AND Version JSPM 0.16.32

• Browser: all

• Language: all

Current behavior: Css attribute in template <div css="border: 1px solid red"></div> is not translated by Aurelia. This works fine: <div css="border: 1px solid red; ${anything}">.

See https://gist.run/?id=1bca105623d3c88400738985d008fc2e

Expected/desired behavior:

• What is the expected behavior? Translate css attribute into style attribute.

• What is the motivation / use case for changing the behavior? IE only supports bindings in css attribute. Currently any inline styles with bindings need to use the css-attribute, and without bindings the style-attribute, which is confusing and error-prone.

[jdanyow]

@EisenbergEffect this issue keeps coming up, there's (understandable) confusion about when to use css vs style. Currently, the content of a css attribute is applied to the element's style when the css attribute has a binding command or contains interpolation. This is because the code that maps css to style is in the ObserverLocator.

To resolve this, I think we need to map css attributes to style at a higher level. The contents of the css attribute could moved into the style attribute if the following criteria are met:

1. The css attribute is not using a binding command (eg css.bind / css.one-time / etc)
2. The css attribute does not contain interpolation (eg css="${foo} bar baz")

If the criteria are not met we'd create a style attribute binding.

This seems like the kind of logic that belongs in templating-binding but it will be difficult to add there without API changes. It would be pretty easy to add this logic in templating's ViewCompiler however.

What do you think?

[EisenbergEffect]

I definitely think we need to address this issue. The templating-binding repo is probably the correct place to put it. My question is, could we do that without introducing a breaking change? If not, could we put it into the templating repo without making a breaking change, but then plan to move it elsewhere whenever we get around to 2.0?

Let me know what you think.

[Alexander-Taran]

We can add a note to docs with this pr. There is a paragraph changed and example added. Needs review. I'm not sure I got it right.

[EisenbergEffect]

Looks good. Merged.