Aphrodite compatible API on top of JSS.
npm install aphrodite-to-jssThis 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.
``js`
$ yarn add aphrodite-to-jss
`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();
});
`
aphrodite-to-jss takes the best of both worlds:
From Aphrodite:
- ✅ Pseudo-elements: { ':hover': { color: 'red' } }{ animation: { from: { opacity: 0 }, to: { opacity: 1} } }
- ✅ Animation keyframes: { display: ['-webkit-flex', 'flex'] }
- ✅ SSR autoprefixing: properties are auto-prefixed during server and browser rendering
- ✅ Array fallback:
- ❌ Font-face: not currently implemented, but could be (PR welcomed !)
From JSS:
- ✅ JSS pseudo-elements: { '&:hover': { color: 'red' } }{ '& .button': { color: 'red' } }
- ✅ JSS nested: { '@global': { html: { color: 'black' } } }
- ✅ JSS global styles: { margin: 2, marginRight: 4 }
- ✅ Sorted properties:
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
}
`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(): voidThis method should be called in the browse, it attach the