nano style

nano-style

Réagir CSS-in-js fonctionnel

npm i nano-style

• Utilisez des littéraux d'objet ou une syntaxe CSS
• Pure React - Pas d'effets secondaires
• Styles fonctionnels
• Support de thème
• Rendu universel sans configuration supplémentaire
• Supprime les accessoires définis comme des propypes de HTML rendu

Usage

Syntaxe littérale d'objet

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

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

Comment ça marche

En utilisant la capacité de React 16 à retourner des tableaux d'éléments, le nano-style génère CSS pendant le rendu des composants et insère CSS dans un élément <style> incliné avec le composant. Le tableau retourné ressemble à ceci:

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

Mises en garde

Actuellement, cette approche n'essaie pas de déduir CSS répété lorsqu'un seul composant est rendu dans plusieurs cas. Bien que cela fonctionne, il peut présenter de légers problèmes de performances lorsqu'un composant est utilisé plusieurs fois dans une page.

Zones potentielles d'amélioration

• Mécanisme de mise en cache
• Plugin Babel

Licence MIT