fix(bundler-utils): parenthesize public path expression

Author: dangreen

packages/bundler-utils/src/generate.spec.ts

@@ -153,7 +153,7 @@ describe('bundler-utils', () => {
           publicPathExpression: '__webpack_public_path__'
         }))
 
-        expect(module).toContain('const url = __webpack_public_path__ + "/images/image.jpg";')
+        expect(module).toContain('const url = (__webpack_public_path__) + "/images/image.jpg";')
       })
 
       it('should fall back to the output path url without a public path expression', async () => {

packages/bundler-utils/src/module.spec.ts

@@ -40,7 +40,7 @@ describe('bundler-utils', () => {
           [createEntry('jpg', 320), createEntry('webp', 320), createEntry('webp', 640)]
         )
 
-        expect(module).toContain('const url = __webpack_public_path__ + "image@320w.webp";')
+        expect(module).toContain('const url = (__webpack_public_path__) + "image@320w.webp";')
       })
 
       it('should select default variant by multiplier', () => {
@@ -52,7 +52,7 @@ describe('bundler-utils', () => {
           [createEntry('jpg', 640, 1), createEntry('jpg', 320, 0.5)]
         )
 
-        expect(module).toContain('const url = __webpack_public_path__ + "image@320w.jpg";')
+        expect(module).toContain('const url = (__webpack_public_path__) + "image@320w.jpg";')
       })
 
       it('should select default variant by id', () => {
@@ -63,7 +63,7 @@ describe('bundler-utils', () => {
           [createEntry('jpg', 320), createEntry('webp', 640)]
         )
 
-        expect(module).toContain('const url = __webpack_public_path__ + "image@640w.webp";')
+        expect(module).toContain('const url = (__webpack_public_path__) + "image@640w.webp";')
       })
 
       it('should fall back to first variant', () => {
@@ -75,7 +75,7 @@ describe('bundler-utils', () => {
           [createEntry('jpg', 320), createEntry('webp', 640)]
         )
 
-        expect(module).toContain('const url = __webpack_public_path__ + "image@320w.jpg";')
+        expect(module).toContain('const url = (__webpack_public_path__) + "image@320w.jpg";')
       })
 
       it('should create empty module without variants', () => {
@@ -140,7 +140,7 @@ describe('bundler-utils', () => {
           [createEntry('jpg', 320), createEntry('webp', 640)]
         )
 
-        expect(module).toContain('"webp640": __webpack_public_path__ + "image@640w.webp"')
+        expect(module).toContain('"webp640": (__webpack_public_path__) + "image@640w.webp"')
       })
     })
   })

packages/bundler-utils/src/module.ts

@@ -36,7 +36,7 @@ function toUrlExpression(url: string | SrcSetImagePaths) {
 
   const outputPath = JSON.stringify(url.outputPath)
 
-  return url.publicPathExpression ? `${url.publicPathExpression} + ${outputPath}` : outputPath
+  return url.publicPathExpression ? `(${url.publicPathExpression}) + ${outputPath}` : outputPath
 }
 
 function findDefaultIndex(select: SrcSetEntrySelect, srcSet: SrcSetModuleEntry[]) {