From f7f1f0a01b9cdc8f391d0511b808643347cf6c13 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Sat, 13 Jul 2024 13:05:07 +0300
Subject: [PATCH 1/2] refactor: join relative paths

---
 lib/index.js             | 10 ++++++++--
 package-lock.json        |  7 +++----
 package.json             |  3 ++-
 test/expected/joins.html |  4 ++++
 test/fixtures/joins.html |  4 ++++
 test/test.js             | 14 ++++++++++++++
 6 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 test/expected/joins.html
 create mode 100644 test/fixtures/joins.html

diff --git a/lib/index.js b/lib/index.js
index cdcd6ca..ffa7c2b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,3 +1,4 @@
+import path from 'pathe'
 import postcss from 'postcss'
 import isUrl from 'is-url-superb'
 import { defu as merge } from 'defu'
@@ -148,13 +149,18 @@ const plugin = (options = {}) => tree => {
   }
 
   const handleSingleValueAttributes = (node, attribute, value) => {
+    // Don't prepend to URLs
     if (isUrl(node.attrs[attribute])) {
       return node
     }
 
     node.attrs[attribute] = typeof value === 'boolean'
-      ? options.url + node.attrs[attribute]
-      : value + node.attrs[attribute]
+      ? isUrl(options.url)
+        ? options.url + node.attrs[attribute]
+        : path.join(options.url, node.attrs[attribute])
+      : isUrl(value)
+        ? value + node.attrs[attribute]
+        : path.join(value, node.attrs[attribute])
   }
 
   const prependUrl = (value, url) => {
diff --git a/package-lock.json b/package-lock.json
index 7868627..d5c8328 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "defu": "^6.1.4",
         "is-url-superb": "^6.1.0",
+        "pathe": "^1.1.2",
         "postcss": "^8.4.35",
         "postcss-safe-parser": "^7.0.0",
         "srcset": "^5.0.1"
@@ -3351,8 +3352,7 @@
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
-      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
-      "dev": true
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="
     },
     "node_modules/pathval": {
       "version": "2.0.0",
@@ -7399,8 +7399,7 @@
     "pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
-      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
-      "dev": true
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="
     },
     "pathval": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index 216d99b..bdc3021 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,12 @@
     "node": ">=18"
   },
   "scripts": {
-    "dev": "vitest",
     "build": "unbuild",
     "release": "npx np",
     "prepack": "unbuild",
     "pretest": "npm run lint",
     "lint": "biome lint ./lib",
+    "dev": "vitest --coverage",
     "test": "vitest run --coverage"
   },
   "keywords": [
@@ -48,6 +48,7 @@
   "dependencies": {
     "defu": "^6.1.4",
     "is-url-superb": "^6.1.0",
+    "pathe": "^1.1.2",
     "postcss": "^8.4.35",
     "postcss-safe-parser": "^7.0.0",
     "srcset": "^5.0.1"
diff --git a/test/expected/joins.html b/test/expected/joins.html
new file mode 100644
index 0000000..6423e22
--- /dev/null
+++ b/test/expected/joins.html
@@ -0,0 +1,4 @@
+<script src="assets/test.js"></script>
+<img src="images/test.jpg">
+<img src="test.jpg">
+<img src="../test.jpg">
diff --git a/test/fixtures/joins.html b/test/fixtures/joins.html
new file mode 100644
index 0000000..45d8a1b
--- /dev/null
+++ b/test/fixtures/joins.html
@@ -0,0 +1,4 @@
+<script src="test.js"></script>
+<img src="test.jpg">
+<img src="../test.jpg">
+<img src="../../test.jpg">
diff --git a/test/test.js b/test/test.js
index ebe7ac3..f087361 100644
--- a/test/test.js
+++ b/test/test.js
@@ -112,3 +112,17 @@ test('user-defined tags (array)', t => {
     tags: ['img', 'script'],
   })
 })
