Download aphrodite jss - Unduh Kode Sumber aphrodite jss

aphrodite jss

Kode sumber lainnya

1.0.0

Unduh

API seperti Aphrodite di atas JSS.

Proyek ini adalah penggabungan ide -ide bagus dari Aphrodite dan JSS. Ini memberikan API aphrodite tetapi memperbaiki banyak keterbatasan dan peringatan dengan menggunakan JSS sebagai mesin rendering di bawah kap.

Bagian yang bagus dari Aphrodite.

Cukup banyak seperti gaya inline yang diketahui dari React, kecuali memungkinkan untuk menggunakan seluruh CSS.
Tidak ada CSS yang dihasilkan sampai doa fungsi css() . Hanya aturan yang disahkan yang dikonversi ke string CSS dan disuntikkan.
Tema dimungkinkan tanpa sakit kepala atau integrasi kerangka kerja.

Manfaat dibandingkan dengan aphrodite.

Lebih kuat memberikan abstraksi melalui JSS di bawah kap. Anda menggunakan semua plugin dan JSON DSL. Untuk beberapa nama:
- Anak -anak, saudara kandung dan jenis pemilih lainnya. (JSS Nested)
- Gaya Global, Tanpa Namespacing Otomatis (JSS-Global).
Render langsung pada doa panggilan css() . Ini memberi Anda akses ke gaya yang dihitung tepat setelah render, tidak perlu menggunakan setTimeout() . Ini juga menghindari penghitungan ulang tambahan dan mengecat ulang, yang dapat menyebabkan berkedip dan overhead kinerja umum.
Tidak ada penyisipan "penting". Anda dapat menulis plugin untuk ini.

Contoh

 import { StyleSheet , css } from 'aphrodite-jss'

const sheet = StyleSheet . create ( {
  button : {
    border : '1px solid' ,
    borderRadius : 5 ,
    fontSize : 'inherit' ,
    lineHeight : '2.3em' ,
    padding : '0 1em' ,
    boxShadow : 'inset 0 1px 0 rgba(255, 255, 255, 0.1)' ,
    textShadow : '0 -1px 0 rgba(0, 0, 0, 0.25)' ,
    backgroundRepeat : 'repeat-x' ,
    color : '#fff' ,
    fontWeight : 400 ,
    '& span' : {
      marginRight : 5 ,
      color : '#fff'
    }
  } ,
  primary : {
    borderColor : '#1177cd #0f6ab6 #0d5c9e' ,
    backgroundImage : 'linear-gradient(to bottom, #2591ed 0%, #1177cd 100%)' ,
    backgroundColor : '#1385e5' ,
    '&:hover' : {
      backgroundImage : 'linear-gradient(to bottom, #3c9def 0%, #1385e5 100%)'
    }
  }
} )

document . body . innerHTML = `
  <button class=" ${ css ( sheet . button , sheet . primary ) } ">
    <span>&#10004;</span>Primary
  </button>
`

API

Buat Lembar Gaya.

StyleSheet.create(styles)

Buat fungsi tidak membuat apa pun, itu hanya mendaftarkan gaya Anda.

Mengembalikan objek, di mana nama -nama kunci sesuai dengan gaya asli obejct.

Aturan menyuntikkan.

css(rule1, [rule2], [rule3], ...)

Menyuntikkan aturan yang ditentukan sebelumnya ke DOM. Ini dilakukan secara sinkron, sehingga aturan CSS segera tersedia.

Mengembalikan nama kelas.

Format Gaya.

Format untuk gaya didefinisikan dalam JSS. Aprodisiac menggunakan JSS-preset-default, jadi semua preset default sudah ada.

Menyesuaikan JSS.

aphroditeJss(jss, [options])

Anda dapat lulus instance JSS Anda sendiri dengan pengaturan khusus Anda.

Mengembalikan antarmuka Aphrodite.

 import aphroditeJss from 'aphrodite-jss'
import { create } from 'jss'

const { css , StyleSheet } = aphroditeJss ( create ( ) )

Rendering server.

Ada 2 fungsi yang perlu Anda ketahui - toString() dan reset() . Karena Aphrodite-JSS tidak dapat mengetahui bahwa Anda memberikan respons baru, Anda perlu mendapatkan CSS ( toString() ) ketika Anda memproses permintaan pertama dan panggilan reset() untuk membersihkan gaya yang telah dihasilkan oleh halaman Anda saat ini.

 import { toString , reset } from 'aphrodite-jss'

function render ( ) {
  const app = renderApp ( )
  const css = toString ( )
  reset ( )

  return `
    <head>
      <style>
        ${ css }
      </style>
    <head>
    <body>
      ${ app }
    </body>
  `
}