Skip to content

Add WebP support and update dependencies #486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cedric07 wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Add WebP support and update dependencies #486

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f57f759
Add WebP support and update dependencies
cedric07 Apr 24, 2026
db240d6
ci: use Corepack for Yarn 4.5.0 instead of latest Berry
firestar300 Apr 24, 2026
50732ce
ci(node.js): change order of tasks
firestar300 Apr 24, 2026
56120c3
fix(webpack): register WebP imagemin in plugins for dev, avoid duplic…
firestar300 Apr 24, 2026
d8070be
remove: delete unused background-static SCSS mixin
cedric07 Apr 27, 2026
803eb39
Add WebpackStaticImagesPlugin to handle static image processing
cedric07 Apr 27, 2026
17492e8
feat(webpack): optimize static image processing in watch mode
firestar300 Apr 27, 2026
8ad12c8
feat(webpack): use byte-for-byte copy for original images in static p…
firestar300 Apr 27, 2026
90876fc
Merge pull request #491 from BeAPI/feat/webp-plugin
cedric07 Apr 28, 2026
0a61e3b
refactor: remove JPEG images and update to WebP format
cedric07 Apr 28, 2026
fc805ae
refactor: remove WebpackStaticImagesPlugin and its configuration
cedric07 Apr 28, 2026
c5fb607
refactor: update SVGO configuration for compatibility with SVGO 3
cedric07 Apr 29, 2026
eb5e0fa
fix svgo config comment
cedric07 Apr 29, 2026
13624d5
feat(svgo): add 'removeTitle' plugin to SVGO configuration
cedric07 May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions .github/workflows/node.js.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,14 @@ jobs:

