feat: added new url support

Author: cap-Bernardito

src/loader.js

@@ -230,6 +230,18 @@ export function pitch(request) {
     outputOptions
   );
 
+  // The templates are compiled and executed by NodeJS - similar to server side rendering
+  // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
+  // The following config enables relative URL support for the child compiler
+  childCompiler.options.module = { ...childCompiler.options.module };
+  childCompiler.options.module.parser = {
+    ...childCompiler.options.module.parser,
+  };
+  childCompiler.options.module.parser.javascript = {
+    ...childCompiler.options.module.parser.javascript,
+    url: 'relative',
+  };
+
   const { NodeTemplatePlugin } = webpack.node;
   const NodeTargetPlugin = webpack.node.NodeTargetPlugin
     ? webpack.node.NodeTargetPlugin

test/TestCases.test.js

@@ -106,6 +106,7 @@ describe('TestCases', () => {
           directoryForCase,
           'webpack.config.js'
         ));
+        const { context } = webpackConfig;
 
         for (const config of [].concat(webpackConfig)) {
           Object.assign(
@@ -132,7 +133,8 @@ describe('TestCases', () => {
                   }
                   return p;
                 }),
-            }
+            },
+            context ? { context } : {}
           );
         }
 

test/cases/new-url-with-public-path-auto/app/img.png

@@ -0,0 +1 @@
+import './style.css';

test/cases/new-url-with-public-path-auto/app/index.js

@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [0, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [1, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [2, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}

test/cases/new-url-with-public-path-auto/app/mockLoader.js

@@ -0,0 +1,3 @@
+.class {
+  background: red;
+}

test/cases/new-url-with-public-path-auto/app/nested/nested-img.png

@@ -0,0 +1,3 @@
+.foo {background: url(img.png)}
+.bar {background: url(../outer-img.png)}
+.baz {background: url(nested/nested-img.png)}

test/cases/new-url-with-public-path-auto/app/style.css

@@ -0,0 +1,3 @@
+const webpack = require('webpack');
+
+module.exports = () => webpack.version[0] !== '4';

test/cases/new-url-with-public-path-auto/expected/main.css

@@ -0,0 +1,36 @@
+import path from 'path';
+
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  context: path.resolve(__dirname, 'app'),
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: {
+              publicPath: 'auto',
+            },
+          },
+          './mockLoader',
+        ],
+      },
+      {
+        test: /\.png$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[path][name][ext]',
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/new-url-with-public-path-auto/outer-img.png

@@ -0,0 +1 @@
+import './style.css';

test/cases/new-url-with-public-path-auto/test.filter.js

@@ -0,0 +1,12 @@
+export default function loader() {
+  const callback = this.async();
+
+  callback(
+    null,
+    `export default [
+      [0, ".foo {background: url(" + new URL("./img.png", import.meta.url) + ")}", ""],
+      [1, ".bar {background: url(" + new URL("../outer-img.png", import.meta.url) + ")}", ""],
+      [2, ".baz {background: url(" + new URL("./nested/nested-img.png", import.meta.url) + ")}", ""]
+  ]`
+  );
+}

test/cases/new-url-with-public-path-auto/webpack.config.js

@@ -0,0 +1,3 @@
+.class {
+  background: red;
+}

test/cases/new-url-with-public-path/app/img.png

@@ -0,0 +1,3 @@
+.foo {background: url(public/img.png)}
+.bar {background: url(public/../outer-img.png)}
+.baz {background: url(public/nested/nested-img.png)}

test/cases/new-url-with-public-path/app/index.js

@@ -0,0 +1,3 @@
+const webpack = require('webpack');
+
+module.exports = () => webpack.version[0] !== '4';

test/cases/new-url-with-public-path/app/mockLoader.js

@@ -0,0 +1,36 @@
+import path from 'path';
+
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  context: path.resolve(__dirname, 'app'),
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: Self.loader,
+            options: {
+              publicPath: 'public',
+            },
+          },
+          './mockLoader',
+        ],
+      },
+      {
+        test: /\.png$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '[path][name][ext]',
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};