Open Frank3K opened 3 years ago
This can also happen with inline style attributes!
Given this input:
function example(width) {
return html`<div style="--width: ${width}px"></div>`;
}
The output is:
function example(width) {
return html`<div style="--width:${width}"></div>`;
}
Here's a code sandbox showing the issue https://codesandbox.io/s/minify-html-literals-loses-css-units-40yhjz?file=/src/index.js
In the above case, a slight tweak to use template literals for the attribute value avoids the issue, and now the output is as expected
Input:
function example(width) {
return html`<div style=${`--width: ${width}px`}></div>`;
}
Output:
function example(width) {
return html`<div style="${`--width: ${width}px`}"></div>`;
}
Given the following input:
The expected output is:
Instead, the unit (
s
) is dropped in the actual output:In comparison, the unit is preserved when there are no template literals inside: