aphrodite/examples/runkit.js

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

// Aphrodite server-side rendering example

// Make a component that generates some styles and returns some HTML.
function render() {
    const {StyleSheet, css} = require("aphrodite/no-important");

    // Make some styles
    const styles = StyleSheet.create({
        red: {
            color: "red",

            ":hover": {
                color: "blue",
            },
        },
    });

    // Generate some CSS with Aphrodite class names in it.
    return `<div class=${css(styles.red)}>
        Hover, and I'll turn blue!
    </div>`;
}

const {StyleSheetServer} = require("aphrodite");

// Call our render function inside of StyleSheetServer.renderStatic
const {css, html} = StyleSheetServer.renderStatic(() => {
    return render();
});

// Observe our output HTML and the Aphrodite-generated CSS
`<style>${css.content}</style>${html}`;