Skip to content

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

License

Notifications You must be signed in to change notification settings

rlansky-percipient/tss-react

 
 

Repository files navigation

✨ 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%