Migration

vNext

All future migration info will be part of the changelog.

Codey style 11.x.x

Node version

Minify has been upgraded and now requires node >= 14.

Required peer dependency

postcss@^8.4.14 is now a required peer dependency and needs to be installed as a devDependency in order for the build:tailwind script to work correctly.

Run the following command to add it:

npm i -D postcss@^8.4.14

Codey style 6.x.x

Tailwind has been upgraded to v2 in the latest Codey style package. This contains a breaking change and your tailwind.overrides.js needs to change. The property whitelist has become safelist, the value however remains the same.

module.exports = {
  purge: {
    paths: ["components", "pages", "layouts"],
    safelist: [],
    enabled: process.env.NODE_ENV === "production" || false,
  },
  output: {
    path: "build",
    name: "xerius-tailwind",
  },
};

An overview of changes in Tailwind v2 can be found here

Codey style 5.x.x

The CDN url is no longer using the built-in Azure CDN URL. The infrastructure setup has also been improved in terms of reliability, we are now using a traffic manger behind the scenes to better handle fail-over's and migrations.

The new URL used to access Codey assets is:

https://cdn.xerius.be

Internally this has been changed in the two packages mentioned in the header. However if your application directly accesses the https://staccwexerius.blob.core.windows.net or https://static-we-codey.azureedge.net URL's, you should change all of these to the new CDN URL.

Codey style 4.x.x

This release changes the structure of the header styling. Below an example of the old code:

<header class="xer-l-application__header xer-t-application-header xer-header">
  <a class="xer-header__logo" href="https://www.xerius.be">
    <img src="${cdnUrl}/style/${versions.style}/assets/images/xerius/logo-name.svg" alt="Xerius." />
  </a>
  <div class="xer-header__product-name">
    <img src="${cdnUrl}/style/${versions.style}/assets/images/xerius/name.svg" alt="" />
    <p class="xer-product-title">Product</p>
  </div>
  <div>NL</div>
</header>

The content left of the header should now be wrapped by a xer-header__container class. It should be migrated to the following code:

<header class="xer-l-application__header xer-t-application-header xer-header">
  <div class="xer-header__container">
    <a class="xer-header__logo" href="https://www.xerius.be">
      <img
        src="${cdnUrl}/style/${versions.style}/assets/images/xerius/logo-name.svg"
        alt="Xerius."
      />
    </a>
    <div class="xer-header__product-name">
      <img src="${cdnUrl}/style/${versions.style}/assets/images/xerius/name.svg" alt="" />
      <p class="xer-product-title">Product</p>
    </div>
  </div>
  <div>NL</div>
</header>

Codey style 3.x.x

Stylesheets

There are now two stylesheets instead of one:

• setup.min.css, which will reset and normalize the styling before applying the Codey flavour
• codey.min.css, the main Codey styling (renamed from xerius.min.css)

The setup CSS is only needed if you are not using Tailwind in your project.

Root class

To prevent style leakage we were forced to add a root class. This means that you will have to add .xer-codey as a class on your project's html tag.

Tailwind configuration

When using the default output configuration in tailwind.overrides.js. The file will now be named by default tailwind.min.css.