nano style

Nano-estilo

Reaja CSS-in-JS funcional

npm i nano-style

• Use literais de objeto ou sintaxe CSS
• React puro - sem efeitos colaterais
• Estilos funcionais
• Apoio ao tema
• Renderização universal sem configuração adicional
• Remove os adereços definidos como acessórios de html renderizados

Uso

Sintaxe literal do objeto

 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
  }
} ) )

Sintaxe 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
  }
` 

Como funciona

Usando a capacidade do React 16 de retornar matrizes de elementos, o estilo nano gera CSS durante a renderização e insere o CSS em um elemento <style> inlinhado com o componente. A matriz devolvida se parece mais disso:

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

Advertências

Atualmente, essa abordagem não tenta deduzir CSS repetidos quando um único componente é renderizado em várias instâncias. Embora isso funcione, pode apresentar alguns pequenos problemas de desempenho quando um componente é usado várias vezes em uma página.

Áreas potenciais de melhoria

• Mecanismo de cache
• Babel Plugin

MIT Licença