aphrodite-to-jss

This module is an Aphrodite compatible API on top of JSS. This module is designed to easily switch a large code base from Aphrodite to JSS.

The main difference with aphrodite-jss is that all of the Aphrodite styles are compatible (ex: css supports nested arrays, etc).

When using webpack or babel, you can resolve aphrodite to aphrodite-to-jss.

Installation

``js
$ yarn add aphrodite-to-jss
`

Usage

`js
import React, { Component } from 'react';
import { render } from 'react-dom';
import { StyleSheet, css } from 'aphrodite-to-jss';

const styles = StyleSheet.create({
'@global': {
html: {
textAlign: 'center'
}
},

red: {
backgroundColor: 'red'
},

blue: {
backgroundColor: 'blue'
},

blink: {
animationName: {
from: { opacity: 0 },
to: { opacity: 1 }
},
animationDuration: '3s, 1200ms',
animationIterationCount: 'infinite'
},

hover: {
':hover': {
backgroundColor: 'red'
}
},

small: {
'@media (max-width: 600px)': {
backgroundColor: 'red',
}
}
});

class App extends Component {
render() {
return

render(document.body, , () => {
// Difference with aphrodite: need to be called once in the browser
// When not using SSR: it can be called next to StyleSheet.create (before rendering)
StyleSheet.attach();
});
`

Compatibilities

aphrodite-to-jss takes the best of both worlds:

From Aphrodite:

- ✅ Pseudo-elements: { ':hover': { color: 'red' } }
- ✅ Animation keyframes: { animation: { from: { opacity: 0 }, to: { opacity: 1} } }
- ✅ SSR autoprefixing: properties are auto-prefixed during server and browser rendering
- ✅ Array fallback: { display: ['-webkit-flex', 'flex'] }
- ❌ Font-face: not currently implemented, but could be (PR welcomed !)

From JSS:

- ✅ JSS pseudo-elements: { '&:hover': { color: 'red' } }
- ✅ JSS nested: { '& .button': { color: 'red' } }
- ✅ JSS global styles: { '@global': { html: { color: 'black' } } }
- ✅ Sorted properties: { margin: 2, marginRight: 4 }

Server-side rendering (SSR)

The API for SSR differs with the one from Aphrodite.

There are 2 functions you need to know - StyleSheet.toCSSString() and StyleSheet.reset(). As aphrodite-to-jss can not know that you are rendering a new response, you need to get the CSS (StyleSheet.toCSSString()) when you are processing the first request and call StyleSheet.reset() to clean up the styles your current page has produced.

`js
import { StyleSheet } from 'aphrodite-jss'

function render() {
const app = renderApp()
const css = StyleSheet.toCSSString()
StyleSheet.reset()

return




${app}


}
`

API

#### StyleSheet.create(styles: StyleDefinitions): { [key: string]: SheetDefinition }

Create function doesn't render anything, it just registers your styles.
Returns an object, where key names correspond the original styles object.

#### StyleSheet.attach(): void

This method should be called in the browse, it attach the