support: css custom properties

[manzonif]

There is a way to set css custom properties?

import { style } from '@angular/animations';
const domino = require('domino');

const win = domino.createWindow('<h1>Hello world</h1>', 'http://example.com');
const doc = win.document;

const h1 = doc.querySelector('h1');
h1.style.setProperty('--somekeyword', `10px`);
console.log(h1.style['--somekeyword']);

[intellix]

Having issues trying to do this myself with Angular Universal. Basically doing this:

elementRef.nativeElement.style.setProperty(k, v);

With a CSS var like:

{
  "key": "--grid-gap",
  "value": "1rem"
}

And getting a bucket of errors:

TypeError: Cannot read property 'type' of undefined
    at TokenStream.LA (/Projects/site/node_modules/domino/lib/cssparser.js:810:30)
    at TokenStream.advance (/Projects/site/node_modules/domino/lib/cssparser.js:683:20)
    at Parser._readDeclarations (/Projects/site/node_modules/domino/lib/cssparser.js:3402:42)
    at Parser.parseStyleAttribute (/Projects/site/node_modules/domino/lib/cssparser.js:3581:22)
    at parseStyles (/Projects/site/node_modules/domino/lib/CSSStyleDeclaration.js:23:10)
    at CSSStyleDeclaration.value (/Projects/site/node_modules/domino/lib/CSSStyleDeclaration.js:142:22)
    at CssPropsDirective.ngOnChanges (/Projects/site/dist/apps/whitelabel/server/main.js:32563:23)

[manzonif]

@intellix, try this:

constructor(
    el: ElementRef,
    private renderer: Renderer2,) {
  this.renderer.setStyle(el.nativeElement, '--grid-gap', `1rem`, RendererStyleFlags2.DashCase);```

[cscott]

Domino uses the CSSLint css parser; see ccc98fe. Ideally that support would be added upstream and then brought into domino.

[Burgov]

i'm having issues with this too. I'm using [style.--color]="item.color", and it fails with the same error @intellix mentioned.