nano style

Gaya Nano

Bereaksi Fungsional CSS-in-Js

npm i nano-style

• Gunakan objek literal atau sintaks CSS
• Bereaksi murni - tidak ada efek samping
• Gaya fungsional
• Dukungan tema
• Rendering universal tanpa pengaturan tambahan
• Menghapus alat peraga yang didefinisikan sebagai proptipe dari html yang diberikan

Penggunaan

Sintaks literal objek

 import styled from 'nano-style'

const Button = styled ( 'button' ) ( props => ( {
  fontFamily : 'inherit' ,
  fontSize : '14px' ,
  fontWeight : props . theme . bold ,
  lineHeight : 16 / 14 ,
  display : 'inline-block' ,
  margin : 0 ,
  paddingLeft : props . theme . space [ 3 ] + 'px' ,
  paddingRight : props . theme . space [ 3 ] + 'px' ,
  paddingTop : props . theme . space [ 2 ] + 'px' ,
  paddingBottom : props . theme . space [ 2 ] + 'px' ,
  verticalAlign : 'middle' ,
  textAlign : 'center' ,
  textDecoration : 'none' ,
  borderRadius : props . theme . radius ,
  border : 0 ,
  appearance : 'none' ,
  color : 'white' ,
  backgroundColor : props . theme . colors . blue ,
  '&:hover' : {
    boxShadow : `inset 0 0 0 999px ${ darken ( 1 / 8 ) } `
  } ,
  '&:focus' : {
    outline : 0 ,
    boxShadow : `0 0 0 2px ${ props . theme . colors . blue } `
  } ,
  '&:active' : {
    boxShadow : `inset 0 0 8px ${ darken ( 1 / 4 ) } `
  } ,
  '&:disabled' : {
    opacity : 1 / 4
  }
} ) )

Sintaks CSS

 import styled from 'nano-style/css'

const Button = styled ( 'button' ) `
  font-family: inherit;
  font-size: 14px;
  font-weight: ${ props => props . theme . bold } ;
  line-height: ${ 16 / 14 } ;
  display: inline-block;
  margin: 0;
  padding-left: ${ props => props . theme . space [ 3 ] + 'px' } ;
  padding-right: ${ props => props . theme . space [ 3 ] + 'px' } ;
  padding-top: ${ props => props . theme . space [ 2 ] + 'px' } ;
  padding-bottom: ${ props => props . theme . space [ 2 ] + 'px' } ;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: ${ props => props . theme . radius } ;
  border: 0;
  appearance: none;
  color: white;
  background-color: props.theme.colors.blue;

  &:hover {
    box-shadow: inset 0 0 0 999px ${ darken ( 1 / 8 ) } ;
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px ${ props => props . theme . colors . blue } ;
  }

  &:active {
    box-shadow: inset 0 0 8px ${ darken ( 1 / 4 ) } ;
  }

  &:disabled {
    opacity: 1/4
  }
` 

Cara kerjanya

Menggunakan kemampuan React 16 untuk mengembalikan array elemen, gaya nano menghasilkan CSS selama rendering komponen dan menyisipkan CSS ke dalam elemen <style> yang diatur dengan komponen. Array yang dikembalikan terlihat seperti ini:

 return [
  < Style css = { css } /> ,
  < Component { ... props } />
]

Peringatan

Saat ini, pendekatan ini tidak berusaha untuk mendeduplikasi CSS berulang ketika satu komponen diterjemahkan dalam beberapa contoh. Meskipun ini berhasil, ini dapat menyajikan sedikit masalah kinerja ketika komponen digunakan beberapa kali dalam satu halaman.

Area potensial untuk perbaikan

• Mekanisme caching
• Plugin Babel

Lisensi MIT