lit-localize breaks property passing in transform mode

[gberaudo]

Which package(s) are affected?

Localize (@lit/localize)

Description

In transform mode, lit-localize breaks code using values passed as properties.

Example:

html` <input .placeholder="${msg('Message')}">`

becomes:

html `<input .placeholder="Mon message">`

which results in undefined / nothing being passed as the placeholder property (mind the dot in .placeholder).

I would expect lit-localize to transform the property .placeholder to an attribute placeholder.

Reproduction

I don't have a proper reproduction.

As an illustration, see this playground:

Workaround

In user code, don't use property but plain attributes (no dot prefix).

Example:

html` <input placeholder="${msg('Message')}">`

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

0.11.4

Browser/OS/Node environment

This is not related to the environment.

[augustjk]

This should have been fixed with #2692
Is your @lit/localize-tools up to date?

[gberaudo]

Hi @augustjk, thanks for your feedback.
My version is 0.11.4, though not the latest one it was released several months after the PR you mentioned.

Your PR contains these tests:

  checkTransform(
    'html`Hello <b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
    'html`Hello <b bar=${"World"}>World</b>!`;'
  );

and later

  checkTransform(
    'html`Hello <b .bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
    'html`Hello <b .bar=${"World"}>World</b>!`;'
  );

It is not the behaviour I noticed: the replacement is no more an expression. So, with the test data that would become:

html`Hello <b bar="World">World</b>!`
html`Hello <b .bar="World">World</b>!`

I just double checked with latest release lit and the issue is still there.
See the reproduction here:
https://github.com/gberaudo/lit-test/blob/master/src/element-input.ts#L9
https://github.com/gberaudo/lit-test/blob/master/localized/fr/element-input.js#L10

[augustjk]

Thanks for the reproduction @gberaudo! I can indeed see this is an issue.

What's happening is that the PR mentioned only fixes this if you have the expression that directly follows = and we only test for that.

So the following gets rid of the expression during transform resulting in an invalid lit-html template:

html`<b .foo="${msg('World')}">`

But doing this without the " around the expression preserves it:

html`<b .foo=${msg('World')}>`

Quotes around the expression are optional if the expression represents the whole value, which is always the case for property binding.

Maybe it won't be too bad for localize to also look for expressions that are wrapped with the optional quotes.. but removing them from your source code is an easy workaround/fix for now.