{"id":13474606,"url":"https://github.com/atlassian-labs/compiled","last_synced_at":"2026-04-02T18:56:04.516Z","repository":{"id":36987858,"uuid":"227810030","full_name":"atlassian-labs/compiled","owner":"atlassian-labs","description":"A familiar and performant compile time CSS-in-JS library for React.","archived":false,"fork":false,"pushed_at":"2025-04-16T02:01:18.000Z","size":16679,"stargazers_count":2006,"open_issues_count":141,"forks_count":68,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-17T17:18:02.832Z","etag":null,"topics":["babel","css","css-in-js","parcel","react","reactjs","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://compiledcssinjs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atlassian-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"security-assistant.yml","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-13T10:03:48.000Z","updated_at":"2025-04-16T12:18:44.000Z","dependencies_parsed_at":"2023-10-16T14:20:15.262Z","dependency_job_id":"16820ce0-5b41-48b0-aa43-5994e26b7cd5","html_url":"https://github.com/atlassian-labs/compiled","commit_stats":{"total_commits":1500,"total_committers":65,"mean_commits":"23.076923076923077","dds":0.6666666666666667,"last_synced_commit":"be74f07b04eaac48403ad5ee61b237089d696fcc"},"previous_names":["atlassian-labs/compiled-css-in-js"],"tags_count":488,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Fcompiled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Fcompiled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Fcompiled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atlassian-labs%2Fcompiled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atlassian-labs","download_url":"https://codeload.github.com/atlassian-labs/compiled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249634283,"owners_count":21303701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","css","css-in-js","parcel","react","reactjs","typescript","webpack"],"created_at":"2024-07-31T16:01:13.530Z","updated_at":"2026-04-02T18:56:04.472Z","avatar_url":"https://github.com/atlassian-labs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","🌐 Web Development - Frontend"],"sub_categories":[],"readme":"# Compiled\n\nA 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/).\n\n[![Apache 2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square)](./LICENSE)\n[![@compiled/react](https://img.shields.io/npm/v/@compiled/react?style=flat-square)](https://www.npmjs.com/package/@compiled/react)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](./CONTRIBUTING.md)\n\n[Get started now ➚](https://compiledcssinjs.com/docs/installation)\n\n## Usage\n\n\u003c!-- prettier-ignore --\u003e\n```jsx\nimport { styled, ClassNames } from '@compiled/react';\n\n// Tie styles to an element\n\u003cdiv css={{ color: 'purple' }} /\u003e\n\n// Create a component that ties styles to an element\nconst StyledButton = styled.button`\n  color: ${(props) =\u003e props.color};\n`;\n\n// Use a component where styles are not necessarily tied to an element\n\u003cClassNames\u003e\n  {({ css }) =\u003e children({ className: css({ fontSize: 12 }) })}\n\u003c/ClassNames\u003e\n```\n\n### Extract styles\n\nTurn 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.\n\n```diff\n-import { CC, CS } from '@compiled/react/runtime';\n-\n-const _2 = '._syaz1q9v{color: hotpink}';\n-const _ = '._1wybfyhu{font-size: 48px}';\n-\nexport const LargeHotPinkText = () =\u003e (\n-  \u003cCC\u003e\n-   \u003cCS\u003e{[_, _2]}\u003c/CS\u003e\n    \u003cspan className=\"_syaz1q9v _1wybfyhu\"\u003eHello world\u003c/span\u003e\n-  \u003c/CC\u003e\n);\n```\n\n```css\n._1wybfyhu {\n  font-size: 48px;\n}\n._syaz1q9v {\n  color: hotpink;\n}\n```\n\nSee [CSS extraction](https://compiledcssinjs.com/docs/css-extraction-webpack) for more information.\n\n## Installation\n\nInstall the [React](https://reactjs.org/) package.\n\n```bash\nnpm install @compiled/react\n```\n\nThen configure your bundler of choice or use [Babel](https://babeljs.io/docs/en/config-files) directly.\n\n### Webpack\n\nInstall the [Webpack](https://webpack.js.org) loader.\n\n```bash\nnpm install @compiled/webpack-loader --save-dev\n```\n\nSee [installation](https://compiledcssinjs.com/docs/installation#webpack) for more information.\n\n### Parcel\n\nInstall the [Parcel v2](https://v2.parceljs.org/) configuration.\n\n```bash\nnpm install @compiled/parcel-config --save-dev\n```\n\nExtend from the `.parcelrc` configuration:\n\n```json\n{\n  \"extends\": [\"...\", \"@compiled/parcel-config\"]\n}\n```\n\nSee [installation](https://compiledcssinjs.com/docs/installation#parcel) for more information.\n\n### Babel\n\nInstall the [Babel](https://babeljs.io/) plugin.\n\n```\nnpm install @compiled/babel-plugin --save-dev\n```\n\nSee [installation](https://compiledcssinjs.com/docs/installation#babel) for more information.\n\n## Contributions\n\nContributions are welcomed!\nPlease see [CONTRIBUTING.md](./CONTRIBUTING.md) to get started.\n\n[![Atlassian](https://raw.githubusercontent.com/atlassian-internal/oss-assets/master/banner-cheers-light.png)](https://atlassian.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Fcompiled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatlassian-labs%2Fcompiled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatlassian-labs%2Fcompiled/lists"}