From a888dee28ff81fdceec78916ceaa335538e6e50c Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 08:50:35 +0200 Subject: [PATCH 1/8] fix (theme): remove useless options default values --- config/webpack-image-sizes-plugin.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 3b90d0b3..9a0b6263 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -35,16 +35,16 @@ class WebpackImageSizesPlugin { */ constructor(options = {}) { this.options = { - confImgPath: options.confImgPath || 'assets/conf-img', - sizesSubdir: options.sizesSubdir || 'sizes', - tplSubdir: options.tplSubdir || 'tpl', - outputImageLocations: options.outputImageLocations || 'image-locations.json', - outputImageSizes: options.outputImageSizes || 'image-sizes.json', - generateDefaultImages: options.generateDefaultImages || false, - defaultImageSource: options.defaultImageSource || 'src/img/static/default.jpg', - defaultImagesOutputDir: options.defaultImagesOutputDir || 'dist/images', - defaultImageFormat: options.defaultImageFormat || 'jpg', - silence: options.silence || false, + confImgPath: 'assets/conf-img', + sizesSubdir: 'sizes', + tplSubdir: 'tpl', + outputImageLocations: 'image-locations.json', + outputImageSizes: 'image-sizes.json', + generateDefaultImages: false, + defaultImageSource: 'src/img/static/default.jpg', + defaultImagesOutputDir: 'dist/images', + defaultImageFormat: 'jpg', + silence: false, ...options, } } From 353d990605d81427e6be9a4d8dd3a5396483aa4f Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 09:59:55 +0200 Subject: [PATCH 2/8] fix (theme): prevent webpack image sizes plugin to called too many times --- config/webpack-image-sizes-plugin.js | 50 ++++++++++++++++++++++------ src/scss/03-base/_fonts.scss | 2 +- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 9a0b6263..3dd1f45a 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -70,12 +70,38 @@ class WebpackImageSizesPlugin { * @memberof WebpackImageSizesPlugin */ apply(compiler) { + const context = compiler.context + const confImgPath = path.resolve(context, this.options.confImgPath) + const sizesPath = path.join(confImgPath, this.options.sizesSubdir) + const tplPath = path.join(confImgPath, this.options.tplSubdir) + // Execute on first build and each rebuild const runGeneration = async (compilation, callback) => { try { - const confImgPath = path.resolve(compiler.context, this.options.confImgPath) - const sizesPath = path.join(confImgPath, this.options.sizesSubdir) - const tplPath = path.join(confImgPath, this.options.tplSubdir) + let hasChanges = false + + // Check if there are any changes in the conf-img directory + // Assumes that no modified files means the start of the build (yarn start || yarn build) + if (WebpackImageSizesPlugin.hasBeenBuiltOnce && compilation.modifiedFiles) { + for (const filePath of compilation.modifiedFiles) { + console.log(this.options.confImgPath, filePath, filePath.includes(this.options.confImgPath)) + if (filePath.includes(this.options.confImgPath)) { + hasChanges = true + } + } + } + + if (WebpackImageSizesPlugin.hasBeenBuiltOnce && !hasChanges) { + console.log(`✅ No changes detected in ${this.options.confImgPath}`) + + if (callback) { + callback() + } + + return + } + + WebpackImageSizesPlugin.hasBeenBuiltOnce = true this.log('log', '🔧 Starting WebpackImageSizesPlugin generation...') @@ -99,7 +125,7 @@ class WebpackImageSizesPlugin { // Generate default images if option is enabled if (this.options.generateDefaultImages) { - await this.generateDefaultImages(compiler.context, imageSizes) + await this.generateDefaultImages(context, imageSizes) } if (callback) { @@ -117,17 +143,13 @@ class WebpackImageSizesPlugin { compiler.hooks.emit.tapAsync('WebpackImageSizesPlugin', runGeneration) // Hook for rebuilds in watch mode - compiler.hooks.watchRun.tapAsync('WebpackImageSizesPlugin', (compiler, callback) => { + compiler.hooks.watchRun.tapAsync('WebpackImageSizesPlugin', (compilation, callback) => { this.log('log', '👀 Watch mode: checking for conf-img changes...') - runGeneration(null, callback) + runGeneration(compilation, callback) }) // Add directories to watch compiler.hooks.afterEnvironment.tap('WebpackImageSizesPlugin', () => { - const confImgPath = path.resolve(compiler.context, this.options.confImgPath) - const sizesPath = path.join(confImgPath, this.options.sizesSubdir) - const tplPath = path.join(confImgPath, this.options.tplSubdir) - // Add directories to watched dependencies compiler.hooks.compilation.tap('WebpackImageSizesPlugin', (compilation) => { // Watch configuration directories @@ -523,4 +545,12 @@ class WebpackImageSizesPlugin { } } +// ---- +// static properties +// ---- +WebpackImageSizesPlugin.hasBeenBuiltOnce = false + +// ---- +// export +// ---- module.exports = WebpackImageSizesPlugin diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 6ff4d7e3..674dd2b9 100644 --- a/src/scss/03-base/_fonts.scss +++ b/src/scss/03-base/_fonts.scss @@ -25,7 +25,7 @@ * ... */ -@use "node_modules/@fontsource/poppins/scss/mixins" as Poppins; +@use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins; @include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal); @include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic); From d450a9f1745d1e40c921adc7e03ddc1d996361cf Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 10:24:23 +0200 Subject: [PATCH 3/8] fix (theme): replace webpack image sizes plugin log --- config/webpack-image-sizes-plugin.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 3dd1f45a..95cde08f 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -84,7 +84,6 @@ class WebpackImageSizesPlugin { // Assumes that no modified files means the start of the build (yarn start || yarn build) if (WebpackImageSizesPlugin.hasBeenBuiltOnce && compilation.modifiedFiles) { for (const filePath of compilation.modifiedFiles) { - console.log(this.options.confImgPath, filePath, filePath.includes(this.options.confImgPath)) if (filePath.includes(this.options.confImgPath)) { hasChanges = true } @@ -92,7 +91,7 @@ class WebpackImageSizesPlugin { } if (WebpackImageSizesPlugin.hasBeenBuiltOnce && !hasChanges) { - console.log(`✅ No changes detected in ${this.options.confImgPath}`) + this.log('log', `✅ No changes detected in ${this.options.confImgPath}`) if (callback) { callback() From e1f17c81c9fa5ce82a3be1dec4e2bfc6e2bd9fa5 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 13:58:12 +0200 Subject: [PATCH 4/8] fix (theme): change webpack static prop for instance prop --- config/webpack-image-sizes-plugin.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 95cde08f..3ac49343 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -47,6 +47,8 @@ class WebpackImageSizesPlugin { silence: false, ...options, } + + this.hasBeenBuiltOnce = false } /** @@ -82,7 +84,7 @@ class WebpackImageSizesPlugin { // Check if there are any changes in the conf-img directory // Assumes that no modified files means the start of the build (yarn start || yarn build) - if (WebpackImageSizesPlugin.hasBeenBuiltOnce && compilation.modifiedFiles) { + if (this.hasBeenBuiltOnce && compilation.modifiedFiles) { for (const filePath of compilation.modifiedFiles) { if (filePath.includes(this.options.confImgPath)) { hasChanges = true @@ -90,7 +92,7 @@ class WebpackImageSizesPlugin { } } - if (WebpackImageSizesPlugin.hasBeenBuiltOnce && !hasChanges) { + if (this.hasBeenBuiltOnce && !hasChanges) { this.log('log', `✅ No changes detected in ${this.options.confImgPath}`) if (callback) { @@ -100,7 +102,7 @@ class WebpackImageSizesPlugin { return } - WebpackImageSizesPlugin.hasBeenBuiltOnce = true + this.hasBeenBuiltOnce = true this.log('log', '🔧 Starting WebpackImageSizesPlugin generation...') @@ -544,11 +546,6 @@ class WebpackImageSizesPlugin { } } -// ---- -// static properties -// ---- -WebpackImageSizesPlugin.hasBeenBuiltOnce = false - // ---- // export // ---- From de341d6c5e3d2d4314c11a3c724721d4f7c4adea Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 14:37:11 +0200 Subject: [PATCH 5/8] fix (theme): remove useless hook --- config/webpack-image-sizes-plugin.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 3ac49343..7398a1d1 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -150,19 +150,16 @@ class WebpackImageSizesPlugin { }) // Add directories to watch - compiler.hooks.afterEnvironment.tap('WebpackImageSizesPlugin', () => { - // Add directories to watched dependencies - compiler.hooks.compilation.tap('WebpackImageSizesPlugin', (compilation) => { - // Watch configuration directories - if (fs.existsSync(sizesPath)) { - compilation.contextDependencies.add(sizesPath) - this.log('log', '📁 Added sizes directory to watch dependencies') - } - if (fs.existsSync(tplPath)) { - compilation.contextDependencies.add(tplPath) - this.log('log', '📁 Added tpl directory to watch dependencies') - } - }) + compiler.hooks.compilation.tap('WebpackImageSizesPlugin', (compilation) => { + // Watch configuration directories + if (fs.existsSync(sizesPath)) { + compilation.contextDependencies.add(sizesPath) + this.log('log', '📁 Added sizes directory to watch dependencies') + } + if (fs.existsSync(tplPath)) { + compilation.contextDependencies.add(tplPath) + this.log('log', '📁 Added tpl directory to watch dependencies') + } }) } From 5b202d3a7255f5e6eae45ea4322c36018fda08b7 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 16:22:47 +0200 Subject: [PATCH 6/8] fix (theme): object destructuring --- config/webpack-image-sizes-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 7398a1d1..c9166074 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -72,7 +72,7 @@ class WebpackImageSizesPlugin { * @memberof WebpackImageSizesPlugin */ apply(compiler) { - const context = compiler.context + const { context } = compiler const confImgPath = path.resolve(context, this.options.confImgPath) const sizesPath = path.join(confImgPath, this.options.sizesSubdir) const tplPath = path.join(confImgPath, this.options.tplSubdir) From a9f496aad6f9204d2506d3846e9b1816f5bc3e10 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 16:29:47 +0200 Subject: [PATCH 7/8] fix (theme): misnamed watchRun hook parameter --- config/webpack-image-sizes-plugin.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index c9166074..1c134b54 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -144,12 +144,12 @@ class WebpackImageSizesPlugin { compiler.hooks.emit.tapAsync('WebpackImageSizesPlugin', runGeneration) // Hook for rebuilds in watch mode - compiler.hooks.watchRun.tapAsync('WebpackImageSizesPlugin', (compilation, callback) => { + compiler.hooks.watchRun.tapAsync('WebpackImageSizesPlugin', (compiler, callback) => { this.log('log', '👀 Watch mode: checking for conf-img changes...') - runGeneration(compilation, callback) + runGeneration(compiler, callback) }) - // Add directories to watch + // Add directories to wat compiler.hooks.compilation.tap('WebpackImageSizesPlugin', (compilation) => { // Watch configuration directories if (fs.existsSync(sizesPath)) { From fe18efa99f3bf853ea94a3401ca8dd06c4013ca1 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Wed, 4 Jun 2025 17:23:51 +0200 Subject: [PATCH 8/8] fix (theme): comment --- config/webpack-image-sizes-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/webpack-image-sizes-plugin.js b/config/webpack-image-sizes-plugin.js index 1c134b54..985d96e9 100644 --- a/config/webpack-image-sizes-plugin.js +++ b/config/webpack-image-sizes-plugin.js @@ -149,7 +149,7 @@ class WebpackImageSizesPlugin { runGeneration(compiler, callback) }) - // Add directories to wat + // Add directories to watch compiler.hooks.compilation.tap('WebpackImageSizesPlugin', (compilation) => { // Watch configuration directories if (fs.existsSync(sizesPath)) {