diff --git a/src/loader.js b/src/loader.js
index 6dac3261..ca319d5c 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -204,13 +204,22 @@ export function pitch(request) {
return;
}
- const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath);
- const publicPathForExtract = isAbsolutePublicPath
- ? publicPath
- : `${ABSOLUTE_PUBLIC_PATH}${publicPath.replace(
- /\./g,
- SINGLE_DOT_PATH_SEGMENT
- )}`;
+ let publicPathForExtract;
+
+ if (typeof publicPath === "string") {
+ const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(
+ publicPath
+ );
+
+ publicPathForExtract = isAbsolutePublicPath
+ ? publicPath
+ : `${ABSOLUTE_PUBLIC_PATH}${publicPath.replace(
+ /\./g,
+ SINGLE_DOT_PATH_SEGMENT
+ )}`;
+ } else {
+ publicPathForExtract = publicPath;
+ }
this.importModule(
`${this.resourcePath}.webpack[javascript/auto]!=!!!${request}`,
diff --git a/test/cases/publicpath-function-2/expected/webpack-5-importModule/c9e192c015437a21dea1.svg b/test/cases/publicpath-function-2/expected/webpack-5-importModule/c9e192c015437a21dea1.svg
new file mode 100644
index 00000000..5b3b22a4
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5-importModule/c9e192c015437a21dea1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/again/style.css b/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/again/style.css
new file mode 100644
index 00000000..5d0b093d
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/again/style.css
@@ -0,0 +1,5 @@
+body {
+ background: green;
+ background-image: url(http://example.com/XXXX/c9e192c015437a21dea1.svg);
+}
+
diff --git a/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/style.css b/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/style.css
new file mode 100644
index 00000000..03203eac
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5-importModule/nested/style.css
@@ -0,0 +1,5 @@
+body {
+ background: red;
+ background-image: url(http://example.com/XXXX/c9e192c015437a21dea1.svg);
+}
+
diff --git a/test/cases/publicpath-function-2/expected/webpack-5/c9e192c015437a21dea1.svg b/test/cases/publicpath-function-2/expected/webpack-5/c9e192c015437a21dea1.svg
new file mode 100644
index 00000000..5b3b22a4
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5/c9e192c015437a21dea1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/test/cases/publicpath-function-2/expected/webpack-5/nested/again/style.css b/test/cases/publicpath-function-2/expected/webpack-5/nested/again/style.css
new file mode 100644
index 00000000..4d9fb06b
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5/nested/again/style.css
@@ -0,0 +1,5 @@
+body {
+ background: green;
+ background-image: url(http://example.com/4d869bb95ecdf3f870fb/c9e192c015437a21dea1.svg);
+}
+
diff --git a/test/cases/publicpath-function-2/expected/webpack-5/nested/style.css b/test/cases/publicpath-function-2/expected/webpack-5/nested/style.css
new file mode 100644
index 00000000..e27aee70
--- /dev/null
+++ b/test/cases/publicpath-function-2/expected/webpack-5/nested/style.css
@@ -0,0 +1,5 @@
+body {
+ background: red;
+ background-image: url(http://example.com/ca6e489a6807af3e778c/c9e192c015437a21dea1.svg);
+}
+
diff --git a/test/cases/publicpath-function-2/nested/again/style.css b/test/cases/publicpath-function-2/nested/again/style.css
new file mode 100644
index 00000000..254f81b4
--- /dev/null
+++ b/test/cases/publicpath-function-2/nested/again/style.css
@@ -0,0 +1,4 @@
+body {
+ background: green;
+ background-image: url(../../react.svg);
+}
diff --git a/test/cases/publicpath-function-2/nested/style.css b/test/cases/publicpath-function-2/nested/style.css
new file mode 100644
index 00000000..c9853be3
--- /dev/null
+++ b/test/cases/publicpath-function-2/nested/style.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+ background-image: url(../react.svg);
+}
diff --git a/test/cases/publicpath-function-2/react.svg b/test/cases/publicpath-function-2/react.svg
new file mode 100644
index 00000000..5b3b22a4
--- /dev/null
+++ b/test/cases/publicpath-function-2/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/test/cases/publicpath-function-2/webpack.config.js b/test/cases/publicpath-function-2/webpack.config.js
new file mode 100644
index 00000000..0b882698
--- /dev/null
+++ b/test/cases/publicpath-function-2/webpack.config.js
@@ -0,0 +1,32 @@
+import Self from "../../../src";
+
+module.exports = {
+ entry: {
+ // Specific CSS entry point, with output to a nested folder
+ "nested/style": "./nested/style.css",
+ // Note that relative nesting of output is the same as that of the input
+ "nested/again/style": "./nested/again/style.css",
+ },
+ output: {
+ // Compute publicPath relative to the CSS output
+ publicPath: (pathData) => `http://example.com/${pathData.hash}/`,
+ },
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: Self.loader,
+ },
+ "css-loader",
+ ],
+ },
+ ],
+ },
+ plugins: [
+ new Self({
+ filename: "[name].css",
+ }),
+ ],
+};