claxed

Kelas dengan gaya komponen gaya yang sama
Lihat Demo · Laporkan Bug · Fitur Permintaan

Tentang proyek

Idenya lahir saat menggunakan CSS Tailwind, yang merupakan kelas yang sangat membantu Framewrok yang memberi kita semua kelas CSS untuk ukuran, warna, jarak. Namun bisa berantakan jika Anda memiliki banyak kelas untuk mengetik di dalam komponen. Dan belum lagi saat Anda menginginkan kelas bersyarat berdasarkan prop? ‍♂️

Dengan Claxed, sangat terinspirasi oleh komponen gaya, kami dapat menjaga DOM kami sedikit lebih bersih dengan bantuan beberapa utilitas seperti interpolasi alat peraga di dalam string template.

Instalasi

npm install claxed

atau

yarn add claxed

Penggunaan

Jika Anda tahu komponen gaya sintaks ini mungkin sudah akrab bagi Anda. Apa pun yang Anda ketik dalam string template akan dicetak dalam atribut class HTML dari komponen. Dalam contoh berikut setiap baris adalah kelas CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

Peta jalan

Lihat masalah terbuka untuk daftar fitur yang diusulkan (dan masalah yang diketahui).

Berkontribusi

Kontribusi inilah yang membuat komunitas open source menjadi tempat yang menakjubkan dari tempat belajar, terinspirasi, dan ciptakan. Kontribusi apa pun yang Anda buat sangat dihargai .

1. Garpu proyek
2. Buat Cabang Fitur Anda ( git checkout -b feature/AmazingFeature )
3. Komit perubahan Anda ( git commit -m 'Add some AmazingFeature' )
4. Dorong ke cabang ( git push origin feature/AmazingFeature )
5. Buka permintaan tarik

FAQ

Apakah urutan di mana saya mengetik kelas dengan claxed relevan untuk spesifisitas CSS mereka?

Tidak. Claxed hanya bertanggung jawab untuk menggabungkan kelas CSS dan menempatkan hasilnya di atribut HTML `Class` dari komponen. Jika Anda memiliki masalah spesifisitas, Anda harus melihat bagaimana kelas didefinisikan dalam file CSS

Lisensi

Didistribusikan di bawah lisensi MIT. Lihat LICENSE untuk informasi lebih lanjut.

Kontak

Tommaso Poletti - @tomma5o

Tautan Proyek: https://github.com/tomma5o/claxed