{"id":15624810,"url":"https://github.com/garronej/tss-react","last_synced_at":"2025-05-14T02:05:59.682Z","repository":{"id":39887321,"uuid":"341849583","full_name":"garronej/tss-react","owner":"garronej","description":"✨ Dynamic CSS-in-TS solution, based on Emotion","archived":false,"fork":false,"pushed_at":"2025-05-07T14:41:52.000Z","size":124093,"stargazers_count":687,"open_issues_count":24,"forks_count":38,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-10T04:33:29.644Z","etag":null,"topics":["css","css-in-js","jss","material-ui","nextjs","react","react-hooks","ssr","typescript"],"latest_commit_sha":null,"homepage":"https://tss-react.dev","language":"TypeScript","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/garronej.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["garronej"],"custom":["https://www.ringerhq.com/experts/garronej"]}},"created_at":"2021-02-24T09:39:56.000Z","updated_at":"2025-05-07T14:38:01.000Z","dependencies_parsed_at":"2024-03-12T23:34:21.693Z","dependency_job_id":"40a3752a-f4e2-4072-b692-2ead56c2c5cc","html_url":"https://github.com/garronej/tss-react","commit_stats":{"total_commits":741,"total_committers":17,"mean_commits":"43.588235294117645","dds":"0.30634278002699056","last_synced_commit":"7851b98ea1b6a43a0fe4e6c4d82cf21f2ee91bef"},"previous_names":["garronej/jss-emotion"],"tags_count":200,"template":false,"template_full_name":"garronej/ts-ci","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Ftss-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Ftss-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Ftss-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garronej%2Ftss-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garronej","download_url":"https://codeload.github.com/garronej/tss-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254052692,"owners_count":22006716,"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":["css","css-in-js","jss","material-ui","nextjs","react","react-hooks","ssr","typescript"],"created_at":"2024-10-03T10:00:53.154Z","updated_at":"2025-05-14T02:05:54.668Z","avatar_url":"https://github.com/garronej.png","language":"TypeScript","funding_links":["https://github.com/sponsors/garronej","https://www.ringerhq.com/experts/garronej","https://tidelift.com/security"],"categories":["Libraries","TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/6702424/109334865-8f85bf00-7861-11eb-90ab-da36f9afe1b6.png\"\u003e  \n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ci\u003e✨ Dynamic CSS-in-TS solution, based on Emotion ✨\u003c/i\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/garronej/tss-react/actions\"\u003e\n      \u003cimg src=\"https://github.com/garronej/tss-react/workflows/ci/badge.svg?branch=main\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/tss-react\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dm/tss-react\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/garronej/tss-react/blob/main/LICENSE\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/l/tss-react\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.tss-react.dev\"\u003eHome\u003c/a\u003e\n   - \n  \u003ca href=\"https://docs.tss-react.dev\"\u003eDocumentation\u003c/a\u003e\n  -\n  \u003ca href=\"https://stackblitz.com/edit/vercel-next-js-bmc6dm?file=ui%2FTssLogo.tsx\"\u003ePlayground\u003c/a\u003e\n\u003c/p\u003e\n\nYou can think of `tss-react` as `@emotion/jss`.  \nIt's, in essence, a type-safe equivalent of [the JSS API](https://cssinjs.org/?v=v10.10.0#react-jss-example) but powered by Emotion,\njust like `@emotion/styled` is the [styled-components API](https://styled-components.com/) but powered by Emotion.\n\n-   🚀 Seamless integration with [MUI](https://mui.com).\n-   🌐 Works in [Next.js App and Page Router](https://docs.tss-react.dev/ssr/next.js).\n-   🙅‍♂️ No custom styling syntax to learn, no shorthand, just plain CSS.\n-   💫 Dynamic Style Generation: TSS enables to generate styles based on the props and internal states of components.  \n    This unfortunately prevents us from supporting [Server Component (RSC)](https://nextjs.org/docs/getting-started/react-essentials#server-components) in Next.js.  \n    We remain hopeful for future support of RSC, contingent on [the provision of a suitable solution by Vercel and React](https://github.com/vercel/next.js/blob/dc6c22c99117bb48beedc4eed402a57b21f03963/docs/02-app/01-building-your-application/04-styling/03-css-in-js.mdx#L10-L12).  \n    If you need RSC support today, you can consider _zero runtime_ solutions like Panda-CSS or Vanilla Extract,\n    but the expression of complex styles is significantly harder in this paradigm.\n-   📚 Your JSX remains readable. Unlike other styling solution that tend to clutter the JSX, TSS enables [isolating the styles from the component structure](https://stackblitz.com/edit/vercel-next-js-bmc6dm?file=ui/TssLogo.tsx).  \n    That been said, sometime it's just easier to inline the styles directly within your components, [TSS enables this as well](https://stackblitz.com/edit/vercel-next-js-bmc6dm?file=ui/TssLogo_intertwined.tsx).\n-   🛡️ Eliminate CSS priority conflicts! With TSS you can determine the precedence of multiple classes applied to a component and [arbitrarily increase specificity of some rules](https://docs.tss-react.dev/increase-specificity).\n-   🧩 Offers a [type-safe equivalent of the JSS `$` syntax](https://docs.tss-react.dev/nested-selectors).\n-   ⚙️ Freely customize the underlying `@emotion` cache.\n-   ✨ Improved [`withStyles`](https://v4.mui.com/styles/api/#withstyles-styles-options-higher-order-component) API featured, to help you migrate away from @material-ui v4.\n-   🛠️ Build on top of [`@emotion/react`](https://emotion.sh/docs/@emotion/react), it has very little impact on the bundle size alongside mui (~5kB minziped).\n-   ⬆️ `'tss-react'` can be used as an advantageous replacement for [@material-ui v4 `makeStyles`](https://material-ui.com/styles/basics/#hook-api) and [`'react-jss'`](https://cssinjs.org/react-jss/?v=v10.9.0).\n-   🎯 [Maintained for the foreseeable future](https://github.com/mui-org/material-ui/issues/28463#issuecomment-923085976), issues are dealt with within good delays.\n-   📦 Library authors: [`tss-react` won’t be yet another entry in your `peerDependencies`](https://docs.tss-react.dev/publish-a-module-that-uses-tss).\n\n[demo.webm](https://github.com/garronej/tss-react/assets/6702424/feedb0fc-dd80-46b3-b22f-90d5dd2b36e4)\n\n\u003e While this module is written in TypeScript, using TypeScript in your application is optional\n\u003e (but recommended as it comes with outstanding benefits to both you and your codebase).\n\n\u003cp align=\"center\"\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://docs.tss-react.dev/setup\"\u003e\u003cb\u003eGet started 🚀\u003c/b\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nThe more ⭐️ the project gets, the more time I spend improving and maintaining it. Thank you for your support 😊\n\nNeedless to mention, this library is heavily inspired by [JSS](https://cssinjs.org/react-jss), the OG CSS-in-JS solution.\n\n# Development\n\nRunning the demo apps:\n\n```bash\ngit clone https://github.com/garronej/tss-react\ncd tss-react\nyarn\nyarn build\nnpx tsc -w \u0026 npx tsc --module es2015 --outDir dist/esm -w\n# Open another Terminal\nyarn start_spa  # For testing in in a Create React App setup\nyarn start_ssr # For testing in a Next.js setup\nyarn start_appdir #  Next.js 13 setup in App directory mode\n```\n\n## Security contact information\n\nTo report a security vulnerability, please use the\n[Tidelift security contact](https://tidelift.com/security).\nTidelift will coordinate the fix and disclosure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarronej%2Ftss-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarronej%2Ftss-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarronej%2Ftss-react/lists"}