nano style

Nano-Stil

React funktionelle CSS-in-Js

npm i nano-style

• Verwenden Sie Objektliterale oder CSS -Syntax
• Reines Reaktieren - keine Nebenwirkungen
• Funktionsstile
• Themenunterstützung
• Universelles Rendering ohne zusätzliche Setup
• Entfernt Requisiten,

Verwendung

Objektliteral -Syntax

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

CSS -Syntax

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

Wie es funktioniert

Mit React 16s Fähigkeit, Elementarrays zurückzugeben, erzeugt der Nano-Stil CSS während der Komponentenwiedergabe und fügt CSS in ein mit der Komponente eingestellter <style> -Elements ein. Das zurückgegebene Array sieht ungefähr so aus:

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

Einschränkungen

Derzeit versucht dieser Ansatz nicht, wiederholte CSS zu deduplizieren, wenn eine einzelne Komponente in mehreren Fällen gerendert wird. Während dies funktioniert, kann es einige geringfügige Leistungsprobleme darstellen, wenn eine Komponente mehrmals auf einer Seite verwendet wird.

Potenzielle Verbesserungsbereiche

• Caching -Mechanismus
• Babel -Plugin

MIT -Lizenz