Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atlassian-labs/compiled
A familiar and performant compile time CSS-in-JS library for React.
https://github.com/atlassian-labs/compiled
babel css css-in-js parcel react reactjs typescript webpack
Last synced: about 2 hours ago
JSON representation
A familiar and performant compile time CSS-in-JS library for React.
- Host: GitHub
- URL: https://github.com/atlassian-labs/compiled
- Owner: atlassian-labs
- License: apache-2.0
- Created: 2019-12-13T10:03:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T01:39:03.000Z (3 months ago)
- Last Synced: 2024-10-29T10:17:37.265Z (3 months ago)
- Topics: babel, css, css-in-js, parcel, react, reactjs, typescript, webpack
- Language: TypeScript
- Homepage: https://compiledcssinjs.com
- Size: 14.1 MB
- Stars: 1,986
- Watchers: 12
- Forks: 66
- Open Issues: 125
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: security-assistant.yml
Awesome Lists containing this project
- awesome-list - compiled - in-JS library for React. | atlassian-labs | 1433 | (TypeScript)
README
# Compiled
A familiar and performant compile time [CSS-in-JS](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js) library for [React](https://reactjs.org/).
[](./LICENSE)
[](https://www.npmjs.com/package/@compiled/react)
[](./CONTRIBUTING.md)
[Get started now ➚](https://compiledcssinjs.com/docs/installation)
## Usage
```jsx
import { styled, ClassNames } from '@compiled/react';
// Tie styles to an element
// 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
{({ css }) => children({ className: css({ fontSize: 12 }) })}
```
### 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.
```diff
-import { CC, CS } from '@compiled/react/runtime';
-
-const _2 = '._syaz1q9v{color: hotpink}';
-const _ = '._1wybfyhu{font-size: 48px}';
-
export const LargeHotPinkText = () => (
-
- {[_, _2]}
Hello world
-
);
```
```css
._1wybfyhu {
font-size: 48px;
}
._syaz1q9v {
color: hotpink;
}
```
See [CSS extraction](https://compiledcssinjs.com/docs/css-extraction-webpack) for more information.
## Installation
Install the [React](https://reactjs.org/) package.
```bash
npm install @compiled/react
```
Then configure your bundler of choice or use [Babel](https://babeljs.io/docs/en/config-files) directly.
### Webpack
Install the [Webpack](https://webpack.js.org) loader.
```bash
npm install @compiled/webpack-loader --save-dev
```
See [installation](https://compiledcssinjs.com/docs/installation#webpack) for more information.
### Parcel
Install the [Parcel v2](https://v2.parceljs.org/) configuration.
```bash
npm install @compiled/parcel-config --save-dev
```
Extend from the `.parcelrc` configuration:
```json
{
"extends": ["...", "@compiled/parcel-config"]
}
```
See [installation](https://compiledcssinjs.com/docs/installation#parcel) for more information.
### Babel
Install the [Babel](https://babeljs.io/) plugin.
```
npm install @compiled/babel-plugin --save-dev
```
See [installation](https://compiledcssinjs.com/docs/installation#babel) for more information.
## Contributions
Contributions are welcomed!
Please see [CONTRIBUTING.md](./CONTRIBUTING.md) to get started.
[](https://atlassian.com)