feat: added new url support (#753)

Author: cap-Bernardito

package-lock.json

@@ -73,7 +73,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "standard-version": "^9.1.0",
-    "webpack": "^5.33.2",
+    "webpack": "^5.36.1",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.7.2"
   },

package.json

@@ -196,6 +196,7 @@ export function pitch(request) {
       );
       return;
     }
+
     this.importModule(
       `${this.resourcePath}.webpack[javascript/auto]!=!${request}`,
       {
@@ -230,6 +231,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

src/loader.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/TestCases.test.js

@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("acd0bc1ae24d05fdac73")
+/******/ 		__webpack_require__.h = () => ("619e4b98882ea3a2aba3")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.acd0bc1ae24d05fdac73.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.619e4b98882ea3a2aba3.css

@@ -73,7 +73,7 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("4ecab8e2ff0fe228a728")
+/******/ 		__webpack_require__.h = () => ("962555dd7355e6c261df")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/acd0bc1ae24d05fdac73.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/619e4b98882ea3a2aba3.css

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

test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.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/chunkFilename-fullhash/expected/webpack-5/0.4ecab8e2ff0fe228a728.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5/0.962555dd7355e6c261df.css

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

test/cases/chunkFilename-fullhash/expected/webpack-5/4ecab8e2ff0fe228a728.css renamed to test/cases/chunkFilename-fullhash/expected/webpack-5/962555dd7355e6c261df.css

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

test/cases/chunkFilename-fullhash/expected/webpack-5/main.js

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

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

@@ -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/app/index.js

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

test/cases/new-url-with-public-path-auto/app/mockLoader.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/nested/nested-img.png

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

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

@@ -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-auto/expected/main.css

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

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

@@ -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',
+    }),
+  ],
+};