Téléchargement aphrodite jss - Téléchargement du code source aphrodite jss

aphrodite jss

Autre code source

1.0.0

Télécharger

API de type aphrodite au-dessus de JSS.

Ce projet est une fusion de bonnes idées d'Aphrodite et JSS. Il fournit une API d'Aphrodite mais corrige de nombreuses limitations et mises en garde en utilisant JSS comme moteur de rendu sous le capot.

Bonnes pièces d'Aphrodite.

Presque comme les styles en ligne connus de React, sauf qu'il permet d'utiliser l'intégralité du CSS.
Aucun CSS n'est généré avant l'invocation de la fonction css() . Seules les règles adoptées sont converties en chaîne CSS et injectées.
Le thème est possible sans aucun mal de tête ou intégrations de framework.

Avantages par rapport à Aphrodite.

Plus puissant, rendant l'abstraction à travers JSS sous le capot. Vous utilisez tous ses plugins et JSON DSL. Pour n'en nommer que quelques-uns:
- Enfants, frères et sœurs et tout autre type de sélecteurs. (NSS NESSID)
- Styles globaux, sans espace de noms automatique (JSS-Global).
Rendu immédiat sur css() Call Invocation. Il vous donne un accès aux styles calculés juste après le rendu, pas besoin d'utiliser setTimeout() . Il évite également les recalcs et les repeintes supplémentaires, ce qui peut provoquer des scintiller et des frais généraux de performance.
Pas d'insertion automatique "! Importante". Vous pouvez cependant écrire un plugin pour cela.

Exemple

 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

Créer une feuille de style.

StyleSheet.create(styles)

La fonction de création ne rend rien, elle enregistre simplement vos styles.

Renvoie un objet, où les noms de clés correspondent aux styles originaux obejct.

Injecter des règles.

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

Injecte une règle précédemment définie au DOM. Cela se fait en synchronisation, donc la règle CSS est immédiatement disponible.

Renvoie un nom de classe.

Format de styles.

Le format pour les styles est défini dans JSS. APRODISIAC utilise JSS-Preset-Default, donc tous les préréglages par défaut sont déjà en place.

Personnalisation du JSS.

aphroditeJss(jss, [options])

Vous pouvez transmettre votre propre instance JSS avec votre configuration personnalisée.

Renvoie l'interface d'Aphrodite.

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

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

Rendu serveur.

Il y a 2 fonctions que vous devez connaître - toString() et reset() . Comme Aphrodite-JSS ne peut pas savoir que vous rendez une nouvelle réponse, vous devez obtenir le CSS ( toString() ) lorsque vous traitez la première demande et reset() pour nettoyer les styles que votre page actuelle a produits.

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

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

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