How to migrate to Compiled?

Follow the installation instructions before continuing.

Styled Components

Replace the imports with @compiled/react.

-import styled from 'styled-components';
+import { styled } from '@compiled/react';

There exists a codemod to streamline this. For features that aren't available due to the compile-time nature of the library, read our limitations.

Emotion

Replace the imports with @compiled/react.

Incremental adoption
To find every call site to convert install the no-emotion-css rule from the ESLint plugin.

/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@compiled/react';

-/** @jsxImportSource @emotion/react */
+/** @jsxImportSource @compiled/react */

-import styled from '@emotion/styled';
+import { styled } from '@compiled/react';

-import { css, ClassNames, keyframes } from '@emotion/core';
-import { css, ClassNames, keyframes } from '@emotion/react';
+import { css, ClassNames, keyframes } from '@compiled/react';

There exists a codemod to streamline this.

For features that aren't available due to the compile-time nature of the library, read our limitations.

For Emotion-specific issues you may run into, see Migrating from Emotion.

Suggest changes to this page ➚

Getting started

Writing CSS

Known issues with Emotion