Parcel ignores resources declared in JS template literals

🐛 bug report

LitElement declares its ShadowDOM HTML in JavaScript template literals. When CSS files or other assets are declared inside the literal string Parcel doesn’t bundle them. CSS is especially relevant to allow CSS files to be injected into the ShadowDOM. Eg:

import { html } from 'lit-element';

export default (element) => html`
    <link rel="stylesheet" href="/css/global.css">
    <h1><slot></slot></h1>
`;

The JSX pattern for including resources does not work for template literals

🎛 Configuration (.babelrc, package.json, cli command)

parcel --port 8080 --https ./src/index.html --cache-dir ./build/cache --out-dir ./build/make

🤔 Expected Behavior

Assets declared in JS template literals are bundled as normal

😯 Current Behavior

The assets included in the template strings are ignored.

💁 Possible Solution

a) Parcel should parse JS template literals for resources and include them b) Allow specific resource path strings to be mapped and replaced during the build process c) Import a path variable that can be included in the template literal as a variable

🔦 Context

Build WebComponents using JavaScript template literals

💻 Code Sample

import { html } from 'lit-element';

export default (element) => html`
    <link rel="stylesheet" href="/css/global.css">
    <h1><slot></slot></h1>
`;

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	12.6
npm	6.9
Operating System	Mac OS 10.13.6

[mischnic]

@nstansbury this seems to work: https://codesandbox.io/embed/parcel-issue-3553-1dobw

import { html } from "lit-html";
import img from "./img.png";

export const App = () => html`
  <div>
    <img src="${img}" />
  </div>
`;

[itamarzil123]

One Year Later Here. I’m in a middle of vanilla JS project right now. I’m using template literals for rendering. (basically throwing template literals style html code into the innerHtml of DOM element. I have the same problem -> <img src="images/pic.png" /> will not work from within a template literal while it does work from within my index.html file. Finally I chose the solution above, by @mischnic, and so instead of an array containing my list of images, it is an array containing list of import img from ‘…/images’. WORKS FINE. any other solutions in 2020 ?