CSS

Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.

Migration to `@atlaskit/css`

Migration from Emotion to Compiled

The Atlassian Design System is migrating from Emotion to Compiled CSS-in-JS. This transition aims to improve performance and align with modern React features. Read our RFC to learn more., (opens new window)

We have a codemod available to support this migration, but there are some breaking changes between Emotion and Compiled, such as dynamic styles or imports. Please use the UI Styling Standard ESLint Plugin to guide you.

Codemod

We have a codemod to assist in migrations from xcss() to @atlaskit/css.

npx @hypermod/cli --packages @atlaskit/css#primitives-emotion-to-compiled ./path/to/folder

The codemod should migrate something like this:

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
-import { Box, xcss } from '@atlaskit/primitives';
+import { cssMap, jsx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';

-const styles = xcss({
-  color: 'color.text',
-  zIndex: 'layer',
-  backgroundColor: 'elevation.surface.hovered',
+const styles = cssMap({
+  root: {
+    color: token('color.text'),
+    zIndex: 400,
+    backgroundColor: token('elevation.surface.hovered'),
+  },
});

-export const MyComponent = () => <Box xcss={styles} />;
+export const MyComponent = () => <Box xcss={styles.root} />;

The codemod will migrate most usecases, but there is a known issue that it's unable to handle any logical operators in the xcss property. If you have any logical operators in your xcss property, you will need to manually update them.

Please note there may be very minute differences in this migration if you do not have theming enabled as @atlaskit/primitives and the Compiled variant of @atlaskit/primitives/compiled have different fallback colors. They are unchanged with theming applied, this will only happen if you're in an unthemed environment (which is not suggested).

Was this page helpful?

We use this feedback to improve our documentation.