[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3239":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},3239,"emotion","emotion-js\u002Femotion","emotion-js","👩‍🎤 CSS-in-JS library designed for high performance style composition","https:\u002F\u002Femotion.sh\u002F",null,"JavaScript",18016,1135,92,307,0,1,13,44.17,"MIT License",false,"main",[24,25,26,5,27,28],"babel-plugin","css","css-in-js","react","reactjs","2026-06-12 02:00:47","\u003Cp align=\"center\" style=\"color: #343a40\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Femotion-js\u002Femotion\u002Fmain\u002Femotion.png\" alt=\"Emotion logo\" height=\"150\" width=\"150\">\n  \u003Ch1 align=\"center\">emotion\u003C\u002Fh1>\n\u003C\u002Fp>\n\u003Cp align=\"center\" style=\"font-size: 1.2rem;\">The Next Generation of CSS-in-JS\u003C\u002Fp>\n\n> **Emotion 11 has been released 🚀 [See the blog post](https:\u002F\u002Femotion.sh\u002Fdocs\u002Femotion-11)**\n\n[![Backers on Open Collective](https:\u002F\u002Fimg.shields.io\u002Fopencollective\u002Fbackers\u002Femotion)](#backers) [![Sponsors on Open Collective](https:\u002F\u002Fimg.shields.io\u002Fopencollective\u002Fsponsors\u002Femotion)](#sponsors) [![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Femotion.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Femotion)\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fcircleci\u002Fproject\u002Fgithub\u002Femotion-js\u002Femotion\u002Fmain.svg)](https:\u002F\u002Fcircleci.com\u002Fgh\u002Femotion-js\u002Femotion)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002Femotion-js\u002Femotion\u002Fbranch\u002Fmain\u002Fgraph\u002Fbadge.svg)](https:\u002F\u002Fcodecov.io\u002Fgh\u002Femotion-js\u002Femotion)\n![@emotion\u002Fcss size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002F@emotion\u002Fcss.svg?label=@emotion\u002Fcss%20size)\n![@emotion\u002Fcss gzip size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002F@emotion\u002Fcss.svg?label=@emotion\u002Fcss%20gzip%20size)\n![@emotion\u002Freact size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002F@emotion\u002Freact.svg?label=@emotion\u002Freact%20size)\n![@emotion\u002Freact gzip size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002F@emotion\u002Freact.svg?label=@emotion\u002Freact%20gzip%20size)\n![@emotion\u002Fstyled size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002F@emotion\u002Fstyled.svg?label=@emotion\u002Fstyled%20size)\n![@emotion\u002Fstyled gzip size](https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002F@emotion\u002Fstyled.svg?label=@emotion\u002Fstyled%20gzip%20size)\n[![slack](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fjoin-slack-green)](https:\u002F\u002Fjoin.slack.com\u002Ft\u002Femotion-slack\u002Fshared_invite\u002Fzt-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:\u002F\u002Fcodesandbox.io\u002Fs\u002Fpk1qjqpw67)\n\n# [📖 Docs](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fintroduction)\n\nFrequently viewed docs:\n\n- [Introduction](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fintroduction)\n- [Install](https:\u002F\u002Femotion.sh\u002Fdocs\u002Finstall)\n- [CSS Prop](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fcss-prop)\n- [Styled Components](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fstyled)\n- [Composition](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fcomposition)\n- [Nested Selectors](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fnested)\n- [Media Queries](https:\u002F\u002Femotion.sh\u002Fdocs\u002Fmedia-queries)\n\n### Quick Start\n\nGet up and running with a single import.\n\n```bash\nnpm install --save @emotion\u002Freact\n```\n\n```jsx\n\u002F** @jsx jsx *\u002F\nimport { jsx } from '@emotion\u002Freact'\n\nlet SomeComponent = props => {\n  return (\n    \u003Cdiv\n      css={{\n        color: 'hotpink'\n      }}\n      {...props}\n    \u002F>\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:\u002F\u002Fgithub.com\u002Femotion-js\u002Femotion\u002Ftree\u002Fmain\u002Fpackages\u002Fbabel-plugin)_\n\n### Demo Sandbox\n\n[Demo Code Sandbox](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fpk1qjqpw67)\n\n### Examples\n\n- [emotion website](site) [[Demo Here](https:\u002F\u002Femotion.sh)]\n- [next-hnpwa-guide-kit](https:\u002F\u002Fgithub.com\u002Ftkh44\u002Fnext-hnpwa-guide-kit) [[Demo Here](https:\u002F\u002Fhnpwa.life)]\n- [reactivesearch](https:\u002F\u002Fgithub.com\u002Fappbaseio\u002Freactivesearch), a react UI library for Elasticsearch [[Website](https:\u002F\u002Fopensource.appbase.io\u002Freactivesearch\u002F)]\n- [circuit-ui](https:\u002F\u002Fgithub.com\u002Fsumup-oss\u002Fcircuit-ui), a react component library built at SumUp [[Storybook](https:\u002F\u002Fcircuit.sumup.com\u002F?path=\u002Fstory\u002Fintroduction-welcome--page)]\n- **open a PR and add yours!**\n\n### Ecosystem\n\n- [stylelint](https:\u002F\u002Fgithub.com\u002Fstylelint\u002Fstylelint) - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.\n- [facepaint](https:\u002F\u002Fgithub.com\u002Femotion-js\u002Ffacepaint)\n- [emotion-vue](https:\u002F\u002Fgithub.com\u002Fegoist\u002Femotion-vue)\n- [nuxt-community\u002Femotion-module](https:\u002F\u002Fgithub.com\u002Fnuxt-community\u002Femotion-module) - Emotion module for Nuxt.js\n- [ember-emotion](https:\u002F\u002Fgithub.com\u002Falexlafroscia\u002Fember-emotion)\n- [CSS to emotion transform](https:\u002F\u002Ftransform.now.sh\u002Fcss-to-emotion\u002F)\n- [ShevyJS](https:\u002F\u002Fgithub.com\u002Fkyleshevlin\u002Fshevyjs)\n- [design-system-utils](https:\u002F\u002Fgithub.com\u002Fmrmartineau\u002Fdesign-system-utils) - Utilities to give better access to your design system.\n- [polished](https:\u002F\u002Fgithub.com\u002Fstyled-components\u002Fpolished) - Lightweight set of Sass\u002FCompass-style mixins\u002Fhelpers for writing styles in JavaScript.\n- [monad-ui](https:\u002F\u002Fgithub.com\u002Fmuhajirdev\u002Fmonad-ui\u002F) - Utility First CSS-In-JS\n- [css-in-js-media](https:\u002F\u002Fgithub.com\u002Fzx6658\u002Fcss-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:\u002F\u002Fgithub.com\u002FItsWendell\u002Femotion-native-extended) - Better styling support for Emotion Native with [React Native Extended Stylesheet](https:\u002F\u002Fgithub.com\u002Fvitalets\u002Freact-native-extended-stylesheet)\n\n### In the Wild\n\n- [feathery.io](https:\u002F\u002Ffeathery.io)\n- [frontity.org](https:\u002F\u002Ffrontity.org)\n- [abacusfi.com](https:\u002F\u002Fabacusfi.com)\n- [healthline.com](https:\u002F\u002Fwww.healthline.com)\n- [nytimes.com](https:\u002F\u002Fwww.nytimes.com)\n- [vault.crucible.gg](http:\u002F\u002Fvault.crucible.gg\u002F)\n- [render.com](https:\u002F\u002Frender.com)\n- [gatsbythemes.com](https:\u002F\u002Fgatsbythemes.com\u002F)\n- [blazity.com](https:\u002F\u002Fblazity.com\u002F)\n- [postmates.com](https:\u002F\u002Fpostmates.com\u002F)\n- [thedisconnect.co](https:\u002F\u002Fthedisconnect.co\u002Fone)\n- [zefenify.com](https:\u002F\u002Fzefenify.com\u002Fabout.html)\n- [sentry.io](https:\u002F\u002Fsentry.io)\n- [comparett.com](https:\u002F\u002Fcomparett.com)\n- [Domain.com.au](https:\u002F\u002Fwww.domain.com.au)\n- [cyberhaven.com](https:\u002F\u002Fcyberhaven.com)\n- [CommercialRealEstate.com.au](https:\u002F\u002Fwww.commercialrealestate.com.au)\n- [codecademy.com](https:\u002F\u002Fwww.codecademy.com)\n- [Apache Superset](https:\u002F\u002Fsuperset.apache.org\u002F)\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:\u002F\u002Fopencollective.com\u002Femotion#sponsor)]\n\n\u003Ca href=\"https:\u002F\u002Fthinkmill.com.au\" target=\"_blank\">\u003Cimg height=\"64\" alt=\"Thinkmill\" src=\"https:\u002F\u002Fthinkmill.github.io\u002Fbadge\u002Fwide-logo.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fsponsor\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https:\u002F\u002Fopencollective.com\u002Femotion#backer)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Femotion#backers\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fbackers.svg?width=890\">\u003C\u002Fa>\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Femotion-js\u002Femotion\u002Fgraphs\u002Fcontributors\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Femotion\u002Fcontributors.svg?width=890&button=false\" \u002F>\u003C\u002Fa>\n","Emotion 是一个高性能的CSS-in-JS库，专为React应用设计。它支持通过字符串或对象的形式快速编写样式，并且具有可预测的样式组合机制以避免CSS中的特异性问题。此外，Emotion还提供了源映射和标签功能来增强开发者体验，在生产环境中则利用重缓存技术保证了良好的性能表现。适用于需要高效灵活地管理组件样式、同时追求开发便捷性的前端项目场景中使用。",2,"2026-06-11 02:53:03","top_language"]