From bc12d1f67e28ae47882f839e1af51faf64b16f13 Mon Sep 17 00:00:00 2001 From: biodiscus Date: Mon, 22 Jan 2024 19:14:07 +0100 Subject: [PATCH] fix: error by resolving url() in the CSS file defined in the entry option --- CHANGELOG.md | 4 ++ package.json | 2 +- src/Plugin/Collection.js | 3 ++ .../expected/css/style.e14dd5d7.css | 6 +++ .../expected/img/apple.02a7c382.png | Bin 0 -> 1779 bytes .../resolve-url-in-css-entry/src/style.css | 6 +++ .../webpack.config.js | 46 ++++++++++++++++++ test/integration.test.js | 3 ++ 8 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 test/cases/resolve-url-in-css-entry/expected/css/style.e14dd5d7.css create mode 100644 test/cases/resolve-url-in-css-entry/expected/img/apple.02a7c382.png create mode 100644 test/cases/resolve-url-in-css-entry/src/style.css create mode 100644 test/cases/resolve-url-in-css-entry/webpack.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 35f50223..278f4fe1 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 8d92287b..f705680c 100644 --- a/package.json +++ b/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", diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js index 7a6c132c..c0203d94 100644 --- a/src/Plugin/Collection.js +++ b/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); diff --git a/test/cases/resolve-url-in-css-entry/expected/css/style.e14dd5d7.css b/test/cases/resolve-url-in-css-entry/expected/css/style.e14dd5d7.css new file mode 100644 index 00000000..2c904d14 --- /dev/null +++ b/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; +} diff --git a/test/cases/resolve-url-in-css-entry/expected/img/apple.02a7c382.png b/test/cases/resolve-url-in-css-entry/expected/img/apple.02a7c382.png new file mode 100644 index 0000000000000000000000000000000000000000..c3b5ce07f66020372ad9fffeff0bdb9111cf21cf GIT binary patch literal 1779 zcmV004pr0{{R3_H{EN0001KP)t-s*4Eb7 z*Vpv)^!4@i_xJbO+S=yk=JxjX^78W4)z$3m?BL+w+9>~<>ln$WQr zd70F6ds2)6;~=3cz?Gthpc%ww1cTgMkI!%%pAq5?K+9i~j}e+11Ra1V4Ohiu)~5|0 z)&LQ?tjSmCYIOicWr9~|#Ew(ml8C!4FdW15`*G z5LrPGSnt%NANl2lj=N2PdFNoc*dJ-S4?2O0?UJ^`Fz_4|pcBSZx8#w4Zrd!%Q!N81giFl=h+ifFP0`&zK!G@*?zjk6lYpiM54!R5 zujv6XoZ8nx>T{cRJ`C|7zmALGzI`J9*FSJ5ycba#$@0X27`yE&A%6d$f%^|q>Nqro zULTGF?1*5}%O|WCQ{GF`xYvi{Jh|JL(p8k{ddwn>vCyCp8lAa7p|5b$DJ{$*#$weK&Fz(}f`mZAF^x@di zOcW|}>~%c_oBosP^x^37pt3hU-#hr;{8z=W!-tcOsA*3}-1J{X*zUvea}x5l@PCea z_}=_i5w`kJW7-)UYE9X^?mK$9Hvc_?-{wP|d9k(ksEneyy^*d7Q=9*)7`FIOZ|MW= zvixY<=W7!6E!(vDuOd|YPzO+C1X+X-InGC|NpAOFMHr#UBREWb{*$5^!noO376I(> z-!q2c?L7mFtPl42PXZcY_C~l&iu?RmW%<_h;oN{j{U^m@h-yBZ9dMxkD#Em$<=Im_ z(0@{IKAaNJQf#Aq;J*UI5p8+;6f+R(;GM*}NOkQq|4G$+I2j=03(d=^e(gj5JqcfY zI2oXo@NvU+_u8R;=s&5N52pgO4kib5wx{aDf9k&{AoF1+eK-Z6@Sofpzmz^4=|3s^ zRKK|%px~1q|H5O4NBgf7ofNR}pClAM#3TJT3n2GjwV`7e+=nd7qx?5HV9kG0+=nQ# z4Gle)lC=R}{U^nI2zq=I0@nOj5gzpTrUPvHPfGVN+9ZHV|Bcbzoe5CozcB(b6QI(6 zUj*3Zzpnrs?!V)0ANyxsG513|aU-!T_F9&J+sw`K$pDA?FJr&YI_H=b_mGGa(amxR z$ZE0+xtGzn}M1$5!$|3!#df6Jh($0lcHqeiVj95-%Y|BVG=W^1Y|v&%DE( zL3w;Hl<*L}mdl#Ml&Y-K z4{&9`j#D2UN^VqHRs&+t02~*=PZa6_vaW7sX#rw5CH~Ah1TY>D_^#pH0zJUx^aIq@ zCxE6MOn=h6Pv0Lw`U&7;SvaoU5WsVp;xL=>#SyjS`b8(8b(Qm@FyAb!yzEq+Vmzw` zcu%1f5WBRhzBpg0#>vUX`^EV>bjHgIHGaqIy8wHgJ()>#ZX7*r0HSQw zSG0?>XYGIpgO!CV#?Y}-tNSHKwbR+b@lat{{T)J Vs6AcRANBwM002ovPDHLkV1iIdiy8m` literal 0 HcmV?d00001 diff --git a/test/cases/resolve-url-in-css-entry/src/style.css b/test/cases/resolve-url-in-css-entry/src/style.css new file mode 100644 index 00000000..064ab0a6 --- /dev/null +++ b/test/cases/resolve-url-in-css-entry/src/style.css @@ -0,0 +1,6 @@ +.apple { + width: 160px; + height: 130px; + background-image: url('@images/apple.png'); + border: 5px solid orangered; +} diff --git a/test/cases/resolve-url-in-css-entry/webpack.config.js b/test/cases/resolve-url-in-css-entry/webpack.config.js new file mode 100644 index 00000000..47af6e92 --- /dev/null +++ b/test/cases/resolve-url-in-css-entry/webpack.config.js @@ -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]', + }, + }, + ], + }, +}; diff --git a/test/integration.test.js b/test/integration.test.js index 1c855fd1..e5a975b9 100644 --- a/test/integration.test.js +++ b/test/integration.test.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'));