TSS React

Dynamic CSS-in-TS solution, based on Emotion
GitHub
631
Created 4 years ago, last commit 17 days ago
15 contributors
799 commits
Stars added on GitHub, month by month
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+0.1
/day
Last month
+0.8
/day
Last 12 months
+0.3
/day
Package on NPM
tss-react
4.9.13
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

✨ Dynamic CSS-in-TS solution, based on Emotion ✨

Home - Documentation - Playground

You can think of tss-react as @emotion/jss.
It's, in essence, a type-safe equivalent of the JSS API but powered by Emotion, just like @emotion/styled is the styled-components API but powered by Emotion.

demo.webm

While this module is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase).


Get started πŸš€

The more ⭐️ the project gets, the more time I spend improving and maintaining it. Thank you for your support 😊

Needless to mention, this library is heavily inspired by JSS, the OG CSS-in-JS solution.

Development

Running the demo apps:

git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
npx tsc -w & npx tsc --module es2015 --outDir dist/esm -w
# Open another Terminal
yarn start_spa  # For testing in in a Create React App setup
yarn start_ssr # For testing in a Next.js setup
yarn start_appdir #  Next.js 13 setup in App directory mode

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.