Skip to main content

Upgrading to version 8

Major changes in version 8 include:

  • The spacing module was changed to child-spacing and the import paths are different. The class names are the same. There are also a lot of new class names in the child-spacing styles.

Depending on the version that you are currently on, your upgrade path will be different.

Your current Cacao versionUpgrade steps
Version 7Follow the steps on this page
Version 6First upgrade to version 7. Then follow the steps on this page
Version 4 or 5First upgrade to version 6 and then to version 7. Then follow the steps on this page
Version 3Start with upgrading from version 3 to version 5, then upgrade to version 6, and then to version 7. Then follow the steps on this page

Upgrade steps

Open the CSS file that you're importing the cacao library into. Search for @import 'cacao-css/dist/spacing/spacing.css';.

Replace it with:

@import 'cacao-css/dist/child-spacing/variables.css';
@import 'cacao-css/dist/child-spacing/first-child/spacing/top/top-0.css';
@import 'cacao-css/dist/child-spacing/last-child/spacing/bottom/bottom-0.css';

Migration scripts

If your website is currently running Cacao version 7 then there is a helper script to help with the migration.

Convert the file imports

This is intended to convert the imports for the Cacao files.

For example, if your source file is located at src/css/main.css then you'd run this:

cacao-convert-v8 imports -f src/css/main.css

You can then build your CSS with the new imports.