bug(platform-server): dynamic styles do not get converted from camelCase to kebab-case

[CaerusKaru]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Using HostBinding or NgStyle with platform-server appends the style to the correct element, but does not convert the name of the style to kebab-case as platform-browser does. This leads the browser to not recognize the name of the style.

Expected behavior

The dynamically applied styles should be transferred to the DOM as kebab-case, not camelCase.

Minimal reproduction of the problem with instructions

1. Create a component and add a HostBinding for marginRight
2. Use @angular/cli to build a commonjs package
3. Render the package using nguniversal/express-engine
4. Turn off JS to prevent bootstrapping
5. Inspect the DOM to find the component with the incorrect styles

What is the motivation / use case for changing the behavior?

If a user has JS disabled, or if bootstrapping is particularly slow, UX is greatly impacted as styles are not correctly applied throughout the DOM.

Environment

Angular version: 5.0.0-beta.7


Browser:
- [ x ] Chrome (desktop) version 61.0.3163.79
 
For Tooling issues:
- Node version: 8.5.0  
- Platform: Linux 

[Toxicable]

Can confirm on v4.4.1 and v 5.0.0-beta.7

 <my-comp style="marginRight:2px;">my template</my-comp>

As a work around you can do @HostBinding('style.margin-right') which works in my testing

To Reproduce:

• git clone https://github.com/angular/universal-starter
• cd cli
  add to app.component.ts

@Component({
  selector: 'my-comp',
  template: 'my template'
})
export class MyComp{
  @HostBinding('style.marginRight') margin = '2px';
}

• add <my-comp></my-comp> inside AppComponet's template with MyComp added to the AppModule's declarations
• npm run build:static

[CaerusKaru]

It looks like the problem is here:

angular/packages/platform-server/src/parse5_adapter.ts

Lines 457 to 472 in 6279e50

	/** @internal */
	_writeStyleAttribute(element: any, styleMap: any) {
	let styleAttrValue = '';
	for (const key in styleMap) {
	const newValue = styleMap[key];
	if (newValue) {
	styleAttrValue += key + ':' + styleMap[key] + ';';
	}
	}
	element.attribs['style'] = styleAttrValue;
	}
	setStyle(element: any, styleName: string, styleValue?: string|null) {
	const styleMap = this._readStyleAttribute(element);
	(styleMap as any)[styleName] = styleValue;
	this._writeStyleAttribute(element, styleMap);
	}

In the browser implementation, the code looks like this, where the style is applied directly to the element, thus leveraging the browser's implicit transformation from camel case to dash case:

angular/packages/platform-browser/src/dom/dom_renderer.ts

Lines 182 to 189 in 1092292

	setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
	if (flags & RendererStyleFlags2.DashCase) {
	el.style.setProperty(
	style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
	} else {
	el.style[style] = value;
	}
	}

[jonbonraki]

Is any Body looking into this?

[CaerusKaru]

If @vikerman is too swamped, I can probably get a PR in early next week. But I think he's the only one assigned at the moment.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}