Task: Upgrade vite v5 to v8 and hugo v0.125 to v0.161#990
Merged
Conversation
nathanrod
changed the title
There was a problem hiding this comment.
Pull request overview
This PR upgrades the frontend build toolchain (Vite 5 → 8, Hugo 0.125 → 0.161) and applies the related migration changes across the IVPN v3 theme, including Sass module-system updates and Hugo template/config adjustments.
Changes:
- Upgrade Vite/Sass (and related plugins) and update Vite build config for the new bundler/tooling behavior.
- Migrate Sass from
@importto@use/@forwardusing a centralized_tokens.scssforwarding entrypoint. - Update Hugo templates/config for newer multilingual fields and adjust how built assets are referenced.
Reviewed changes
Copilot reviewed 139 out of 141 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| Dockerfile | Updates builder image Node version and Hugo deb download to newer versions. |
| src/config/_default/config.toml | Updates multilingual configuration fields and output formats. |
| src/data/manifest.json | Refreshes built-asset hash mappings after the toolchain upgrade. |
| src/themes/ivpn-v3/package-lock.json | Locks upgraded Vite/Sass/plugin dependency graph. |
| src/themes/ivpn-v3/package.json | Bumps Vite/plugin-vue/Sass and minor dependency updates. |
| src/themes/ivpn-v3/vite.config.js | Updates Vite build configuration and Sass preprocessor options. |
| src/themes/ivpn-v3/assets/scss/_tokens.scss | New forwarding module for design tokens/mixins to support Sass module system. |
| src/themes/ivpn-v3/assets/scss/base.scss | Switches to @forward _tokens instead of importing config/mixins directly. |
| src/themes/ivpn-v3/assets/scss/pages.scss | Converts stylesheet aggregation from @import to @use. |
| src/themes/ivpn-v3/assets/scss/services.scss | Switches to _tokens for token/mixin access under Sass module system. |
| src/themes/ivpn-v3/assets/scss/mixins/breakpoint.scss | Updates to Sass built-in modules (sass:map, sass:meta) and adds config import. |
| src/themes/ivpn-v3/assets/scss/mixins/container.scss | Adds grid config import needed under @use. |
| src/themes/ivpn-v3/assets/scss/elements/anchors.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/blockquote.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/body.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/headings.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/hr.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/img.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/input.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/label.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/lists.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/pre.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/section.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/sup.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/table.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/text.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/elements/vue.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/badge.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/blog-article.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/blog.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/breadcrumb.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/buttons.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/connection-status.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/content.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/cta.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/eof.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/features.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/footer.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/guides.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/heading.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/highlight.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/image.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/listing.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/logo.scss | New file to align component styles with Sass module system (tokens import). |
| src/themes/ivpn-v3/assets/scss/components/mobile-navigation.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/more.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/navbar.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/navigation.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/notice.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/pagination.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/price-box.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/products.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/search.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/select.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/servers.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/service-item.scss | Converts Sass imports to @use for module system compatibility. |
| src/themes/ivpn-v3/assets/scss/components/sidebar.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/stances.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/submenu.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/suggest-an-edit.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/switch.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/tag.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/team.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/text-banner.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/scss/components/upgrade-box.scss | Converts Sass imports to @use and adds _tokens import. |
| src/themes/ivpn-v3/assets/scss/components/video.scss | Adds _tokens import for variables/mixins under module system. |
| src/themes/ivpn-v3/assets/js/styles/base.scss | Replaces @import with @forward for Sass module system compatibility. |
| src/themes/ivpn-v3/assets/js/styles/buttons.scss | Replaces @import with @forward for Sass module system compatibility. |
| src/themes/ivpn-v3/assets/js/styles/tabs.scss | Converts @import to @use and ensures theme mixins are available. |
| src/themes/ivpn-v3/assets/js/styles/vpn-configuration.scss | Converts @import to @use for module system compatibility. |
| src/themes/ivpn-v3/assets/js/App.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/AccountFooter.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/AccountInfo.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/AccountMenu.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/AppsSection.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/BraintreeCc.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/Device.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/FlashBox.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/FooterNavigation.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/OpenvpnConfig.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/PopUp.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/PriceBox.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/SelectBillingCycle.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/SelectLocations.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/SelectLocationsMulti.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/SelectPaymentMethod.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/ServerList.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/SignupSection.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/Tabs.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/Voucher.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/WireguardKey.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/icons/cc/discover.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/icons/cc/visa.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/AddWireguardKey.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/ChangeBillingCycle.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/ChangeProduct.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/DeleteAccount.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/DeleteDevice.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/DeleteWireguardKey.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/DisableDeviceManagement.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/DowngradeAccount.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/LogoutDevices.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/SetAuthAccountID.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/SetPaymentMethod.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/components/popups/TotpEnable.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Login.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/OnePageCheckout.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/PasswordReset.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/PasswordResetCommit.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Prices.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Account.vue | Updates Sass to use sass:color and replaces deprecated lighten() usage. |
| src/themes/ivpn-v3/assets/js/views/Account/DeviceManagement.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Payment.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Settings.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Settings/Authentication.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Settings/Billing.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Services/DnsService.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/ThankYouLight.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/UpgradePayment.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Wireguard.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/WireguardConfig.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/Upgrade/Upgrade.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/AddFunds.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/AddFunds/Cash.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/AddFunds/CC.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/AddFunds/GiftCard.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/AddFunds/Monero.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/assets/js/views/Account/ChangeProduct/ChangeProduct.vue | Converts Sass @import to @use for Vite/Sass modern API. |
| src/themes/ivpn-v3/layouts/_default/baseof.html | Updates language handling and asset manifest lookup for new Hugo/tooling behavior. |
| src/themes/ivpn-v3/layouts/_default/list.json | Adds a JSON list template for section JSON outputs. |
| src/themes/ivpn-v3/layouts/pages/application.html | Updates asset manifest lookup for application page bundles. |
| src/themes/ivpn-v3/layouts/pages/help-details.html | Updates asset manifest lookup for help-details page bundles. |
| src/themes/ivpn-v3/layouts/pages/help.html | Updates asset manifest lookup for help page bundles. |
| src/themes/ivpn-v3/layouts/pages/light.html | Updates asset manifest lookup for light page bundles. |
| src/themes/ivpn-v3/layouts/pages/mobile-app.html | Updates language handling and asset manifest lookup. |
| src/themes/ivpn-v3/layouts/pages/openvpn-config.html | Updates asset manifest lookup for OpenVPN config bundles. |
| src/themes/ivpn-v3/layouts/pages/servers.html | Updates asset manifest lookup for servers page bundles. |
| src/themes/ivpn-v3/layouts/partials/footer.html | Updates language handling and asset manifest lookup. |
| src/themes/ivpn-v3/layouts/partials/header.html | Updates language handling for newer Hugo language fields. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+14
| <link rel="stylesheet" href="{{ site.Params.cdnUrl }}{{ index hugo.Data.manifest "/css/servers.css" }}"> | ||
| {{ end }} | ||
|
|
||
| {{ define "main-script" }} | ||
| <script type="module" src="{{ site.Params.cdnUrl }}{{ index $.Site.Data.manifest "/js/servers.js" }}"></script> | ||
| <script type="module" src="{{ site.Params.cdnUrl }}{{ index hugo.Data.manifest "/js/servers.js" }}"></script> |
Comment on lines
+6
to
+10
| <link rel="stylesheet" href="{{ site.Params.cdnUrl }}{{ index hugo.Data.manifest "/css/app.css" }}"> | ||
| {{ end }} | ||
|
|
||
| {{ define "main-script" }} | ||
| <script type="module" src="{{ site.Params.cdnUrl }}{{ index $.Site.Data.manifest "/js/app.js" }}"></script> | ||
| <script type="module" src="{{ site.Params.cdnUrl }}{{ index hugo.Data.manifest "/js/app.js" }}"></script> |
| @@ -0,0 +1 @@ | |||
| [] No newline at end of file | |||
johnnyburnaway
approved these changes
Jun 23, 2026
added 5 commits
June 23, 2026 10:26
This reverts commit b6f0aad.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR type
What kind of change does this PR introduce?
PR checklist
Please check if your PR fulfills the following requirements:
What is the current behavior?
Issue number: N/A
Does this PR introduce a breaking change?