Inline styles with quotes are incorrectly stripped

[intellix]

🐞 Bug report

What modules are related to this issue?

• [ ] aspnetcore-engine
• [ ] builders
• [ ] common
• [ ] express-engine
• [ ] hapi-engine

Is this a regression?

No

Description

A clear and concise description of the problem...

🔬 Minimal Reproduction

Given:

<div [ngStyle]="stylesOne"></div>
<div [ngStyle]="stylesTwo"></div>

stylesOne = {
  gridTemplate: '"a b c"',
};
stylesTwo = {
  gridTemplate: "'a b c'",
};

This is produced:

<div style="grid-template: a b c">
<div style="grid-template: a b c">

When either of these would be expected ("a b c" need to be wrapped in quotes). This is handled correctly by browser-side Angular, but not Universal:

<div style='grid-template: "a b c"'>
<div style="grid-template: 'a b c'">

🌍 Your Environment

ngular CLI: 13.1.2
Node: 14.18.1
Package Manager: yarn 1.22.4
OS: darwin x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/flex-layout            12.0.0-beta.35
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            7.5.1
typescript                      4.5.4
webpack                         5.65.0

I guess this problem could be from Domino, but not sure how to write it there, in case it's actually Angular related

[intellix]

Temporary workaround (the only one that works out of everything that I've tried):

header.component.ts:

@ViewChildren('grid', { read: ElementRef }) gridRefs: QueryList<HTMLElement>;

stylesOne = {
  gridTemplate: '"a b c"',
};

ngAfterViewInit() {
  this.gridRefs.changes.pipe(
    startWith(this.gridRefs),
    untilDestroyed(this),
  ).subscribe(gridRefs => {
    for (const gridRef of gridRefs) {
      Object.assign(gridRef.nativeElement.style, this.stylesOne);
    }
  });
}

header.component.html:

<header #grid>
  <div style="grid-area: a">a</div>
  <div style="grid-area: b">b</div>
  <div style="grid-area: c">c</div>
</header>

[CaerusKaru]

My instinct says this is a problem in Domino's CSS parser, due to a possibly outdated model of grid-template CSS syntax, shown here. We'll have to confirm this, of course, and then decide how to deal with this in Domino, or elsewhere. I'm a little surprised this hasn't come up until now, though that doesn't mean it hasn't been this way since the beginning.

[angular-automatic-lock-bot[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.}