Compiled
Build time atomic CSS-in-JS. Baked and ready to serve.
Usage
import { styled, ClassNames } from '@compiled/react';
// Tie styles to an element
<div css={{ color: 'purple' }} />;
// Create a component that ties styles to an element
const StyledButton = styled.button`
color: ${(props) => props.color};
`;
// Create a component which styles are not necessarily tied to an element
<ClassNames>{({ css }) => children({ className: css({ fontSize: 12 }) })}</ClassNames>;
Installation
Install the React package:
npm install @compiled/react
npm install @compiled/babel-plugin --save-dev
Configure Babel:
{
"plugins": ["@compiled/babel-plugin"]
}
Contributions
Contributions to Compiled are welcomed! Please see CONTRIBUTING.md for details.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.