tss react

Dynamische CSS-in-TS-Lösung, basierend auf Emotionen

Startseite - Dokumentation - Spielplatz

Sie können sich tss-react als @emotion/jss vorstellen.
Es ist im Wesentlichen ein Typ-Sicherheit-Äquivalent der JSS-API, aber von Emotionen angetrieben, genau wie @emotion/styled ist die API der gestylerischen Komponenten, aber von Emotionen angetrieben.

• Nahtlose Integration in MUI.
• Funktioniert in Next.js App und Page Router.
• ? ‍Eute keine benutzerdefinierte Styling -Syntax zum Lernen, keine Kurzform, einfach nur CSS.
• ? Dynamische Stilgenerierung: TSS ermöglicht es, Stile basierend auf den Requisiten und internen Zuständen von Komponenten zu generieren.
  Dies hindert uns leider daran, die Serverkomponente (RSC) in Next.js.
  Wir sind weiterhin zuversichtlich für die zukünftige Unterstützung von RSC, abhängig von der Bereitstellung einer geeigneten Lösung durch Vercel und React.
  Wenn Sie heute RSC-Unterstützung benötigen, können Sie keine Laufzeitlösungen wie Panda-CSS oder Vanilleextrakt in Betracht ziehen, aber der Ausdruck komplexer Stile ist in diesem Paradigma deutlich schwieriger.
• Ihr JSX bleibt lesbar. Im Gegensatz zu anderen Styling -Lösung, die dazu neigen, den JSX zu übergeben, ermöglicht TSS die Isolierung der Stile aus der Komponentenstruktur.
  Es wurde gesagt, dass es irgendwann einfacher ist, die Stile direkt in Ihren Komponenten zu investieren. TSS ermöglicht dies auch.
• "CSS -Konflikte beseitigen! Mit TSS können Sie die Vorrang mehrerer Klassen ermitteln, die auf eine Komponente angewendet werden und die Spezifität einiger Regeln willkürlich erhöhen.
• ? Bietet ein Typ-Safe-Äquivalent der JSS $ -Syntax.
• Passen Sie den zugrunde liegenden @emotion -Cache frei an.
• Verbesserte withStyles API, die Ihnen helfen, von @Material-UI V4 wegzuwandeln.
• Bauen Sie auf @emotion/react auf, sie hat neben MUI (~ 5 KB Münzpack) nur sehr geringe Auswirkungen auf die Bündelgröße.
• ⬆️ 'tss-react' kann als vorteilhafter Ersatz für @Material-UI V4 makeStyles und 'react-jss' verwendet werden.
• Auf absehbare Zeit werden Probleme in guten Verzögerungen behandelt.
• ? Bibliotheksautoren: tss-react ist kein weiterer Eintrag in Ihren peerDependencies .

Demo.Webm

Während dieses Modul in TypeScript geschrieben ist, ist die Verwendung von TypeScript in Ihrer Anwendung optional (aber empfohlen, da es sowohl für Sie als auch Ihre Codebasis hervorragende Vorteile bietet).

Fangen an

Je mehr atz das Projekt wird, desto mehr Zeit damit, es zu verbessern und zu pflegen. Vielen Dank für Ihre Unterstützung?

Es ist unnötig zu erwähnen, dass diese Bibliothek stark von JSS, der OG CSS-in-JS-Lösung, inspiriert ist.

Entwicklung

Ausführen der 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 

Sicherheitskontaktinformationen

Um eine Sicherheitsanfälligkeit zu melden, verwenden Sie bitte den Tidelift -Sicherheitskontakt. TIDELIFT koordiniert die Korrektur und Offenlegung.