👷‍♀ ‍Compiled

Read the docs →

Get started

Install

⚠️ Work is in progress re-writing/architecting a new Babel plugin. Use the nightly at your own risk until it is officially released.

npm install @compiled/core@nightly @compiled/babel-plugin@nightly

Configure Babel

{
  "plugins": ["@compiled/babel-plugin"]
}

Style

import { styled, ClassNames } from '@compiled/core';
import { background } from './tokens';

const StyledButton = styled.button`
  color: ${props => props.color};
  background-color: ${background};
`;

<StyledButton css={{ fontSize: 16 }} />

<ClassNames>{({ css }) => <div className={css`font-size: 24`} />}</ClassNames>

Contributing

Thank you for considering to contribute to Compiled! Before doing so please make sure to read our contribution guidelines.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.