supports uri fragment in static style transformed require

fix vuejs/vue-loader#646

Author: UncleBill

Diff for: lib/templateCompilerModules/assetUrl.ts

@@ -26,16 +26,26 @@ export default (userOptions?: AssetURLOptions) => {
 }
 
 function transform(node: ASTNode, options: AssetURLOptions) {
+  if (node.__assetUrlTransformed) {
+    return
+  }
   for (const tag in options) {
-    if ((tag === '*' || node.tag === tag) && node.attrs) {
-      const attributes = options[tag]
+    if (tag === '*' || node.tag === tag) {
+      let attributes = options[tag]
       if (typeof attributes === 'string') {
-        node.attrs.some(attr => rewrite(attr, attributes))
-      } else if (Array.isArray(attributes)) {
-        attributes.forEach(item => node.attrs.some(attr => rewrite(attr, item)))
+        attributes = [attributes]
+      }
+      if (node.staticStyle && attributes.indexOf('style') > -1) {
+        node.staticStyle = rewriteStaticStyle(node.staticStyle)
+      }
+      if (node.attrs) {
+        attributes.filter(attr => attr !== 'style').forEach(attrName => {
+          node.attrs.some(attr => rewrite(attr, attrName))
+        })
       }
     }
   }
+  node.__assetUrlTransformed = true
 }
 
 function rewrite(attr: Attr, name: string) {
@@ -49,3 +59,40 @@ function rewrite(attr: Attr, name: string) {
   }
   return false
 }
+
+function rewriteStaticStyle(style: string): string {
+  const styleObj = JSON.parse(style)
+
+  // A marker which won't appear in target string
+  let MARKER: string = Math.random()
+    .toString(16)
+    .slice(2, 10)
+  while (style.indexOf(MARKER) !== -1) {
+    MARKER = `$${MARKER}$`
+  }
+  let id = -1
+  const expressions: string[] = []
+
+  let result: string = JSON.stringify(styleObj, (key, value) => {
+    if (typeof value !== 'string') {
+      return value
+    }
+    let transformed: string = value.replace(
+      /url\((['"])?(.*?)\1\)/g,
+      (_0, _1, url) => {
+        // outer quotes would be added latter
+        return `url(' + ${urlToRequire(url)} + ')`
+      }
+    )
+    if (transformed !== value) {
+      transformed = `'${transformed}'`
+      expressions.push(transformed)
+      id++
+      return MARKER + id
+    }
+    return value
+  })
+  const MARKER_RE = new RegExp(`"${MARKER}(\\d)"`, 'g')
+  result = result.replace(MARKER_RE, (_, id) => expressions[id])
+  return result
+}

Diff for: lib/templateCompilerModules/utils.ts

@@ -6,6 +6,8 @@ export interface Attr {
 export interface ASTNode {
   tag: string
   attrs: Attr[]
+  staticStyle?: string
+  __assetUrlTransformed?: boolean
 }
 
 import { UrlWithStringQuery, parse as uriParse } from 'url'

Diff for: test/__snapshots__/compileTemplate.spec.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`supports uri fragment in static style transformed require 1`] = `
+"var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(\\"div\\", [
+    _c(\\"img\\", { attrs: { src: require(\\"./image.jpg\\") } }),
+    _c(\\"div\\", {
+      staticStyle: {
+        color: \\"yellow\\",
+        background: \\"#f00 url(\\" + require(\\"./image/bg0.jpg\\") + \\") repeat\\"
+      }
+    }),
+    _c(\\"div\\", {
+      staticStyle: {
+        background:
+          \\"url(\\" +
+          require(\\"./image/bg1.jpg\\") +
+          \\"), url(\\" +
+          require(\\"@/image/bg2.jpg\\") +
+          \\")\\"
+      }
+    })
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+"
+`;

Diff for: test/compileTemplate.spec.ts

@@ -101,6 +101,29 @@ test('when too short uri then empty require', () => {
   expect(result.code).toMatch(/href: require\(""\)/)
 })
 
+/**
+ * Support uri fragment in static style in transformed require
+ */
+test('supports uri fragment in static style transformed require', () => {
+  const source =
+    '<div>' +
+    '<img src="./image.jpg"/>' +
+    '<div style="color: yellow;background: #f00 url(./image/bg0.jpg) repeat"></div>' +
+    '<div style="background: url(./image/bg1.jpg), url(~@/image/bg2.jpg)"></div>' +
+    '</div>'
+  const result = compileTemplate({
+    filename: 'inline-style.html',
+    source: source,
+    transformAssetUrls: {
+      use: 'href',
+      '*': 'style'
+    },
+    compiler: compiler
+  })
+  expect(result.errors.length).toBe(0)
+  expect(result.code).toMatchSnapshot()
+})
+
 test('warn missing preprocessor', () => {
   const template = parse({
     source: '<template lang="unknownLang">\n' + '</template>\n',