Upgrading to 1.1.9

The primary change when upgrading from Hyvä 1.1.8 or earlier to 1.1.9+ is the switch to the Tailwind CSS JIT compiler. While optional for existing themes, it's highly recommended.

Tailwind CSS now uses the Just-In-Time (JIT) compiler by default, deprecating the Ahead-Of-Time (AOT) mode. Hyvä 1.1.9 also adopts JIT by default.

Using the JIT compiler

Hyvä 1.1.9 updates the package.json commands:

# build a production bundle using the JIT compiler:
npm run build-prod

# run the JIT compiler continuously for development:
npm run watch

# build an unpurged development bundle using the AOT compiler:
npm run build-dev

The JIT compiler cannot generate an unpurged development styles.css file. For benefits like class name autocompletion in devtools, Hyvä 1.1.9 retains the npm run build-dev command, which uses the AOT compiler to generate an unpurged file.

Upgrading an existing Hyvä theme to use the Tailwind CSS JIT compiler

Updating a Hyvä theme to work with the JIT compiler

The JIT compiler is incompatible with CSS in web/tailwind/ from Hyvä versions 1.1.8 and earlier.

Switching to JIT mode

Add the following line to the module.exports section of your tailwind.config.js file to enable JIT compilation:

    mode: 'jit'

To revert to AOT, remove this line or set mode: 'aot':

    mode: 'aot'

Making a Hyvä theme without CSS customizations JIT compatible

If your Hyvä theme has no CSS customizations, update the following files from the 1.1.9 release:

• web/tailwind/components/button.css
• web/tailwind/components/structure.css
• web/tailwind/components/typography.css
• web/tailwind/theme/components/customer.css
• web/tailwind/postcss.config.js

Making a Hyvä theme with CSS customizations JIT compatible

The effort to make a custom theme JIT-compatible varies by customization. The easiest approach is to run the JIT compiler and address errors as they appear. While error messages can be cryptic, this guide will help you make the necessary changes.

Updating the CSS

To support JIT, wrap any custom CSS class using @apply within a @layer directive.

Example:

In Hyvä 1.1.8, web/tailwind/components/button.css declared .btn-primary:

.btn-primary {
    @apply bg-primary text-white shadow-md;

    &:hover {
        @apply bg-primary-lighter text-white shadow-lg;
    }
}

And web/tailwind/theme/components/customer.css applied these classes:

.actions-toolbar .primary button {
    @apply btn btn-primary;
}

This setup broke JIT compilation. The .btn-primary class declaration needed to be wrapped with @layer components:

@layer components {
    .btn-primary {
        @apply bg-primary text-white shadow-md;

        &:hover {
            @apply bg-primary-lighter text-white shadow-lg;
        }
    }
}

Apply this change to any custom CSS class used with @apply.

You can use base, components, or utilities as layer names. The chosen layer determines where the generated CSS appears in the final output and affects purging behavior. Tailwind automatically moves these styles to prevent specificity issues.

In tailwind-source.css, @import "tailwindcss/base" and @import "tailwindcss/components" are within /* purgecss start ignore */ and /* purgecss end ignore */ comments, meaning their CSS will not be purged.

/* purgecss start ignore */
@import "tailwindcss/base";
@import "tailwindcss/components";

[...]

/* purgecss end ignore */

@import "tailwindcss/utilities";

Conversely, components declared within @layer utilities will be purged unless explicitly used in files included in the purge list.

Finally, update your postcss.config.js to include the tailwindcss/nesting plugin:

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

By wrapping applied classes in @layer directives, updating postcss.config.js with tailwindcss/nesting, and setting mode: 'jit' in tailwind.config.js, your customized Hyvä theme will be JIT-ready!

Changelogs

Access changelogs in the CHANGELOG.md file in the codebase, or via these links:

• Changelog Default Theme
• Changelog Theme Module

Tooling

For additional upgrade information, refer to the Hyvä Theme upgrade docs.

Known Issues, Resolved in 1.1.10

• If max allowed quantity in cart is set to 0 for a product, the quantity field only allows 0.
• Can't remove product from compare: The "x" button on the Product Compare page does not work.