Skip to content

Upgrading to 1.2.0

Hyvä 1.2.0 switches both of the fundamental libraries Alpine.js and Tailwind CSS used by the default-theme from version 2 to version 3.
Because of this, some changes need to be made to existing themes.

A Hyvä theme can use either use Alpine.js v2 OR v3. It is not possible to use both at the same time.

If stores use multiple themes, they can be migrated one at a time.

The hyva-themes/magento2-theme-module in version 1.2.0 woks with both Alpine.js v2 and v3.
So even if not updating a theme to 1.2.0, it should always be safe to update Hyva_Theme module to the latest version.

Hyvä 1.2.x requires GraphQL Cart >= 1.0.4

If you are using the hyva-themes/magento2-graphql-cart module, upgrade it to 1.0.4 first, so the composer dependency can be satisfied:

composer require hyva-themes/magento2-graphql-cart:~1.0.4
The previous release was compatible with Alpine and Tailwind v3, but the composer constraints did not allow it to be installed with the theme-module 1.2.0.

Backward incompatible changes

Beside the upgrade of Tailwind CSS and AlpineJS to a new major versions, a typo in php-cart coupon form html ID attribute id="discound-form-toggle" was changed to id="discount-form-toggle"

Migration scripts

To upgrade an existing theme from v2 to v3, Hyvä provides migration scripts, that will get you most of the way.
You will have to test your theme completely and make additional changes as needed.

The upgrade script and instructions to use it can be found at: The script bin/hyva-1.2.0-tailwind-and-alpine.js will migrate both Alpine and Tailwind to v3.
However, it is also possible to only upgrade one or the other, or go step by step.
To do so, the scripts src/alpine-v2-to-v3/v2-to-v3.js (README) and src/tailwind-v2-to-v3/v2-to-v3.js (README) can be used.
Please refer to the readme files provided with the scripts for more information!

Migration Details

Detailed instructions what needs to be done to migrate Alpine and Tailwind from version 2 to version 3 can be found on the respective sites:


Changelogs are available from the in the codebase, or here:

Known Issues

Please check the GitLab issue tracker for the default-theme and the theme-module for known issues.