aphrodite jssダウンロード-Aphrodite aphrodite jssソースコードのダウンロード

aphrodite jss

その他のソースコード

1.0.0

ダウンロード

JSSの上にあるアフロディーテのようなAPI。

このプロジェクトは、アフロディーテとJSSからの良いアイデアの合併です。アフロディーテのAPIを提供しますが、JSSをフードの下でレンダリングエンジンとして使用することにより、多くの制限と警告を修正します。

アフロディーテの良い部分。

CSS全体を使用できることを除いて、Reactから知られているインラインスタイルによく似ています。
css()関数の呼び出しまでCSSは生成されません。合格したルールのみがCSS文字列に変換され、注入されます。
頭痛やフレームワークの統合なしでは、テーマが可能です。

アフロディーテと比較した利点。

フードの下でのJSSを介したより強力なレンダリング抽象化。すべてのプラグインとJSON DSLを使用しています。いくつかの名前を付けるために：
- 子供、兄弟、その他の種類のセレクター。（jss-nested）
- 自動名のないグローバルスタイル（JSS-Global）。
css()呼び出しの呼び出しを即座にレンダリングします。レンダリング直後に計算されたスタイルにアクセスできます。SettimeOut 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)

CREATE関数は何もレンダリングしません。スタイルを登録するだけです。

キー名が元のスタイルに対応するオブジェクトを返します。

ルールを注入します。

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

以前に定義されたルールをDOMに注入します。これは同期して行われるため、CSSルールはすぐに利用可能になります。

クラス名を返します。

スタイル形式。

スタイルの形式はJSSで定義されています。 AptodisiacはJSS-PreSet-Defaultを使用しているため、すべてのデフォルトプリセットが既に整っています。

JSSのカスタマイズ。

aphroditeJss(jss, [options])

カスタムセットアップで独自のJSSインスタンスを渡すことができます。

Aphroditeのインターフェイスを返します。

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

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

サーバーサイドレンダリング。

知っておく必要がある2つの関数 - toString()とreset()があります。 Aphrodite-JSSは新しい応答をレンダリングしていることを知らないため、最初のリクエストを処理し、 reset()を呼び出して現在のページが作成したスタイルをクリーンアップするときにCSS（ toString() ）を取得する必要があります。

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

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

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