Скачать aphrodite jss - aphrodite jss Source Code Скачать

aphrodite jss

Другой исходный код

1.0.0

Скачать

Афродитоподобный API на вершине JSS.

Этот проект представляет собой слияние хороших идей от Aphrodite и JSS. Он обеспечивает API афродиты, но устанавливает множество ограничений и предостережений, используя JSS в качестве двигателя рендеринга под капотом.

Хорошие части от Афродиты.

В значительной степени как встроенные стили, известные из React, за исключением того, что он позволяет использовать весь CSS.
CSS не генерируется до вызова функции css() . Только принятые правила преобразуются в строку CSS и инъецируются.
Тема возможна без какой -либо головной боли или интеграции фреймворка.

Преимущества по сравнению с афродитой.

Более мощный рендеринг абстракции через JSS под капюшоном. Вы используете все его плагины и JSON DSL. Чтобы назвать несколько:
- Дети, братья и сестры и любые другие виды селекторов. (JSS-вложенная)
- Глобальные стили, без автоматических имен-интервалов (JSS-Global).
Непосредственное визуализация на css() вызовет вызов. Это дает вам доступ к компьютерным стилям сразу после рендеринга, не нужно использовать setTimeout() . Это также избегает дополнительных перерывов и перекрасов, которые могут вызвать мерцающие и общие накладные расходы.
Нет авто "! Важная" вставка. Вы можете написать плагин для этого, хотя.

Пример

 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

Создать лист стиля.

StyleSheet.create(styles)

Создание функции ничего не визуалирует, она просто регистрирует ваши стили.

Возвращает объект, где имена ключей соответствуют исходным стилям obejct.

Внедрять правила.

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

Вводит ранее определенное правило в DOM. Это делается в синхронизации, поэтому правило CSS немедленно доступно.

Возвращает имя класса.

Формат стилей.

Формат для стилей определяется в JSS. Aprodisiac использует JSS-Preset-Default, поэтому все предустановки по умолчанию уже на месте.

Настройка JSS.

aphroditeJss(jss, [options])

Вы можете передать свой собственный экземпляр JSS с помощью пользовательской настройки.

Возвращает интерфейс Афродиты.

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

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

Рендеринг сервер.

Есть 2 функции, которые вам нужно знать - toString() и reset() . Поскольку Aphrodite-JSS не может знать, что вы выполняете новый ответ, вам необходимо получить CSS ( toString() ) при обработке первого запроса и reset() для очистки стилей, которые создала ваша текущая страница.

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

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

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