Migrating CSS 0.x → 1.0

Version 1.0 includes few breaking changes and we provide tooling to make the migration as smooth as possible.

In most cases the only manual code change needed is to remove the root class name that was previously required (styles.root or volvo_v0). All styles and design tokens have been moved to the :root selector, meaning they apply globally to a page. If you need style encapsulation for components or part of your page, use the Shadow DOM.

The other major change you’ll notice is that the body-16, title-20, and title-24 classes were renamed to font-*, reducing the number of names you need to learn.

---

Upgrade steps

1. Update to the latest 0.x version of @volvo-cars/css.
2. Add the ESLint plugin with the no-deprecated-class rule to catch deprecated class names in your code.
3. Run eslint --fix to update deprecated class names to their new equivalents.
4. Search your codebase for any deprecated names used outside of className (e.g. in string concatenation or template literals) — the ESLint rule may not catch those.
5. Remove the root class name (styles.root or volvo_v0) from your application wrapper.

---

Renamed classes

0.x	1.0
body-16	font-16
title-20	font-20
md:title-20	md:font-20
title-24	font-24
md:title-24	md:font-24
v-label	label
v-input	input
v-input-floating-label	input-floating-label

Renamed design tokens

If you use design tokens directly as CSS custom properties, the following were renamed:

0.x	1.0
--v-font-title-20	--v-font-20
--v-font-title-20-lineheight	--v-font-20-lineheight
--v-font-title-20-size	--v-font-20-size
--v-font-title-24	--v-font-24
--v-font-title-24-lineheight	--v-font-24-lineheight
--v-font-title-24-size	--v-font-24-size
--v-radius-4	--v-radius-sm

Removed exports

The @volvo-cars/css/styles and @volvo-cars/css/UNSTABLE_styles TypeScript modules were removed. Use string class names instead, with the ESLint plugin to warn about typos.

Removed object syntax in CSS utils

cssJoin and cssMerge no longer accept objects with class names as keys. If your className logic is complex enough that you reached for the object syntax, consider instead:

• Toggling aria or data attributes on the element to control styles that change with state.
• Using cssMerge with a className prop to allow overriding styles with existing utility classes, instead of inventing a custom styling API for your component.