Download de aphrodite jss - aphrodite jss Fonte Código Download

aphrodite jss

Outro código-fonte

1.0.0

Baixar

API do tipo Afrodite no topo do JSS.

Este projeto é uma fusão de boas idéias de Afrodite e JSS. Ele fornece uma API de Afrodite, mas corrige muitas limitações e advertências usando o JSS como um motor de renderização sob o capô.

Boas partes de Afrodite.

Praticamente como os estilos embutidos conhecidos do React, exceto que ele permite usar todo o CSS.
Nenhum CSS é gerado até a invocação de função css() . Somente as regras passadas são convertidas em uma corda CSS e injetadas.
O tema é possível sem dor de cabeça ou integrações da estrutura.

Benefícios em comparação com Afrodite.

Mais poderoso, tornando a abstração através do JSS sob o capô. Você está usando todos os seus plugins e JSON DSL. Para citar alguns:
- Crianças, irmãos e quaisquer outros tipos de seletores. (JSS-Nested)
- Estilos globais, sem nome de automóvel (JSS-Global).
Renderização imediata no css() Chamada Invocação. Ele oferece acesso a estilos computados logo após a renderização, não é necessário usar setTimeout() . Ele também evita recalcs e repetições adicionais, o que pode causar pisquecedores e sobrecarga de desempenho geral.
Sem auto "!! IMPORTANTE" Inserção. Você pode escrever um plugin para isso.

Exemplo

 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

Crie folha de estilo.

StyleSheet.create(styles)

Criar função não renderiza nada, apenas registra seus estilos.

Retorna um objeto, onde os nomes de chave correspondem aos estilos originais obejct.

Injetar regras.

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

Injeta uma regra previamente definida no DOM. Isso é feito em sincronia, portanto a regra CSS está disponível imediatamente.

Retorna um nome de classe.

Formato de estilos.

O formato para estilos é definido no JSS. A Apodisiac usa o JSS-Preset-Default, para que todas as predefinições padrão já estejam em vigor.

Personalizando JSS.

aphroditeJss(jss, [options])

Você pode passar sua própria instância JSS com sua configuração personalizada.

Retorna a interface de Afrodite.

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

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

Renderização de servidor.

Existem 2 funções que você precisa conhecer - toString() e reset() . Como o Aphrodite-JSS não pode saber que você está prestando uma nova resposta, você precisa obter o CSS ( toString() ) quando estiver processando a primeira solicitação e ligue para reset() para limpar os estilos que sua página atual produziu.

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

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

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