Skip to content

do not auto insert attribute quotes in template literals inside of lit-html #5538

@markcellus

Description

@markcellus

For some reason, prettier is adding quotes around JS objects in template literals that I need to pass as properties to lit-html. See example below.

Prettier 1.15.2
Playground link

--jsx-single-quote
--parser typescript

Input:

function HelloWorld() {
	const obj = {};
	return html`<my-element obj=${obj}></my-element>`;
}

Output:

function HelloWorld() {
  const obj = {};
  return html`
    <my-element obj="${obj}"></my-element>
  `;
}

Expected behavior:

I expect for quotes not to be inserted around ${obj} because I want to pass the object as it is.
Note, however, that the quotes are not added if I'm not using lit-html's html parser.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:multiparserIssues with printing one language inside another, like CSS-in-JSlang:htmlIssues affecting HTML (and SVG but not JSX)lang:javascriptIssues affecting JSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.priority:highCode is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent!status:has prIssues with an accompanying pull request. These issues will probably be fixed soon!

    Type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions