tss react

Solusi CSS-in-TS dinamis, berdasarkan emosi

Beranda - Dokumentasi - Taman Bermain

Anda dapat menganggap tss-react sebagai @emotion/jss .
Pada dasarnya, setara dengan tipe-aman dari JSS API tetapi didukung oleh emosi, seperti @emotion/styled adalah API yang berkomponen bergaya tetapi didukung oleh emosi.

• Integrasi mulus dengan MUI.
• Bekerja di router aplikasi dan halaman selanjutnya.
• ? ‍♂️ Tidak ada sintaks penata gaya khusus untuk dipelajari, tidak ada steno, hanya CSS biasa.
• ? Generasi Gaya Dinamis: TSS memungkinkan untuk menghasilkan gaya berdasarkan alat peraga dan status internal komponen.
  Sayangnya ini mencegah kami dari mendukung komponen server (RSC) di Next.js.
  Kami tetap berharap untuk dukungan RSC di masa depan, bergantung pada penyediaan solusi yang sesuai oleh Vercel dan React.
  Jika Anda membutuhkan dukungan RSC hari ini, Anda dapat mempertimbangkan solusi nol runtime seperti Panda-CSS atau ekstrak vanilla, tetapi ekspresi gaya kompleks secara signifikan lebih sulit dalam paradigma ini.
• JSX Anda tetap dapat dibaca. Tidak seperti solusi gaya lain yang cenderung mengacaukan JSX, TSS memungkinkan mengisolasi gaya dari struktur komponen.
  Itu telah dikatakan, kadang -kadang hanya lebih mudah untuk melapisi gaya langsung di dalam komponen Anda, TSS juga memungkinkan ini.
• ? ️ menghilangkan konflik prioritas CSS! Dengan TSS, Anda dapat menentukan prioritas beberapa kelas yang diterapkan pada komponen dan secara sewenang -wenang meningkatkan kekhususan beberapa aturan.
• ? Menawarkan setara dengan jenis-aman dari sintaks JSS $ .
• Secara bebas menyesuaikan cache @emotion yang mendasarinya.
• Peningkatan withStyles API ditampilkan, untuk membantu Anda bermigrasi dari @material-ui v4.
• Bangun di atas @emotion/react , ini memiliki dampak yang sangat kecil pada ukuran bundel bersama MUI (~ 5kb minziped).
• ⬆️ 'tss-react' dapat digunakan sebagai pengganti yang menguntungkan untuk @material-ui v4 makeStyles dan 'react-jss' .
• Dipelihara untuk masa mendatang, masalah ditangani dalam penundaan yang baik.
• ? Penulis Perpustakaan: tss-react tidak akan menjadi entri lain di peerDependencies Anda.

demo.webm

Meskipun modul ini ditulis dalam TypeScript, menggunakan TypeScript dalam aplikasi Anda adalah opsional (tetapi disarankan karena dilengkapi dengan manfaat luar biasa untuk Anda dan basis kode Anda).

Mulai

Semakin banyak proyek, semakin banyak waktu yang saya habiskan untuk meningkatkan dan mempertahankannya. Terima kasih atas dukungan Anda?

Tak perlu disebutkan, perpustakaan ini sangat terinspirasi oleh JSS, solusi OG CSS-in-Js.

Perkembangan

Menjalankan aplikasi demo:

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 

Informasi kontak keamanan

Untuk melaporkan kerentanan keamanan, silakan gunakan kontak keamanan Tidelift. Tidelift akan mengoordinasikan perbaikan dan pengungkapan.