supports uri fragment in static style transformed require

[UncleBill]

resolved vuejs/vue-loader#646

[UncleBill]

I would rather extend implementation of rewrite method to handle asset URLs in inline style.

In fact, Node.attrs doesn't contain style attribute, or should we modify the compiler?

If we transform, asset URLs in static style attribute then behaviour of bounded style attribute should be same, which can be little difficult to achieve.

We don't transform bounded style, we can require resources explicitly.

In these cases:

<div :style="`background: url('/some/image/path/${filename}.png')`">
<!-- developers rely on "/some/image/path/" -->
<div :style="`background: ${backgroundLink}`">
<!-- this.backgroundLink = require('path/to/image') -->
<div :style="`${backgroundStyle}`">
<!-- this.backgroundStyle = `background: url${require('path/to/image')}` -->

[znck]

On compiled render function vnode data, staticStyle is intact an object.

see template explorer

[UncleBill]

Yes, staticStyle will be an object in compiled render function.

I tested in vue-loader's example, it works just fine.

Here is my test steps:

1. ~~Hard code default transformOption, add { '*': 'style'}~~ Add following options to vue-loader in webpack.config.js

        options: {
          transformAssetUrls: {
            '*': 'style'
          }
        }

2. Goto vue-loader directory, execute npm install path/to/component-utils
3. Add style with background image to the example page

<template lang="pug">
div(ok)
  h1(:class="$style.red") hello
  h1(style="background:url(./image/foo.png)") hello
</template>

4. Config file-loader in example/webpack.config.js
5. npm run dev or npm run build

Then the compiled code is

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { attrs: { ok: "" } }, [
    _c("h1", { class: _vm.$style.red }, [_vm._v("hello")]),
    _c(
      "h1",
      {
        staticStyle: { background: "url(" + __webpack_require__(/*! ../image/foo.png */ "./image/foo.png") + ")" }
      },
      [_vm._v("hello")]
    )
  ])
}
var staticRenderFns = []
render._withStripped = true

Run on browser:

[znck]

/cc @yyx990803 I need your opinion on this.

[UncleBill]

@yyx990803