---
order: 1
---

import SectionMessage from '@atlaskit/section-message';

## Migration to `@atlaskit/css`

<SectionMessage title="Migration from Emotion to Compiled" appearance="discovery">
	<p>
		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.{' '}
		<a href="https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953">
			Read our RFC to learn more.
		</a>
	</p>
</SectionMessage>

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](/components/eslint-plugin-ui-styling-standard) to guide you.

## Codemod

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

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

The codemod should migrate something like this:

```diff
/**
 * @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).