aphrodite jss Download - aphrodite jss Quellcode Download

aphrodite jss

Anderer Quellcode

1.0.0

Herunterladen

Aphroditähnliche API auf JSS.

Dieses Projekt ist eine Zusammenführung guter Ideen von Aphrodite und JSS. Es bietet eine API von Aphrodite, behebt jedoch viele Einschränkungen und Vorbehalte, indem JSS als Rendering -Motor unter der Motorhaube verwendet wird.

Gute Teile von Aphrodite.

Ähnlich wie bei React -Stilen, außer dass es die gesamte CSS verwenden kann.
Bis zum Aufruf von css() werden keine CSS erzeugt. Nur die bestandenen Regeln werden in eine CSS -Zeichenfolge umgewandelt und injiziert.
Themen ist ohne Kopfschmerzen oder Framework -Integrationen möglich.

Vorteile im Vergleich zu Aphrodite.

Stärkere Abstraktion durch JSS unter der Motorhaube. Sie verwenden alle Plugins und JSON DSL. Um nur einige zu nennen:
- Kinder, Geschwister und andere Arten von Selektoren. (JSS-nestiert)
- Globale Stile ohne automatische Namenspazierungen (JSS-Global).
Sofortiges Rendern bei css() Anrufaufruf. Sie erhalten einen Zugriff auf berechnete Stile direkt nach dem Rendern und müssen setTimeout() nicht verwenden. Es vermeidet auch zusätzliche Rückrichtungen und Repainten, die Flackern und allgemeine Leistungsaufwand verursachen können.
KEIN AUTO "! WICHTIGE" Insertion. Sie können dafür jedoch ein Plugin schreiben.

Beispiel

 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

Erstellen Sie Stylesheet.

StyleSheet.create(styles)

Erstellen von Funktionen rendert nichts, sondern registriert nur Ihre Stile.

Gibt ein Objekt zurück, bei dem die Schlüsselnamen den Originalstilen für Obejct entsprechen.

Regeln injizieren.

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

Injiziert eine zuvor definierte Regel in die DOM. Dies geschieht synchron, sodass die CSS -Regel sofort verfügbar ist.

Gibt einen Klassennamen zurück.

Stylesformat.

Das Format für Stile ist in JSS definiert. APRODISIAC verwendet JSS-Preset-Default, sodass alle Standardvoreinstellungen bereits vorhanden sind.

JSS anpassen.

aphroditeJss(jss, [options])

Sie können Ihre eigene JSS -Instanz mit Ihrem benutzerdefinierten Setup übergeben.

Gibt die Schnittstelle von Aphrodite zurück.

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

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

Serverside -Rendering.

Es gibt 2 Funktionen, die Sie kennen müssen - toString() und reset() . Da Aphrodite-JSS nicht wissen kann, dass Sie eine neue Antwort abgeben, müssen Sie das CSS ( toString() ) erhalten, wenn Sie die erste Anfrage bearbeiten und reset() aufrufen, um die Stile zu beseitigen, die Ihre aktuelle Seite erstellt hat.

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

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

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