Skip to content

Commit 3d172b0

Browse files
kovsukovsu
committed
Preserve quote style for lit html attribute values
1 parent bbdec54 commit 3d172b0

5 files changed

Lines changed: 49 additions & 190 deletions

File tree

‎src/language-html/clean.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ function clean(original, cloned, parent) {
3131
delete cloned.value;
3232
}
3333

34+
if (original.kind === "attribute") {
35+
delete cloned.quoteChar;
36+
}
37+
3438
if (original.kind === "attribute") {
3539
const { fullName: name, value } = original;
3640

‎src/language-html/embed/attribute.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ function printAttribute(path, options) {
4949
// lwc: html`<my-element data-for={value}></my-element>`
5050
(options.parser === "lwc" && value.startsWith("{") && value.endsWith("}"))
5151
) {
52-
return [node.rawName, "=", value];
52+
const { quoteChar } = node;
53+
const valueToReturn = quoteChar
54+
? `${quoteChar}${value}${quoteChar}`
55+
: value;
56+
return [node.rawName, "=", valueToReturn];
5357
}
5458

5559
return printers.find(({ test }) => test(path, options))?.print;

‎src/language-html/parse/postprocess.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,11 @@ function restoreNameAndValue(node) {
157157
attr.value = null;
158158
} else {
159159
attr.value = attr.valueSpan.toString();
160-
if (/["']/u.test(attr.value[0])) {
160+
const firstChar = attr.value[0];
161+
if (/["']/u.test(firstChar)) {
161162
attr.value = attr.value.slice(1, -1);
163+
// @ts-expect-error -- custom property
164+
attr.quoteChar = firstChar;
162165
}
163166
}
164167
}

‎tests/format/js/multiparser-html/__snapshots__/format.test.js.snap‎

Lines changed: 30 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -237,53 +237,17 @@ printWidth: 80
237237
=====================================input======================================
238238
import { LitElement, html } from '@polymer/lit-element';
239239
240-
class MyElement extends LitElement {
241-
static get properties() {
242-
return {
243-
mood: { type: String }
244-
};
245-
}
246-
247-
constructor() {
248-
super();
249-
this.mood = 'happy';
250-
}
251-
252-
render() {
253-
return html\`
254-
<style
255-
256-
257-
>
258-
.mood { color: green; }
259-
</style
260-
261-
262-
263-
>
264-
265-
Web Components are <span
266-
267-
268-
class="mood" >\${
269-
this.mood
270-
271-
}</span
272-
273-
>!
274-
\`;
275-
}
276-
}
277-
278-
customElements.define('my-element', MyElement);
279-
280-
const someHtml1 = html\`<div > hello \${world} </div >\`;
281-
const someHtml2 = /* HTML */ \`<div > hello \${world} </div >\`;
240+
const someHtml3 = /* HTML */ \`<div class="\${foo}">foo</div>\`;
241+
const someHtml4 = /* HTML */ \`<div class=\${bar}>bar</div>\`;
282242
283243
html\`\`
284244
285245
html\`<my-element obj=\${obj}></my-element>\`;
286246
247+
html\`<div class="\${foo}">foo</div>\`;
248+
249+
html\`<div class=\${bar}>bar</div>\`
250+
287251
html\` <\${Footer} >footer content<// > \`
288252
289253
html\` <div /> \`
@@ -341,40 +305,11 @@ html\`<div style=" color : red;
341305
=====================================output=====================================
342306
import { LitElement, html } from "@polymer/lit-element";
343307
344-
class MyElement extends LitElement {
345-
static get properties() {
346-
return {
347-
mood: { type: String },
348-
};
349-
}
350-
351-
constructor() {
352-
super();
353-
this.mood = "happy";
354-
}
355-
356-
render() {
357-
return html\`
358-
<style>
359-
.mood {
360-
color: green;
361-
}
362-
</style>
363-
364-
Web Components are
365-
<span class="mood">\${this.mood}</span>
366-
!
367-
\`;
368-
}
369-
}
370-
371-
customElements.define("my-element", MyElement);
372-
373-
const someHtml1 = html\`
374-
<div>hello \${world}</div>
308+
const someHtml3 = /* HTML */ \`
309+
<div class="\${foo}">foo</div>
375310
\`;
376-
const someHtml2 = /* HTML */ \`
377-
<div>hello \${world}</div>
311+
const someHtml4 = /* HTML */ \`
312+
<div class=\${bar}>bar</div>
378313
\`;
379314
380315
html\`\`;
@@ -383,6 +318,14 @@ html\`
383318
<my-element obj=\${obj}></my-element>
384319
\`;
385320
321+
html\`
322+
<div class="\${foo}">foo</div>
323+
\`;
324+
325+
html\`
326+
<div class=\${bar}>bar</div>
327+
\`;
328+
386329
html\`
387330
<\${Footer}>footer content<//>
388331
\`;
@@ -484,53 +427,17 @@ printWidth: 80
484427
=====================================input======================================
485428
import { LitElement, html } from '@polymer/lit-element';
486429
487-
class MyElement extends LitElement {
488-
static get properties() {
489-
return {
490-
mood: { type: String }
491-
};
492-
}
493-
494-
constructor() {
495-
super();
496-
this.mood = 'happy';
497-
}
498-
499-
render() {
500-
return html\`
501-
<style
502-
503-
504-
>
505-
.mood { color: green; }
506-
</style
507-
508-
509-
510-
>
511-
512-
Web Components are <span
513-
514-
515-
class="mood" >\${
516-
this.mood
517-
518-
}</span
519-
520-
>!
521-
\`;
522-
}
523-
}
524-
525-
customElements.define('my-element', MyElement);
526-
527-
const someHtml1 = html\`<div > hello \${world} </div >\`;
528-
const someHtml2 = /* HTML */ \`<div > hello \${world} </div >\`;
430+
const someHtml3 = /* HTML */ \`<div class="\${foo}">foo</div>\`;
431+
const someHtml4 = /* HTML */ \`<div class=\${bar}>bar</div>\`;
529432
530433
html\`\`
531434
532435
html\`<my-element obj=\${obj}></my-element>\`;
533436
437+
html\`<div class="\${foo}">foo</div>\`;
438+
439+
html\`<div class=\${bar}>bar</div>\`
440+
534441
html\` <\${Footer} >footer content<// > \`
535442
536443
html\` <div /> \`
@@ -588,40 +495,17 @@ html\`<div style=" color : red;
588495
=====================================output=====================================
589496
import { LitElement, html } from "@polymer/lit-element";
590497
591-
class MyElement extends LitElement {
592-
static get properties() {
593-
return {
594-
mood: { type: String },
595-
};
596-
}
597-
598-
constructor() {
599-
super();
600-
this.mood = "happy";
601-
}
602-
603-
render() {
604-
return html\`
605-
<style>
606-
.mood {
607-
color: green;
608-
}
609-
</style>
610-
611-
Web Components are <span class="mood">\${this.mood}</span>!
612-
\`;
613-
}
614-
}
615-
616-
customElements.define("my-element", MyElement);
617-
618-
const someHtml1 = html\`<div>hello \${world}</div>\`;
619-
const someHtml2 = /* HTML */ \`<div>hello \${world}</div>\`;
498+
const someHtml3 = /* HTML */ \`<div class="\${foo}">foo</div>\`;
499+
const someHtml4 = /* HTML */ \`<div class=\${bar}>bar</div>\`;
620500
621501
html\`\`;
622502
623503
html\`<my-element obj=\${obj}></my-element>\`;
624504
505+
html\`<div class="\${foo}">foo</div>\`;
506+
507+
html\`<div class=\${bar}>bar</div>\`;
508+
625509
html\` <\${Footer}>footer content<//> \`;
626510
627511
html\` <div /> \`;

‎tests/format/js/multiparser-html/lit-html.js‎

Lines changed: 6 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,16 @@
11
import { LitElement, html } from '@polymer/lit-element';
22

3-
class MyElement extends LitElement {
4-
static get properties() {
5-
return {
6-
mood: { type: String }
7-
};
8-
}
9-
10-
constructor() {
11-
super();
12-
this.mood = 'happy';
13-
}
14-
15-
render() {
16-
return html`
17-
<style
18-
19-
20-
>
21-
.mood { color: green; }
22-
</style
23-
24-
25-
26-
>
27-
28-
Web Components are <span
29-
30-
31-
class="mood" >${
32-
this.mood
33-
34-
}</span
35-
36-
>!
37-
`;
38-
}
39-
}
40-
41-
customElements.define('my-element', MyElement);
42-
43-
const someHtml1 = html`<div > hello ${world} </div >`;
44-
const someHtml2 = /* HTML */ `<div > hello ${world} </div >`;
3+
const someHtml3 = /* HTML */ `<div class="${foo}">foo</div>`;
4+
const someHtml4 = /* HTML */ `<div class=${bar}>bar</div>`;
455

466
html``
477

488
html`<my-element obj=${obj}></my-element>`;
499

10+
html`<div class="${foo}">foo</div>`;
11+
12+
html`<div class=${bar}>bar</div>`
13+
5014
html` <${Footer} >footer content<// > `
5115

5216
html` <div /> `

0 commit comments

Comments
 (0)