Descargar aphrodite jss - Descargar el código fuente aphrodite jss

aphrodite jss

Otro código fuente

1.0.0

Descargar

API similar a Afrodita en la parte superior de JSS.

Este proyecto es una fusión de buenas ideas de Afrodita y JSS. Proporciona una API de Afrodita pero fija muchas limitaciones y advertencias mediante el uso de JSS como motor de representación debajo del capó.

Buenas partes de Afrodita.

Casi como estilos en línea conocidos de React, excepto que permite usar todo el CSS.
No se genera CSS hasta que css() funcione la invocación. Solo las reglas aprobadas se convierten en una cadena CSS e inyectadas.
El tema es posible sin ningún dolor de cabeza o integración del marco.

Beneficios en comparación con Afrodita.

Más poderoso de la abstracción a través de JSS debajo del capó. Estás usando todos sus complementos y JSON DSL. Por nombrar algunos:
- Niños, hermanos y cualquier otro tipo de selectores. (JSS-Nested)
- Estilos globales, sin compactos de nombres automáticos (JSS-Global).
Renderizado inmediato sobre css() Llame a la invocación. Le brinda acceso a los estilos calculados justo después del render, no es necesario usar setTimeout() . También evita recalcs y repintes adicionales, lo que puede causar parpadeos y gastos generales de rendimiento general.
No hay una inserción automática "importante". Sin embargo, puede escribir un complemento para esto.

Ejemplo

 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

Crea una hoja de estilo.

StyleSheet.create(styles)

Crear función no representa nada, solo registra sus estilos.

Devuelve un objeto, donde los nombres clave corresponden a los estilos originales Obejct.

Reglas de inyección.

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

Inyecta una regla previamente definida al DOM. Esto se hace sincronizado, por lo que la regla CSS está disponible de inmediato.

Devuelve un nombre de clase.

Formato de estilos.

El formato para los estilos se define en JSS. Apodisiac utiliza JSS-Preset-Default, por lo que todos los preajustes predeterminados ya están en su lugar.

Personalización de JSS.

aphroditeJss(jss, [options])

Puede pasar su propia instancia de JSS con su configuración personalizada.

Devuelve la interfaz de Afrodita.

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

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

Renderización de servidores.

Hay 2 funciones que necesita saber: toString() y reset() . Como Afrodite-JSS no puede saber que está representando una nueva respuesta, debe obtener el CSS ( toString() ) cuando está procesando la primera solicitud y reset() de llamadas para limpiar los estilos que ha producido su página actual.

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

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

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