aphrodite-to-jss
Advanced tools
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.
$ yarn add aphrodite-to-jss
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 <div>
<span className={css(styles.red)}>
This is red.
</span>
<span className={css(styles.hover)}>
This turns red on hover.
</span>
<span className={css(styles.small)}>
This turns red when the browser is less than 600px width.
</span>
<span className={css(styles.red, styles.blue)}>
This is blue.
</span>
<span className={css(styles.blue, styles.blink)}>
This is blue and blink
</span>
<span className={css(styles.blue, styles.small)}>
This is blue and turns red when the browser is less than
600px width.
</span>
</div>;
}
}
render(document.body, <App />, () => {
// 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:
{ ':hover': { color: 'red' } }{ animation: { from: { opacity: 0 }, to: { opacity: 1} } }{ display: ['-webkit-flex', 'flex'] }From JSS:
{ '&:hover': { color: 'red' } }{ '& .button': { color: 'red' } }{ '@global': { html: { color: 'black' } } }{ margin: 2, marginRight: 4 }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.
import { StyleSheet } from 'aphrodite-jss'
function render() {
const app = renderApp()
const css = StyleSheet.toCSSString()
StyleSheet.reset()
return `
<head>
<style>
${css}
</style>
<head>
<body>
${app}
</body>
`
}
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 <style> element from JSS to the DOM.
When doing SSR, it should be called after the first rendering (after removing the server rendered <style> element).
When not doing SSR, it can be called when importing aphrodite-to-jss.
StyleSheet.toCSSString(): stringFor SSR, it returns the CSS string that have be injected.
StyleSheet.reset(): stringReset the injected styles.
css(...styles: SheetDefinitions): stringInjects a previously defined rule to the dom. This is done in sync, so the CSS rule is immediately available.
Returns a class name.
MIT
1.1.7
FAQs
Aphrodite compatible API on top of JSS.
The npm package aphrodite-to-jss receives a total of 1 weekly downloads. As such, aphrodite-to-jss popularity was classified as not popular.
We found that aphrodite-to-jss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.