From 6af10eba9f5446d769f5c36ede0660ab6cb7d174 Mon Sep 17 00:00:00 2001
From: Augustine Kim <augustinekim@google.com>
Date: Thu, 31 Mar 2022 13:43:21 -0700
Subject: [PATCH 1/4] Prevent subsuming expressions in attr values

---
 .../localize-tools/src/modes/transform.ts     | 19 ++++++++++++++--
 .../src/tests/transform.unit.test.ts          | 22 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/localize-tools/src/modes/transform.ts b/packages/localize-tools/src/modes/transform.ts
index a90c316039..d4b1f2b9c9 100644
--- a/packages/localize-tools/src/modes/transform.ts
+++ b/packages/localize-tools/src/modes/transform.ts
@@ -448,7 +448,7 @@ class Transformer {
           'Internal error: string literal cannot be html-tagged'
         );
       }
-      return template;
+      return newTemplate;
     }
 
     // We may have ended up with template expressions that can be represented
@@ -534,7 +534,22 @@ class Transformer {
       return true;
     };
 
-    for (const span of template.templateSpans) {
+    for (let i = 0; i < template.templateSpans.length; i++) {
+      const span = template.templateSpans[i];
+      // A span preceded by `=` can be an attribute so skip subsume and
+      // keep it as an expression to produce valid lit-html template
+      // TODO(augustinekim) Consider optimizing to regular quoted string for
+      // regular html attributes
+      if (
+        (i === 0
+          ? template.head.text
+          : template.templateSpans[i - 1].literal.text
+        ).endsWith('=')
+      ) {
+        fragments.push(ts.visitNode(span.expression, this.boundVisitNode));
+        fragments.push(span.literal.text);
+        continue;
+      }
       let expression = span.expression;
       // Can we directly subsume this span?
       if (!subsume(expression)) {
diff --git a/packages/localize-tools/src/tests/transform.unit.test.ts b/packages/localize-tools/src/tests/transform.unit.test.ts
index 76ac3b0cfa..321f41c68a 100644
--- a/packages/localize-tools/src/tests/transform.unit.test.ts
+++ b/packages/localize-tools/src/tests/transform.unit.test.ts
@@ -353,6 +353,28 @@ test('msg(string(<b>msg(string)</b>)) translated', () => {
   );
 });
 
+test('html(msg(string)) with msg as attr value', () => {
+  checkTransform(
+    'html`Hello <b bar=${msg("world", {id: "bar"})}>${"World"}</b>!`;',
+    'html`Hello <b bar=${"world"}>World</b>!`;'
+  );
+});
+
+test('html(msg(string)) with msg as attr value translated', () => {
+  checkTransform(
+    'html`Hello <b bar=${msg("world", {id: "bar"})}>${"World"}</b>!`;',
+    'html`Hello <b bar=${`mundo`}>World</b>!`;',
+    {
+      messages: [
+        {
+          name: 'bar',
+          contents: ['mundo'],
+        },
+      ],
+    }
+  );
+});
+
 test('import * as litLocalize', () => {
   checkTransform(
     `

From 249912e34e5b361cb5934277838db1d9efad62a1 Mon Sep 17 00:00:00 2001
From: Augustine Kim <augustinekim@google.com>
Date: Thu, 31 Mar 2022 15:01:56 -0700
Subject: [PATCH 2/4] Add e2e test

---
 .../testdata/build-transform-xliff/goldens/foo.ts             | 4 ++++
 .../testdata/build-transform-xliff/goldens/tsout/en/foo.js    | 3 +++
 .../build-transform-xliff/goldens/tsout/es-419/foo.js         | 3 +++
 .../testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js | 3 +++
 .../testdata/build-transform-xliff/input/foo.ts               | 4 ++++
 5 files changed, 17 insertions(+)

diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
index 6d74620d7b..d0aea52e19 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
@@ -79,3 +79,7 @@ export class MyElement2 extends LitElement {
 
 // Escaped markup characters should remain escaped
 msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);
+
+// Expressions as attribute values should stay as expressions
+html`Hello <b foo=${'World'}>World</b>`;
+html`Hello <b foo=${msg('World')}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
index 09999075aa..ec345b2771 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
@@ -54,3 +54,6 @@ export class MyElement2 extends LitElement {
 }
 // Escaped markup characters should remain escaped
 html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
+// Expressions as attribute values should stay as expressions
+html`Hello <b foo=${'World'}>World</b>`;
+html`Hello <b foo=${'World'}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
index 13e4572a96..f39e5fd946 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
@@ -54,3 +54,6 @@ export class MyElement2 extends LitElement {
 }
 // Escaped markup characters should remain escaped
 html`&lt;Hola<b>&lt;Mundo &amp; Amigos&gt;</b>!&gt;`;
+// Expressions as attribute values should stay as expressions
+html`Hello <b foo=${'World'}>World</b>`;
+html`Hello <b foo=${`Mundo`}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
index 42a55704b0..2bf0f34d2e 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
@@ -54,3 +54,6 @@ export class MyElement2 extends LitElement {
 }
 // Escaped markup characters should remain escaped
 html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
+// Expressions as attribute values should stay as expressions
+html`Hello <b foo=${'World'}>World</b>`;
+html`Hello <b foo=${'World'}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
index 6d74620d7b..b324009764 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
+++ b/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
@@ -79,3 +79,7 @@ export class MyElement2 extends LitElement {
 
 // Escaped markup characters should remain escaped
 msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);
+
+// Expressions as attribute values should stay as expressions
+html`Hello <b foo=${"World"}>World</b>`;
+html`Hello <b foo=${msg("World")}>World</b>`;

From 6fd6286964ab129800567794b882665d0dfc20cc Mon Sep 17 00:00:00 2001
From: Augustine Kim <augustinekim@google.com>
Date: Thu, 31 Mar 2022 15:09:15 -0700
Subject: [PATCH 3/4] Add changeset

---
 .changeset/tender-bobcats-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tender-bobcats-greet.md

diff --git a/.changeset/tender-bobcats-greet.md b/.changeset/tender-bobcats-greet.md
new file mode 100644
index 0000000000..1b15671924
--- /dev/null
+++ b/.changeset/tender-bobcats-greet.md
@@ -0,0 +1,5 @@
+---
+'@lit/localize-tools': patch
+---
+
+Fix issue with placing expressions as html attribute values in transform mode

From a905a157ac769daa3320993567f24a9d08335cd6 Mon Sep 17 00:00:00 2001
From: Augustine Kim <augustinekim@google.com>
Date: Thu, 31 Mar 2022 17:02:35 -0700
Subject: [PATCH 4/4] Add more tests

---
 .../src/tests/transform.unit.test.ts          | 58 +++++++++++++++++--
 .../build-transform-xliff/goldens/foo.ts      |  3 +
 .../goldens/tsout/en/foo.js                   |  3 +
 .../goldens/tsout/es-419/foo.js               |  3 +
 .../goldens/tsout/zh_CN/foo.js                |  3 +
 .../build-transform-xliff/input/foo.ts        |  3 +
 6 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/packages/localize-tools/src/tests/transform.unit.test.ts b/packages/localize-tools/src/tests/transform.unit.test.ts
index 321f41c68a..5614436994 100644
--- a/packages/localize-tools/src/tests/transform.unit.test.ts
+++ b/packages/localize-tools/src/tests/transform.unit.test.ts
@@ -355,20 +355,70 @@ test('msg(string(<b>msg(string)</b>)) translated', () => {
 
 test('html(msg(string)) with msg as attr value', () => {
   checkTransform(
-    'html`Hello <b bar=${msg("world", {id: "bar"})}>${"World"}</b>!`;',
-    'html`Hello <b bar=${"world"}>World</b>!`;'
+    'html`Hello <b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
+    'html`Hello <b bar=${"World"}>World</b>!`;'
   );
 });
 
 test('html(msg(string)) with msg as attr value translated', () => {
   checkTransform(
     'html`Hello <b bar=${msg("world", {id: "bar"})}>${"World"}</b>!`;',
-    'html`Hello <b bar=${`mundo`}>World</b>!`;',
+    'html`Hello <b bar=${`Mundo`}>World</b>!`;',
     {
       messages: [
         {
           name: 'bar',
-          contents: ['mundo'],
+          contents: ['Mundo'],
+        },
+      ],
+    }
+  );
+});
+
+test('html(msg(string)) with multiple msg as attr value', () => {
+  checkTransform(
+    'html`<b foo=${msg("Hello", {id: "foo"})}>${"Hello"}</b>' +
+      '<b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
+    'html`<b foo=${"Hello"}>Hello</b><b bar=${"World"}>World</b>!`;'
+  );
+});
+
+test('html(msg(string)) with multiple msg as attr value translated', () => {
+  checkTransform(
+    'html`<b foo=${msg("Hello", {id: "foo"})}>${"Hello"}</b>' +
+      '<b bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
+    'html`<b foo=${`Hola`}>Hello</b><b bar=${`Mundo`}>World</b>!`;',
+    {
+      messages: [
+        {
+          name: 'foo',
+          contents: ['Hola'],
+        },
+        {
+          name: 'bar',
+          contents: ['Mundo'],
+        },
+      ],
+    }
+  );
+});
+
+test('html(msg(string)) with msg as property attr value', () => {
+  checkTransform(
+    'html`Hello <b .bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
+    'html`Hello <b .bar=${"World"}>World</b>!`;'
+  );
+});
+
+test('html(msg(string)) with msg as property attr value translated', () => {
+  checkTransform(
+    'html`Hello <b .bar=${msg("World", {id: "bar"})}>${"World"}</b>!`;',
+    'html`Hello <b .bar=${`Mundo`}>World</b>!`;',
+    {
+      messages: [
+        {
+          name: 'bar',
+          contents: ['Mundo'],
         },
       ],
     }
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
index d0aea52e19..42aa97e684 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/foo.ts
@@ -83,3 +83,6 @@ msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);
 // Expressions as attribute values should stay as expressions
 html`Hello <b foo=${'World'}>World</b>`;
 html`Hello <b foo=${msg('World')}>World</b>`;
+html`<b foo=${msg('Hello')}>Hello</b><b bar=${msg('World')}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
+html`Hello <b .foo=${msg('World')}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
index ec345b2771..a35b8c0c39 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/en/foo.js
@@ -57,3 +57,6 @@ html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
 // Expressions as attribute values should stay as expressions
 html`Hello <b foo=${'World'}>World</b>`;
 html`Hello <b foo=${'World'}>World</b>`;
+html`<b foo=${'Hello'}>Hello</b><b bar=${'World'}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
index f39e5fd946..5dd00a24e6 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/es-419/foo.js
@@ -57,3 +57,6 @@ html`&lt;Hola<b>&lt;Mundo &amp; Amigos&gt;</b>!&gt;`;
 // Expressions as attribute values should stay as expressions
 html`Hello <b foo=${'World'}>World</b>`;
 html`Hello <b foo=${`Mundo`}>World</b>`;
+html`<b foo=${'Hello'}>Hello</b><b bar=${`Mundo`}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
+html`Hello <b .foo=${`Mundo`}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
index 2bf0f34d2e..1d66a5b375 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
+++ b/packages/localize-tools/testdata/build-transform-xliff/goldens/tsout/zh_CN/foo.js
@@ -57,3 +57,6 @@ html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`;
 // Expressions as attribute values should stay as expressions
 html`Hello <b foo=${'World'}>World</b>`;
 html`Hello <b foo=${'World'}>World</b>`;
+html`<b foo=${'Hello'}>Hello</b><b bar=${'World'}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
+html`Hello <b .foo=${'World'}>World</b>`;
diff --git a/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts b/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
index b324009764..458826daec 100644
--- a/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
+++ b/packages/localize-tools/testdata/build-transform-xliff/input/foo.ts
@@ -83,3 +83,6 @@ msg(html`&lt;Hello<b>&lt;World &amp; Friends&gt;</b>!&gt;`);
 // Expressions as attribute values should stay as expressions
 html`Hello <b foo=${"World"}>World</b>`;
 html`Hello <b foo=${msg("World")}>World</b>`;
+html`<b foo=${msg("Hello")}>Hello</b><b bar=${msg("World")}>World</b>`;
+html`Hello <b .foo=${"World"}>World</b>`;
+html`Hello <b .foo=${msg("World")}>World</b>`;