;
}
}

const styles = StyleSheet.create({
red: {
backgroundColor: 'red'
},

large: {
height: 20,
width: 20
},

marker: {
backgroundColor: 'blue'
}
});
`

Resetting Style Cache

The reset function can be used to reset the HTML style tag, injection buffer, and injected cache. Useful when Aphrodite needs to be torn down and set back up.

`js
import { reset } from 'aphrodite';

reset();
`

While the resetInjectedStyle function can be used to reset the injected cache for a single key (usually the class name).

`js
import { resetInjectedStyle } from 'aphrodite';

resetInjectedStyle('class_1sAs8jg');
`

Server-side rendering

To perform server-side rendering, make a call to StyleSheetServer.renderStatic, which takes a callback. Do your rendering inside of the callback and return the generated HTML. All of the calls to css() inside of the callback will be collected and the generated css as well as the generated HTML will be returned.

Rehydrating lets Aphrodite know which styles have already been inserted into the page. If you don't rehydrate, Aphrodite might add duplicate styles to the page.

To perform rehydration, call StyleSheet.rehydrate with the list of generated class names returned to you by StyleSheetServer.renderStatic.

Note: If you are using aphrodite/no-important in your project and you want to render it on server side, be sure to import StyleSheetServer from aphrodite/no-important otherwise you are going to get an error.

As an example:

`js
import { StyleSheetServer } from 'aphrodite';

// Contains the generated html, as well as the generated css and some
// rehydration data.
var {html, css} = StyleSheetServer.renderStatic(() => {
return ReactDOMServer.renderToString();
});

// Return the base HTML, which contains your rendered HTML as well as a
// simple rehydration script.
return

;
`

Disabling !important

By default, Aphrodite will append !important to style definitions. This is
intended to make integrating with a pre-existing codebase easier. If you'd like
to avoid this behaviour, then instead of importing aphrodite, import
aphrodite/no-important. Otherwise, usage is the same:

`js
import { StyleSheet, css } from 'aphrodite/no-important';
`

Minifying style names

By default, Aphrodite will minify style names down to their hashes in production
(process.env.NODE_ENV === 'production'). You can override this behavior by
calling minify with true or false before calling StyleSheet.create.

This is useful if you want to facilitate debugging in production for example.

`js
import { StyleSheet, minify } from 'aphrodite';

// Always keep the full style names
minify(false);

// ... proceed to use StyleSheet.create etc.
`

Font Faces

Creating custom font faces is a special case. Typically you need to define a global @font-face rule. In the case of Aphrodite we only want to insert that rule if it's actually being referenced by a class that's in the page. We've made it so that the fontFamily property can accept a font-face object (either directly or inside an array). A global @font-face rule is then generated based on the font definition.

`js
const coolFont = {
fontFamily: "CoolFont",
fontStyle: "normal",
fontWeight: "normal",
src: "url('coolfont.woff2') format('woff2')"
};

const styles = StyleSheet.create({
headingText: {
fontFamily: coolFont,
fontSize: 20
},
bodyText: {
fontFamily: [coolFont, "sans-serif"]
fontSize: 12
}
});
`

Aphrodite will ensure that the global @font-face rule for this font is only inserted once, no matter how many times it's referenced.

Animations

Similar to Font Faces, Aphrodite supports keyframe animations, but it's treated as a special case. Once we find an instance of the animation being referenced, a global @keyframes rule is created and appended to the page.

Animations are provided as objects describing the animation, in typical @keyframes fashion. Using the animationName property, you can supply a single animation object, or an array of animation objects. Other animation properties like animationDuration can be provided as strings.

`js
const translateKeyframes = {
'0%': {
transform: 'translateX(0)',
},

'50%': {
transform: 'translateX(100px)',
},

'100%': {
transform: 'translateX(0)',
},
};

const opacityKeyframes = {
'from': {
opacity: 0,
},

'to': {
opacity: 1,
}
};

const styles = StyleSheet.create({
zippyHeader: {
animationName: [translateKeyframes, opacityKeyframes],
animationDuration: '3s, 1200ms',
animationIterationCount: 'infinite',
},
});
`

Aphrodite will ensure that @keyframes rules are never duplicated, no matter how many times a given rule is referenced.

Use without React

Aphrodite was built with React in mind but does not depend on React. Here, you can see it
used with [Web Components][webcomponents]:

`js
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
red: {
backgroundColor: 'red'
}
});

class App extends HTMLElement {
attachedCallback() {
this.innerHTML =

;
}
}

document.registerElement('my-app', App);
`

Caveats

Style injection and buffering

Aphrodite will automatically attempt to create a