{"id":4533,"url":"https://github.com/emotion-js/emotion","last_synced_at":"2025-09-09T19:55:16.855Z","repository":{"id":37281681,"uuid":"92570536","full_name":"emotion-js/emotion","owner":"emotion-js","description":"👩‍🎤 CSS-in-JS library designed for high performance style composition","archived":false,"fork":false,"pushed_at":"2025-01-13T07:18:15.000Z","size":24917,"stargazers_count":17754,"open_issues_count":355,"forks_count":1126,"subscribers_count":95,"default_branch":"main","last_synced_at":"2025-05-05T11:11:22.376Z","etag":null,"topics":["babel-plugin","css","css-in-js","emotion","react","reactjs"],"latest_commit_sha":null,"homepage":"https://emotion.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emotion-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":"emotion","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-05-27T04:23:45.000Z","updated_at":"2025-05-05T10:02:11.000Z","dependencies_parsed_at":"2022-07-14T04:40:28.645Z","dependency_job_id":"98b8be1a-15ea-4ff8-b4e1-6e16d84bc2e1","html_url":"https://github.com/emotion-js/emotion","commit_stats":{"total_commits":1761,"total_committers":333,"mean_commits":5.288288288288288,"dds":0.7859170925610448,"last_synced_commit":"e310c6e6a9f0b4f55030831ef65cd07c7105ae01"},"previous_names":["tkh44/emotion"],"tags_count":1305,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emotion-js%2Femotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emotion-js%2Femotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emotion-js%2Femotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emotion-js%2Femotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emotion-js","download_url":"https://codeload.github.com/emotion-js/emotion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252486929,"owners_count":21755835,"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-plugin","css","css-in-js","emotion","react","reactjs"],"created_at":"2024-01-05T20:17:15.472Z","updated_at":"2025-05-05T12:33:40.631Z","avatar_url":"https://github.com/emotion-js.png","language":"JavaScript","readme":"\u003cp align=\"center\" style=\"color: #343a40\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/emotion-js/emotion/main/emotion.png\" alt=\"Emotion logo\" height=\"150\" width=\"150\"\u003e\n  \u003ch1 align=\"center\"\u003eemotion\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eThe Next Generation of CSS-in-JS\u003c/p\u003e\n\n\u003e **Emotion 11 has been released 🚀 [See the blog post](https://emotion.sh/docs/emotion-11)**\n\n[![Backers on Open Collective](https://opencollective.com/emotion/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/emotion/sponsors/badge.svg)](#sponsors) [![npm version](https://badge.fury.io/js/emotion.svg)](https://badge.fury.io/js/emotion)\n[![Build Status](https://img.shields.io/circleci/project/github/emotion-js/emotion/main.svg)](https://circleci.com/gh/emotion-js/emotion)\n[![codecov](https://codecov.io/gh/emotion-js/emotion/branch/main/graph/badge.svg)](https://codecov.io/gh/emotion-js/emotion)\n![@emotion/css size](https://img.shields.io/bundlephobia/min/@emotion/css.svg?label=@emotion/css%20size)\n![@emotion/css gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/css.svg?label=@emotion/css%20gzip%20size)\n![@emotion/react size](https://img.shields.io/bundlephobia/min/@emotion/react.svg?label=@emotion/react%20size)\n![@emotion/react gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/react.svg?label=@emotion/react%20gzip%20size)\n![@emotion/styled size](https://img.shields.io/bundlephobia/min/@emotion/styled.svg?label=@emotion/styled%20size)\n![@emotion/styled gzip size](https://img.shields.io/bundlephobia/minzip/@emotion/styled.svg?label=@emotion/styled%20gzip%20size)\n[![slack](https://img.shields.io/badge/join-slack-green)](https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ)\n\nEmotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.\n\n# [👀 Demo Sandbox](https://codesandbox.io/s/pk1qjqpw67)\n\n# [📖 Docs](https://emotion.sh/docs/introduction)\n\nFrequently viewed docs:\n\n- [Introduction](https://emotion.sh/docs/introduction)\n- [Install](https://emotion.sh/docs/install)\n- [CSS Prop](https://emotion.sh/docs/css-prop)\n- [Styled Components](https://emotion.sh/docs/styled)\n- [Composition](https://emotion.sh/docs/composition)\n- [Nested Selectors](https://emotion.sh/docs/nested)\n- [Media Queries](https://emotion.sh/docs/media-queries)\n\n### Quick Start\n\nGet up and running with a single import.\n\n```bash\nnpm install --save @emotion/react\n```\n\n```jsx\n/** @jsx jsx */\nimport { jsx } from '@emotion/react'\n\nlet SomeComponent = props =\u003e {\n  return (\n    \u003cdiv\n      css={{\n        color: 'hotpink'\n      }}\n      {...props}\n    /\u003e\n  )\n}\n```\n\n### Do I Need To Use the Babel Plugin?\n\nThe babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.\n\nLook here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin)_\n\n### Demo Sandbox\n\n[Demo Code Sandbox](https://codesandbox.io/s/pk1qjqpw67)\n\n### Examples\n\n- [emotion website](site) [[Demo Here](https://emotion.sh)]\n- [next-hnpwa-guide-kit](https://github.com/tkh44/next-hnpwa-guide-kit) [[Demo Here](https://hnpwa.life)]\n- [reactivesearch](https://github.com/appbaseio/reactivesearch), a react UI library for Elasticsearch [[Website](https://opensource.appbase.io/reactivesearch/)]\n- [circuit-ui](https://github.com/sumup-oss/circuit-ui), a react component library built at SumUp [[Storybook](https://circuit.sumup.com/?path=/story/introduction-welcome--page)]\n- **open a PR and add yours!**\n\n### Ecosystem\n\n- [stylelint](https://github.com/stylelint/stylelint) - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n- [facepaint](https://github.com/emotion-js/facepaint)\n- [emotion-vue](https://github.com/egoist/emotion-vue)\n- [nuxt-community/emotion-module](https://github.com/nuxt-community/emotion-module) - Emotion module for Nuxt.js\n- [ember-emotion](https://github.com/alexlafroscia/ember-emotion)\n- [CSS to emotion transform](https://transform.now.sh/css-to-emotion/)\n- [ShevyJS](https://github.com/kyleshevlin/shevyjs)\n- [design-system-utils](https://github.com/mrmartineau/design-system-utils) - Utilities to give better access to your design system.\n- [polished](https://github.com/styled-components/polished) - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.\n- [monad-ui](https://github.com/muhajirdev/monad-ui/) - Utility First CSS-In-JS\n- [css-in-js-media](https://github.com/zx6658/css-in-js-media) - you can deal with responsive design using css-in-js easily with this `css-in-js-media` which is similar with include-media\n- [emotion-native-extended](https://github.com/ItsWendell/emotion-native-extended) - Better styling support for Emotion Native with [React Native Extended Stylesheet](https://github.com/vitalets/react-native-extended-stylesheet)\n\n### In the Wild\n\n- [feathery.io](https://feathery.io)\n- [frontity.org](https://frontity.org)\n- [abacusfi.com](https://abacusfi.com)\n- [healthline.com](https://www.healthline.com)\n- [nytimes.com](https://www.nytimes.com)\n- [vault.crucible.gg](http://vault.crucible.gg/)\n- [render.com](https://render.com)\n- [gatsbythemes.com](https://gatsbythemes.com/)\n- [blazity.com](https://blazity.com/)\n- [postmates.com](https://postmates.com/)\n- [thedisconnect.co](https://thedisconnect.co/one)\n- [zefenify.com](https://zefenify.com/about.html)\n- [sentry.io](https://sentry.io)\n- [comparett.com](https://comparett.com)\n- [Domain.com.au](https://www.domain.com.au)\n- [cyberhaven.com](https://cyberhaven.com)\n- [CommercialRealEstate.com.au](https://www.commercialrealestate.com.au)\n- [codecademy.com](https://www.codecademy.com)\n- [Apache Superset](https://superset.apache.org/)\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/emotion#sponsor)]\n\n\u003ca href=\"https://thinkmill.com.au\" target=\"_blank\"\u003e\u003cimg height=\"64\" alt=\"Thinkmill\" src=\"https://thinkmill.github.io/badge/wide-logo.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/emotion/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/emotion#backer)]\n\n\u003ca href=\"https://opencollective.com/emotion#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/emotion/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003ca href=\"https://github.com/emotion-js/emotion/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/emotion/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n","funding_links":["https://opencollective.com/emotion"],"categories":["Components","五、样式解决方案","Styling","CSS","JavaScript","Uncategorized","Frontend","General Resources","[React](https://github.com/facebook/react/)","HarmonyOS","前端开发框架及项目","React [🔝](#readme)","Frontend  frameworks \u0026 libraries","css","目录","reactjs","📖 Categories"],"sub_categories":["Styling","3.  Immutable 工具（辅助状态管理）","redux 扩展","Uncategorized","macros","Windows Manager","其他_文本生成、文本对话","运维\\\u0026DevOps","React Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femotion-js%2Femotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femotion-js%2Femotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femotion-js%2Femotion/lists"}