Aphrodite-like API on top of JSS.
This project is a merge of good ideas from aphrodite and JSS. It provides an API of aphrodite but fixes lots of limitations and caveats by using JSS as a rendering engine under the hood.
Good parts from aphrodite.
- Pretty much like inline styles known from React, except it allows to use the entire CSS.
- No CSS is generated until
css()
function invocation. Only the passed rules are converted to a CSS string and injected. - Theming is possible without any headache or framework integrations.
Benefits compared to aphrodite.
- More powerfull rendering abstraction through JSS under the hood. You are using all it's plugins and JSON DSL. To name a few:
- Children, siblings and any other kinds of selectors. (jss-nested)
- Global styles, without auto namespacing (jss-global).
- Immediate render upon
css()
call invocation. It gives you an access to computed styles right after render, no need to usesetTimeout()
. It also avoids additional recalcs and repaints, which can cause flickers and general performance overhead. - No auto "!important" insertion. You can write a plugin for this though.
Example
const sheet = StyleSheet documentbodyinnerHTML = ` ✔Primary `
API
Create style sheet.
StyleSheet.create(styles)
Create function doesn't render anything, it just registers your styles.
Returns an object, where key names correspond the original styles obejct.
Inject rules.
css(rule1, [rule2], [rule3], ...)
Injects a previously defined rule to the dom. This is done in sync, so the CSS rule is immediately available.
Returns a class name.
Styles format.
The format for styles is defined in jss. Aprodisiac uses jss-preset-default, so all default presets are already in place.
Customizing JSS.
aphroditeJss(jss, [options])
You can pass your own JSS instance with your custom setup.
Returns aphrodite's interface.
const css StyleSheet =
Serverside Rendering.
There are 2 functions you need to know - toString()
and reset()
.
As aphrodite-jss can not know that you are rendering a new response, you need to get the CSS (toString()
) when you are processing the first request and call reset()
to clean up the styles your current page has produced.
{ const app = const css = return ` <head> <style> </style> <head> <body> </body> `}
License
MIT