Parcel: Inline HTML background-image assets are not parsed

[jono-hayward]

🐛 bug report

As referenced in #541 and #1456, I believe background-image styles defined inline in HTML should be parsed and the images should be treated as assets by Parcel (please correct me if I've misunderstood).

In my test case, this isn't working. The image URLs are left untouched and the images themselves never show up in the dist folder. Doesn't matter if there are quotes around the URLs or not.

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

{
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
}

🤔 Expected Behavior

In the HTML code provided below, the image URLs should be parsed by Parcel and relevant asset processes run on them.

😯 Current Behavior

Nothing happens. The URLs are left untouched and the images never show up in the dist folder. No errors show in the terminal running the Parcel process or the browser console.

Other images defined elsewhere using <img> _do_ get processed correctly. Just not the ones using background-image

🔦 Context

I'm building a single page web site that uses an image slideshow for part of the content. This slideshow is not used on desktop, only mobile - so if I embedded the images directly in the code using <img> they would be downloaded on mobile devices, wasting time and bandwidth. If I load them using a CSS background-image, I can control the loading somewhat.

Ideally, I'd like to take this even further by defining the images in a data-image-url="..." attribute and load them onto the page completely using Javascript, but I understand if Parcel is limited to parsing the standard attributes that reference images like src and background-image.

💻 Code Sample

<div class="c-masthead__background-slideshow c-slideshow" data-slideshow>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--chick-in-hand.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--pig.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--brahman-cow-with-hand.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--ducklings.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--dolphins-in-sea.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--calf-in-field.jpg)"></div>
    <div class="c-slideshow__slide" style="background-image:url(./img/slideshow--puppy-paw.jpg)"></div>
</div>

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 8.11.3
| npm/Yarn | 6.3.0
| Operating System | MacOS 10.13.6

[DeMoorJasper]

This is a feature not a bug.

It has been implemented a lil while back, it's currently staged for the next release. (You can link the master branch if you really wanna use this or clone and yarn/npm link this)
Release date to be determined.

[cj]

@DeMoorJasper was this added in? I'm pointing to the master branch and it's not passing the image.