Compiled
A familiar and performant compile time CSS-in-JS library for React.
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};
`;
// Use a component where styles are not necessarily tied to an element
<ClassNames>
{({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>
Extract styles
Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.
-import { CC, CS } from '@compiled/react/runtime';
-
-const _2 = '._syaz1q9v{color: hotpink}';
-const _ = '._1wybfyhu{font-size: 48px}';
-
export const LargeHotPinkText = () => (
- <CC>
- <CS>{[_, _2]}</CS>
<span className="_syaz1q9v _1wybfyhu">Hello world</span>
- </CC>
);
._1wybfyhu {
font-size: 48px;
}
._syaz1q9v {
color: hotpink;
}
See CSS extraction for more information.
Installation
Install the React package.
npm install @compiled/react
Then configure your bundler of choice or use Babel directly.
Webpack
Install the Webpack loader.
npm install @compiled/webpack-loader --save-dev
See installation for more information.
Parcel
Install the Parcel v2 configuration.
npm install @compiled/parcel-config --save-dev
Extend from the .parcelrc configuration:
{
"extends": ["...", "@compiled/parcel-config"]
}
See installation for more information.
Babel
Install the Babel plugin.
npm install @compiled/babel-plugin --save-dev
See installation for more information.
Contributions
Contributions are welcomed!
Please see CONTRIBUTING.md to get started.
