Skip to main content
Version: 3.x

3.10 -> 3.11

This page lists the highlights for upgrading a project from Front-Commerce 3.10 to 3.11

Update dependencies​

Update all your @front-commerce/* dependencies to this version:

pnpm update "@front-commerce/*@3.11.0"

Automated Migration​

We provide a codemod to automatically update your codebase to the latest version of Front-Commerce. This tool will update your code when possible and flag the places where you need to manually update your code (with // TODO Codemod comments).

pnpm run front-commerce migrate --transform 3.11.0

Changes introduced with this automated migration script:

Content Composition​

In this release, we have introduced the new Content Composition API.

Wysiwyg Overrides​

We have refactored the Wysiwyg to use this new API. If you have overriden any of these files, you will need to update your code to use the new API.

For a more detailed explanation, please refer to the Content Composition guide.

TypeSafety​

In order for TypeScript type inference to work with the new Content Composition API, you need to reference the generated ./.front-commerce/content-composition.d.ts file in your env.d.ts file.

/// <reference types="./.front-commerce/content-composition.d.ts" />

SCSS Update​

We have updated the SCSS package to their latest version. This update includes some breaking changes.

We have condensed in the next lines the changes we face while updating scss code.

@import deprecation​

The major change is the deprecation of the @import directive. If you have any @import statements in your SCSS files, you will need to update them to use the @use directive instead.

To simplify the migration, we have created a codemod that will update your SCSS files for you.

pnpm run front-commerce migrate --transform 3.11.0

You can read more about this in the SCSS import deprecation article.

Mixed declarations​

One of the widely used feature of SCSS is the ability to nest CSS rules. The latest version of CSS has introduced nesting rules natively.

To prevent confusions, scss needs to have it's nesting rule ordered, here's an example of bad and good practice:

Bad

.test {
  color: red;

  &--green {
    color: green;
  }

  // Main rules must be grouped before any nesting rules
  display: flex;
}

Good

.test {
  display: flex;
  color: red;

  &--green {
    color: green;
  }
}

You can read more about this in the Mixed declarations deprecation article on the Sass website.

Removal of some Color Functions​

Sass removed some color functions that were deprecated in the latest version of SCSS. Sass detailled these changes in the Color Functions article.

Code updating is a matter of replacing deprecated color functions with their sass:color counterpart. Here's an example of the changes you will need to make:

Before

color: lighten($color, 10%);

After

// Import the color module
@use "sass:color";

// Use the adjust function
color: color.adjust($color, $lightness: 10%);