"px" is removed from style attribute in template literal strings (lit-html)

[vmizgiris-equinix]

px is being removed from a style definition in template literal strings (lit-html).

Environment

• clean-css version: 5.3.2
• node.js version: 16.18.1
• operating system: macOS Ventura 13.3.1

Configuration options

var CleanCSS = require('clean-css');
new CleanCSS();

Input CSS

const getSize() {
  return 20;
}

style="--size: ${getSize()}px"

Actual output CSS

style="--size:20"

Expected output CSS

style="--size:20px"

[jakubpawlowicz]

Hi @vmizgiris-equinix - what kind of CSS is it?

[vmizgiris-equinix]

@jakubpawlowicz, sorry - completely jumped my mind to mention this. This is lit-html template code, which in turn is JavaScript template literal strings. For example:

import { html } from 'lit-html';

render() {
  return html`<my-component style="--size: ${getSize()}px"></my-component>`;
}

My code uses the minify-html-literals plugin under the hook which in turn uses clean-css.

I've gotten around this issue by doing style=${style} and set up my style in a variable, but ideally this should work.

(Edited the issue title and description for clarity)

[vmizg]

Looks like there were a few other similar issues raised in the past, both using a similar syntax:

asyncLiz/minify-html-literals#31

asyncLiz/minify-html-literals#46

[vmizg]

@jakubpawlowicz, do you have any updates on this?