Investigate CSS replacements in style attribute

[lukapopijac]

where did the px go?

in.js:

html`<div style="width: ${a}px;"></div>`;

out.js:

html`<div style="width:${a}"></div>`;

Breaks with this message:

(!) Plugin minify-html-literals: splitHTMLByPlaceholder() must return same number of strings as template parts

input.js:

html`
    <div style="--xyz: ${a};">
    </div>
`;

[asyncLiz]

I'm not sure if template literal replacements in the HTML style attribute is something the minifier will support properly. I'll move this to minify-html-literals as a feature request to investigate.

This may also be an issue with general CSS value unit replacements.

My first recommendation as a workaround would be to avoid using the style attribute, since the minifier supports minifying <style> tags and css template literals. If the style attribute must be used, my second recommendation in the meantime would be to replace the entire style attribute instead of part of it (<div style="#{divStyle}">).

[lukapopijac]

Good. Thanks for the recommendations! I will avoid using js placeholders inside <style> as that is an antipattern, as mentioned in lit-html documentation (https://lit-html.polymer-project.org/guide/styling-templates, section "Bindings in style sheets"). I will consider the other recommendation you mentioned. Thanks!