steps:
- uses: actions/checkout@v4
- name: Enable Corepack
# Must run before setup-node's yarn cache: resolves Yarn from packageManager, not v1.
# See: https://github.com/actions/setup-node/issues/1027
run: corepack enable
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
- run: yarn set version berry
cache: yarn
- run: yarn
- run: yarn build
9 changes: 9 additions & 0 deletions config/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@ module.exports = {
],
},
},
generator: [
{
preset: 'webp',
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: ['imagemin-webp'],
},
},
],
Comment thread
firestar300 marked this conversation as resolved.
Outdated
}),
new TerserPlugin({
parallel: true,
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^10.0.1",
"imagemin-webp": "^8.0.0",
"mini-css-extract-plugin": "^1.5.0",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
Expand Down
1 change: 0 additions & 1 deletion src/img/static/logo-beapi.svg
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions src/scss/02-tools/_m-background-static.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@
*
*/

@mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png" ) {
background-image: url(../img/static/#{$filename}.#{$type});
@mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png") {
background-image: url(../img/static/#{$filename}.#{$type}?as=webp);
Comment thread
firestar300 marked this conversation as resolved.
Outdated
background-repeat: no-repeat;
background-position: $position;
background-size: $size;

@if ($retina) {
Comment thread
cedric07 marked this conversation as resolved.
Outdated
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url(../img/static/#{$filename}@2x.#{$type});
background-image: url(../img/static/#{$filename}@2x.#{$type}?as=webp);
}
}
}
3 changes: 2 additions & 1 deletion src/scss/login.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// SCSS variables to customise the login page styles
// The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton.

$login-logo-path: "../../src/img/static/logo.jpg";
$login-logo-path: "../../src/img/static/logo.jpg?as=webp";
$login-logo-size: 312px 43px;
$login-logo-height: 60px;
$login-body-bg-color: #666;
Expand All @@ -16,6 +16,7 @@ $login-btn-hover-bg-color: #222;

html,
body {

&::before,
&::after {
display: none;
Expand Down
45 changes: 39 additions & 6 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2280,6 +2280,7 @@ __metadata:
imagemin-jpegtran: "npm:^7.0.0"
imagemin-optipng: "npm:^8.0.0"
imagemin-svgo: "npm:^10.0.1"
imagemin-webp: "npm:^8.0.0"
lazysizes: "npm:^5.3.2"
mini-css-extract-plugin: "npm:^1.5.0"
oneloop.js: "npm:^5.2.1"
Expand Down Expand Up @@ -2363,7 +2364,7 @@ __metadata:
languageName: node
linkType: hard

"bin-wrapper@npm:^4.0.0":
"bin-wrapper@npm:^4.0.0, bin-wrapper@npm:^4.0.1":
version: 4.1.0
resolution: "bin-wrapper@npm:4.1.0"
dependencies:
Expand Down Expand Up @@ -2678,9 +2679,9 @@ __metadata:
linkType: hard

"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
version: 1.0.30001712
resolution: "caniuse-lite@npm:1.0.30001712"
checksum: 10/1831ac3260b9657c5a0236d21c02bea6a6b88fd67a451a0ff166d27da17c95ab398c5721e08aeb24f766bced1d38f562f07c8de84e91a10a065808e83835e89e
version: 1.0.30001790
resolution: "caniuse-lite@npm:1.0.30001790"
checksum: 10/2625ba0b9c2648d14b4b02daf2fe7013d4efe087a45b034f40849c97077d435dbc610b47a34d3d6360cd62b7972864ae16978955205b7b8f7397303ba793e0ed
languageName: node
linkType: hard

Expand Down Expand Up @@ -3383,6 +3384,18 @@ __metadata:
languageName: node
linkType: hard

"cwebp-bin@npm:^8.0.0":
version: 8.0.0
resolution: "cwebp-bin@npm:8.0.0"
dependencies:
bin-build: "npm:^3.0.0"
bin-wrapper: "npm:^4.0.1"
bin:
cwebp: cli.js
checksum: 10/cdf14da37bcc225a5ec577955ad32dfc97469f574af37520030d4da8858e74b9433e8dca5f892041f88f8e19554cdbdc94851afde1e0f22271308f0dd270e767
languageName: node
linkType: hard

"data-view-buffer@npm:^1.0.2":
version: 1.0.2
resolution: "data-view-buffer@npm:1.0.2"
Expand Down Expand Up @@ -4461,7 +4474,7 @@ __metadata:
languageName: node
linkType: hard

"exec-buffer@npm:^3.0.0":
"exec-buffer@npm:^3.0.0, exec-buffer@npm:^3.2.0":
version: 3.2.0
resolution: "exec-buffer@npm:3.2.0"
dependencies:
Expand Down Expand Up @@ -4728,7 +4741,7 @@ __metadata:
languageName: node
linkType: hard

"file-type@npm:^10.4.0":
"file-type@npm:^10.4.0, file-type@npm:^10.5.0":
version: 10.11.0
resolution: "file-type@npm:10.11.0"
checksum: 10/787ab64574316dbd423eccbadac2876879c5d2f1d24309948debdaf1dfbd0f5f25f881a716f44d294090bf435407f6938da41c833895c888a78127113337a608
Expand Down Expand Up @@ -5779,6 +5792,17 @@ __metadata:
languageName: node
linkType: hard

"imagemin-webp@npm:^8.0.0":
version: 8.0.0
resolution: "imagemin-webp@npm:8.0.0"
dependencies:
cwebp-bin: "npm:^8.0.0"
exec-buffer: "npm:^3.2.0"
is-cwebp-readable: "npm:^3.0.0"
checksum: 10/707404df20f346b83b5651bc99017c2f272f400b87238ed64236a0dce112dd9c5d77d10ab365af6356e6ce33afd6a2d79fe534c82a8717ea746d9bc6f70b6804
languageName: node
linkType: hard

"imagemin@npm:^8.0.1":
version: 8.0.1
resolution: "imagemin@npm:8.0.1"
Expand Down Expand Up @@ -6021,6 +6045,15 @@ __metadata:
languageName: node
linkType: hard

"is-cwebp-readable@npm:^3.0.0":
version: 3.0.0
resolution: "is-cwebp-readable@npm:3.0.0"
dependencies:
file-type: "npm:^10.5.0"
checksum: 10/768ae017586ba2fb0831d3cc9cfb4cd56c9580b71684ea5584cf61910597c5fe91a419490ed85422424c6339fe9c327df3643c3496145134d4d0385fb479b591
languageName: node
linkType: hard

"is-data-descriptor@npm:^1.0.1":
version: 1.0.1
resolution: "is-data-descriptor@npm:1.0.1"
Expand Down
Loading