fix: error by resolving url() in the CSS file defined in the entry option

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change log
 
+## 3.4.11 (2024-01-22)
+
+- fix: error by resolving url() in the CSS file defined in the entry option
+
 ## 3.4.10 (2024-01-16)
 
 - fix: save the webmanifest files in the directory defined in the `faviconOptions.path` option

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",

src/Plugin/Collection.js

@@ -672,6 +672,9 @@ class Collection {
    * @param {CollectionData|{}} data The collection data.
    */
   static setData(entry, issuer, data = {}) {
+    // skip when the resource is defined in the entry option, not in the entry template
+    if (!entry) return;
+
     const { filename } = entry;
     const entryPoint = this.data.get(filename);
 

test/cases/resolve-url-in-css-entry/expected/css/style.e14dd5d7.css

@@ -0,0 +1,6 @@
+.apple {
+  width: 160px;
+  height: 130px;
+  background-image: url(../img/apple.02a7c382.png);
+  border: 5px solid orangered;
+}

test/cases/resolve-url-in-css-entry/expected/img/apple.02a7c382.png

@@ -0,0 +1,6 @@
+.apple {
+  width: 160px;
+  height: 130px;
+  background-image: url('@images/apple.png');
+  border: 5px solid orangered;
+}

test/cases/resolve-url-in-css-entry/src/style.css

@@ -0,0 +1,46 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  resolve: {
+    alias: {
+      '@images': path.join(__dirname, '../../fixtures/images'),
+    },
+  },
+
+  entry: {
+    // test: resolve url() in css defined in entry option, not in entry template
+    style: './src/style.css',
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      css: {
+        filename: 'css/[name].[contenthash:8].css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        loader: 'css-loader',
+      },
+
+      {
+        test: /\.(png|jpe?g|ico)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+};

test/cases/resolve-url-in-css-entry/webpack.config.js

@@ -39,7 +39,10 @@ describe('resolve styles', () => {
 });
 
 describe('resolve url() in style', () => {
+  // TODO: fix not working
+  // background: url("@icons/arrow.png") no-repeat center center / auto 100%;
   test('url(image) in CSS', () => compareFiles('resolve-url-in-css'));
+  test('url(image) in CSS entry', () => compareFiles('resolve-url-in-css-entry'));
   test('CSS imported in module with .css', () => compareFiles('import-css-from-module-with-ext'));
   test('CSS imported from module without .css', () => compareFiles('import-css-from-module-wo-ext'));
   test('@import url() in CSS', () => compareFiles('import-url-in-css'));