+
+test('joins relative paths', t => {
+  return process(t, 'joins', {
+    url: 'images',
+    tags: {
+      img: {
+        src: true,
+      },
+      script: {
+        src: 'assets',
+      },
+    },
+  })
+})

From c2e054742ce438e7d709018379561f1d675dda40 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Sat, 13 Jul 2024 13:09:42 +0300
Subject: [PATCH 2/2] chore: update readme.md

---
 README.md | 446 +++++++++++++++++++++++++++---------------------------
 1 file changed, 226 insertions(+), 220 deletions(-)

diff --git a/README.md b/README.md
index 117d83d..80a5358 100644
--- a/README.md
+++ b/README.md
@@ -1,220 +1,226 @@
-<div align="center">
-  <img width="150" height="150" alt="PostHTML" src="https://posthtml.github.io/posthtml/logo.svg">
-  <h1>Base URL</h1>
-  <p>Prepend a string to source paths in your HTML</p>
-
-  [![Version][npm-version-shield]][npm]
-  [![Build][github-ci-shield]][github-ci]
-  [![License][license-shield]][license]
-  [![Downloads][npm-stats-shield]][npm-stats]
-</div>
-
-## Introduction
-
-This PostHTML plugin can prepend a string to various HTML attribute values and CSS property values.
-
-Input:
-
-```html
-<img src="test.jpg">
-```
-
-Output:
-
-```html
-<img src="https://example.com/test.jpg">
-```
-
-Works on the following attributes:
-
-- `src=""`
-- `href=""`
-- `srcset=""`
-- `poster=""`
-- `background=""`
-
-... and the following CSS properties:
-
-- `background: url()`
-- `background-image: url()`
-- `@font-face { src: url() }`
-
-Both `<style>` tags and `style=""` attributes are supported.
-
-CSS property values with multiple `url()` sources are supported as well.
-
-## Install
-
-```
-npm i posthtml posthtml-base-url
-```
-
-## Usage
-
-```js
-import posthtml from 'posthtml'
-import baseUrl from 'posthtml-base-url'
-
-posthtml([
-  baseUrl({
-    url: 'https://example.com', 
-    tags: ['img']
-  })
-])
-  .process('<img src="test.jpg">')
-  .then(result => console.log(result.html))
-```
-
-Result:
-
-```html
-<img src="https://example.com/test.jpg">
-```
-
-## Absolute URLs
-
-If the value to be replaced is an URL, the plugin will not modify it.
-
-## Options
-
-You can configure what to prepend to which attribute values.
-
-### `url`
-
-Type: `string`\
-Default: `''`
-
-The string to prepend to the attribute value.
-
-### `allTags`
-
-Type: `boolean`\
-Default: `false`
-
-The plugin is opt-in, meaning that by default it doesn't affect any tag.
-
-When you set `allTags` to `true`, the plugin will prepend your `url` to all attribute values in all the tags that it supports.
-
-### `styleTag`
-
-Type: `boolean`\
-Default: `false`
-
-When set to `true`, the plugin will prepend your `url` to all `url()` sources in `<style>` tags.
-
-### `inlineCss`
-
-Type: `boolean`\
-Default: `false`
-
-When set to `true`, the plugin will prepend your `url` to all `url()` sources in `style=""` attributes.
-
-### `tags`
-
-Type: `array|object`\
-Default: [defaultTags](./lib/index.js) (object)
-
-Define a list of tags and their attributes to handle.
-
-When using the `tags` option, the plugin will _only handle those tags_.
-
-#### Array `tags`
-
-To replace all known attributes for a list of tags, use the array format:
-
-```js
-posthtml([
-  baseUrl({
-    url: 'https://example.com',
-    tags: ['img', 'script'],
-  })
-])
-  .process(
-    `<a href="foo/bar.html">
-      <img src="img.jpg" srcset="img-HD.jpg 2x,img-xs.jpg 100w">
-    </a>
-    
-    <script src="javascript.js"></script>`
-  )
-  .then(result => console.log(result.html))
-```
-
-Result:
-
-```html
-<a href="foo/bar.html">
-  <img src="https://example.com/img.jpg" srcset="https://example.com/img-HD.jpg 2x, https://example.com/img-xs.jpg 100w">
-</a>
-
-<script src="https://example.com/javascript.js"></script>
-```
-
-#### Object `tags`
-
-You may use an object for granular control over how specific attributes should be handled:
-
-```js
-posthtml([
-  baseUrl({
-    url: 'https://foo.com/',
-    tags: {
-      img: {
-        src: true,
-        srcset: 'https://bar.com/',
-      },
-    },
-  })
-])
-  .process(
-    `<a href="foo/bar.html">
-      <img src="img.jpg" srcset="img-HD.jpg 2x, img-xs.jpg 100w">
-    </a>`
-  )
-  .then(result => console.log(result.html))
-```
-
-Result:
-
-```html
-<a href="foo/bar.html">
-  <img src="https://foo.com/img.jpg" srcset="https://bar.com/img-HD.jpg 2x, https://bar.com/img-xs.jpg 100w">
-</a>
-```
-
-You may set the value of an attribute to `true` and the plugin will use the `url` option value - we did that above for the `src` attribute.
-
-### `attributes`
-
-Type: `object`\
-Default: `{}`
-
-Key-value pairs of attributes and what to prepend to them.
-
-Example:
-
-```js
-posthtml([
-  baseUrl({
-    attributes: {
-      'data-url': 'https://example.com/',
-    }
-  })
-])
-  .process('<div data-url="foo/bar.html"></div>')
-  .then(result => console.log(result.html))
-```
-
-Result:
-
-```html
-<div data-url="https://example.com/foo/bar.html"></div>
-```
-
-[npm]: https://www.npmjs.com/package/posthtml-base-url
-[npm-version-shield]: https://img.shields.io/npm/v/posthtml-base-url.svg
-[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-base-url
-[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-base-url.svg
-[github-ci]: https://github.com/posthtml/posthtml-base-url/actions/workflows/nodejs.yml
-[github-ci-shield]: https://github.com/posthtml/posthtml-base-url/actions/workflows/nodejs.yml/badge.svg
-[license]: ./LICENSE
-[license-shield]: https://img.shields.io/npm/l/posthtml-base-url.svg
+<div align="center">
+  <img width="150" height="150" alt="PostHTML" src="https://posthtml.github.io/posthtml/logo.svg">
+  <h1>Base URL</h1>
+  <p>Prepend a string to source paths in your HTML</p>
+
+  [![Version][npm-version-shield]][npm]
+  [![Build][github-ci-shield]][github-ci]
+  [![License][license-shield]][license]
+  [![Downloads][npm-stats-shield]][npm-stats]
+</div>
+
+## Introduction
+
+This PostHTML plugin can prepend a string to various HTML attribute values and CSS property values.
+
+Input:
+
+```html
+<img src="test.jpg">
+```
+
+Output:
+
+```html
+<img src="https://example.com/test.jpg">
+```
+
+Works on the following attributes:
+
+- `src=""`
+- `href=""`
+- `srcset=""`
+- `poster=""`
+- `background=""`
+
+... and the following CSS properties:
+
+- `background: url()`
+- `background-image: url()`
+- `@font-face { src: url() }`
+
+Both `<style>` tags and `style=""` attributes are supported.
+
+CSS property values with multiple `url()` sources are supported as well.
+
+## Install
+
+```
+npm i posthtml posthtml-base-url
+```
+
+## Usage
+
+```js
+import posthtml from 'posthtml'
+import baseUrl from 'posthtml-base-url'
+
+posthtml([
+  baseUrl({
+    url: 'https://example.com', 
+    tags: ['img']
+  })
+])
+  .process('<img src="test.jpg">')
+  .then(result => console.log(result.html))
+```
+
+Result:
+
+```html
+<img src="https://example.com/test.jpg">
+```
+
+## Absolute URLs
+
+If the target attribute value is an URL, the plugin will not modify it.
+
+If the prefix string to prepend to the target attribute value is an URL, the two strings will be concatenated.
+
+## Relative paths
+
+If both the prefix and the attribute value are relative paths, the plugin will intelligently join the paths instead of simply concatenating them.
+
+## Options
+
+You can configure what to prepend to which attribute values.
+
+### `url`
+
+Type: `string`\
+Default: `''`
+
+The string to prepend to the attribute value.
+
+### `allTags`
+
+Type: `boolean`\
+Default: `false`
+
+The plugin is opt-in, meaning that by default it doesn't affect any tag.
+
+When you set `allTags` to `true`, the plugin will prepend your `url` to all attribute values in all the tags that it supports.
+
+### `styleTag`
+
+Type: `boolean`\
+Default: `false`
+
+When set to `true`, the plugin will prepend your `url` to all `url()` sources in `<style>` tags.
+
+### `inlineCss`
+
+Type: `boolean`\
+Default: `false`
+
+When set to `true`, the plugin will prepend your `url` to all `url()` sources in `style=""` attributes.
+
+### `tags`
+
+Type: `array|object`\
+Default: [defaultTags](./lib/index.js) (object)
+
+Define a list of tags and their attributes to handle.
+
+When using the `tags` option, the plugin will _only handle those tags_.
+
+#### Array `tags`
+
+To replace all known attributes for a list of tags, use the array format:
+
+```js
+posthtml([
+  baseUrl({
+    url: 'https://example.com',
+    tags: ['img', 'script'],
+  })
+])
+  .process(
+    `<a href="foo/bar.html">
+      <img src="img.jpg" srcset="img-HD.jpg 2x,img-xs.jpg 100w">
+    </a>
+    
+    <script src="javascript.js"></script>`
+  )
+  .then(result => console.log(result.html))
+```
+
+Result:
+
+```html
+<a href="foo/bar.html">
+  <img src="https://example.com/img.jpg" srcset="https://example.com/img-HD.jpg 2x, https://example.com/img-xs.jpg 100w">
+</a>
+
+<script src="https://example.com/javascript.js"></script>
+```
+
+#### Object `tags`
+
+You may use an object for granular control over how specific attributes should be handled:
+
+```js
+posthtml([
+  baseUrl({
+    url: 'https://foo.com/',
+    tags: {
+      img: {
+        src: true,
+        srcset: 'https://bar.com/',
+      },
+    },
+  })
+])
+  .process(
+    `<a href="foo/bar.html">
+      <img src="img.jpg" srcset="img-HD.jpg 2x, img-xs.jpg 100w">
+    </a>`
+  )
+  .then(result => console.log(result.html))
+```
+
+Result:
+
+```html
+<a href="foo/bar.html">
+  <img src="https://foo.com/img.jpg" srcset="https://bar.com/img-HD.jpg 2x, https://bar.com/img-xs.jpg 100w">
+</a>
+```
+
+You may set the value of an attribute to `true` and the plugin will use the `url` option value - we did that above for the `src` attribute.
+
+### `attributes`
+
+Type: `object`\
+Default: `{}`
+
+Key-value pairs of attributes and what to prepend to them.
+
+Example:
+
+```js
+posthtml([
+  baseUrl({
+    attributes: {
+      'data-url': 'https://example.com/',
+    }
+  })
+])
+  .process('<div data-url="foo/bar.html"></div>')
+  .then(result => console.log(result.html))
+```
+
+Result:
+
+```html
+<div data-url="https://example.com/foo/bar.html"></div>
+```
+
+[npm]: https://www.npmjs.com/package/posthtml-base-url
+[npm-version-shield]: https://img.shields.io/npm/v/posthtml-base-url.svg
+[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-base-url
+[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-base-url.svg
+[github-ci]: https://github.com/posthtml/posthtml-base-url/actions/workflows/nodejs.yml
+[github-ci-shield]: https://github.com/posthtml/posthtml-base-url/actions/workflows/nodejs.yml/badge.svg
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/npm/l/posthtml-base-url.svg