Merge pull request #3315 from sumcumo/webpack-inline-loader-support

fix(lib): ensure webpack inline loaders stay prefixed

lib/common/utils.js

@@ -153,6 +153,13 @@ export const relativeTo = function relativeTo() {
   let args = Array.prototype.slice.apply(arguments)
   let dir = args.shift()
 
+  // Keep webpack inline loader intact
+  if (args[0].indexOf('!') !== -1) {
+    const loaders = args.shift().split('!')
+
+    return loaders.concat(relativeTo(dir, loaders.pop(), ...args)).join('!')
+  }
+
   // Resolve path
   let _path = r(...args)
 

test/unit/utils.test.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import { Utils } from '../utils'
 
 describe('utils', () => {
@@ -216,6 +217,20 @@ describe('utils', () => {
     ])
     expect(routes).toMatchObject([ '/login', '/about', '', '/post' ])
   })
+
+  describe('relativeTo', () => {
+    const path1 = path.join(path.sep, 'foo', 'bar')
+    const path2 = path.join(path.sep, 'foo', 'baz')
+
+    test('makes path relative to dir', () => {
+      expect(Utils.relativeTo(path1, path2)).toBe(Utils.wp(`..${path.sep}baz`))
+    })
+
+    test('keeps webpack inline loaders prepended', () => {
+      expect(Utils.relativeTo(path1, `loader1!loader2!${path2}`))
+        .toBe(Utils.wp(`loader1!loader2!..${path.sep}baz`))
+    })
+  })
 })
 
 test('createRoutes should allow snake case routes', () => {