supports uri fragment in static style transformed require

[UncleBill]

resolved vuejs/vue-loader#646

[znck]

I am not convinced in changing the interface of ASTNode, it's not necessary to surface staticStyle from attrs. Also now codegen has to modified to treat styles differently.

[UncleBill]

I am not convinced in changing the interface of ASTNode, it's not necessary to surface staticStyle from attrs.

since attrs doesn't contain style

Also now codegen has to modified to treat styles differently.

Agree

[znck]

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

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.

<div style="background: url('/some/image/path/some-file.png')">

and

<div :style="`background: url('/some/image/path/${filename}.png')`">
<div :style="`background: ${backgroundLink}`">
<div :style="`${backgroundStyle}`">

would produce same inline style but only first can be statically transformed to require statement. It leaves us with very confused state.

[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