Doesn't seem to be a way to set unit-less numerical values for custom properties

[Scott-MacD]

I'm working on a project with lighterhtml and am running into issues with trying to set css custom properties on the style attribute using an object. Tracing back to this library, it looks like it is automatically adding a "px" suffix if the value for a given property is a number and doesn't pass the supplied test for known values.

Specifically what I'm trying to do is set a custom property to control what column an element is in with CSS grid. If I do something like the following:

html`<div class=${someClassName} style=${{["--some-var"]: 2}}></div>`;

it returns an element like the following:

<div class="thing" style="--some-var: 2px"></div>

Which becomes an issue as I can't use a "px" value with grid-column-start: var(--some-var) for example.

[WebReflection]

it's been like this since ever, mostly due the fact el.offsetWidth and friends returns numbers, not strings, and those numbers mean pixels.

html`<div class=${someClassName} style=${{["--some-var"]: '2'}}></div>`;

done, you pass strings whenever you don't want automatic number to pixel conversion, and please note this is documented too, so it's a hell of a breaking change (it does whatever P/React does too)