tss react

Solution dynamique CSS-in-Ts, basée sur l'émotion

Accueil - Documentation - Playground

Vous pouvez considérer tss-react comme @emotion/jss .
Il s'agit, en substance, un équivalent de type type de l'API JSS mais alimenté par l'émotion, tout comme @emotion/styled est l'API des composants stylisés mais alimenté par l'émotion.

• Intégration transparente avec MUI.
• Fonctionne dans l'application et le routeur de page Next.js.
• ? ‍️ Aucune syntaxe de style personnalisée à apprendre, pas de raccourci, juste CSS.
• ? Génération de style dynamique: TSS permet de générer des styles basés sur les accessoires et les états internes des composants.
  Cela nous empêche malheureusement de prendre en charge le composant du serveur (RSC) dans next.js.
  Nous espérons le soutien futur de la RSC, subordonné à la fourniture d'une solution appropriée par Vercel et React.
  Si vous avez besoin d'un support RSC aujourd'hui, vous pouvez considérer zéro solutions d'exécution comme Panda-CSS ou Extrait de vanille, mais l'expression de styles complexes est beaucoup plus difficile dans ce paradigme.
• Votre JSX reste lisible. Contrairement à une autre solution de style qui a tendance à encombrer le JSX, TSS permet d'isoler les styles de la structure des composants.
  Cela a été dit, parfois, il est tout simplement plus facile de rabaisser les styles directement dans vos composants, TSS le permet également.
• ? ️ éliminer les conflits de priorité CSS! Avec TSS, vous pouvez déterminer la priorité de plusieurs classes appliquées à un composant et augmenter arbitrairement la spécificité de certaines règles.
• ? Offre un équivalent de type type de la syntaxe JSS $ .
• Personnalisez librement le cache @emotion sous-jacent.
• API Amélioration de l'API withStyles , pour vous aider à migrer loin de @ Material-UI V4.
• Construisez au-dessus de @emotion/react , il a très peu d'impact sur la taille du bundle aux côtés de MUI (~ 5 Ko Minziped).
• ⬆️ 'tss-react' peut être utilisé comme remplacement avantageux de @ Material-UI V4 makeStyles et 'react-jss' .
• Soutenues dans un avenir prévisible, les problèmes sont traités dans les bons retards.
• ? Auteurs de la bibliothèque: tss-react ne sera pas encore une autre entrée dans vos peerDependencies .

Demo.webm

Bien que ce module soit écrit en TypeScript, l'utilisation de TypeScript dans votre application est facultative (mais recommandée car elle est livrée avec des avantages exceptionnels pour vous et votre base de code).

Commencer

Plus le projet devient de plus en plus, plus je passe de temps à l'améliorer et à le maintenir. Merci pour votre soutien?

Inutile de mentionner que cette bibliothèque est fortement inspirée par JSS, la solution OG CSS-in-JS.

Développement

Exécution des applications de démonstration:

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 

Coordonnées de sécurité

Pour signaler une vulnérabilité de sécurité, veuillez utiliser le contact de sécurité Tidelift. Tidelift coordonnera le correctif et la divulgation.