Merge pull request #102 from posthtml/fix-bg-paths

posthtml · Jul 22, 2024 · 7d2cb63 · 7d2cb63
2 parents 4417847 + d27c081
commit 7d2cb63
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 2 deletions.
diff --git a/lib/plugins/postcss-baseurl.js b/lib/plugins/postcss-baseurl.js
@@ -1,3 +1,4 @@
+import path from 'pathe'
 import isUrl from 'is-url-superb'
 
 const urlPattern = /(url\(["']?)(.*?)(["']?\))/g
@@ -13,7 +14,11 @@ export default function postcssBaseurl(options = {}) {
           rule.walkDecls(decl => {
             const { value } = decl
             decl.value = value.replace(urlPattern, ($0, $1, $2, $3) => {
-              return isUrl($2) ? $1 + $2 + $3 : $1 + base + $2 + $3
+              return isUrl($2)
+                ? $1 + $2 + $3
+                : isUrl(base)
+                  ? $1 + base + $2 + $3
+                  : $1 + path.join(base, $2) + $3
             })
           })
         }
@@ -23,7 +28,11 @@ export default function postcssBaseurl(options = {}) {
         rule.walkDecls(decl => {
           const { value } = decl
           decl.value = value.replace(urlPattern, ($0, $1, $2, $3) => {
-            return isUrl($2) ? $1 + $2 + $3 : $1 + base + $2 + $3
+            return isUrl($2)
+              ? $1 + $2 + $3
+              : isUrl(base)
+                ? $1 + base + $2 + $3
+                : $1 + path.join(base, $2) + $3
           })
         })
       })

diff --git a/test/expected/bg-paths.html b/test/expected/bg-paths.html
@@ -0,0 +1,26 @@
+<head>
+  <style>.test {
+      background-image: url('relative/image.jpg');
+      background: url('relative/image.jpg');
+    }
+
+    .test2 {
+      background-image: url('https://preserve.me/image.jpg');
+      background: url('https://preserve.me/image.jpg');
+    }
+
+    .multiple-bg {
+      background-image: url('relative/one.png'), url(relative/two.png), url("relative/three.png"), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+    }</style>
+</head>
+
+<body style="background: url('relative/image.jpg')">
+  <table style="background: url(relative/image.jpg)">
+    <tr>
+      <th style="background-image: url('relative/image.jpg')">Header</th>
+    </tr>
+    <tr>
+      <td style="background-image: url(relative/image.jpg)">Cell</td>
+    </tr>
+  </table>
+</body>
diff --git a/test/fixtures/bg-paths.html b/test/fixtures/bg-paths.html
@@ -0,0 +1,28 @@
+<head>
+  <style>
+    .test {
+      background-image: url('image.jpg');
+      background: url('image.jpg');
+    }
+
+    .test2 {
+      background-image: url('https://preserve.me/image.jpg');
+      background: url('https://preserve.me/image.jpg');
+    }
+
+    .multiple-bg {
+      background-image: url('one.png'), url(two.png), url("three.png"), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+    }
+  </style>
+</head>
+
+<body style="background: url('image.jpg')">
+  <table style="background: url(image.jpg)">
+    <tr>
+      <th style="background-image: url('image.jpg')">Header</th>
+    </tr>
+    <tr>
+      <td style="background-image: url(image.jpg)">Cell</td>
+    </tr>
+  </table>
+</body>
diff --git a/test/test.js b/test/test.js
@@ -126,3 +126,11 @@ test('joins relative paths', t => {
     },
   })
 })
+
+test('joins bg url paths', t => {
+  return process(t, 'bg-paths', {
+    url: 'relative',
+    styleTag: true,
+    inlineCss: true,
+  })
+})