# Aphrodite [![npm version](https://badge.fury.io/js/aphrodite.svg)](https://badge.fury.io/js/aphrodite) [![Build Status](https://travis-ci.org/Khan/aphrodite.svg?branch=master)](https://travis-ci.org/Khan/aphrodite) [![Coverage Status](https://coveralls.io/repos/github/Khan/aphrodite/badge.svg?branch=master)](https://coveralls.io/github/Khan/aphrodite?branch=master) [![Gitter chat](https://img.shields.io/gitter/room/Khan/aphrodite.svg)](https://gitter.im/Khan/aphrodite) [![gzip size][gzip-badge]][unpkg-dist] [![size][size-badge]][unpkg-dist] _Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation._ Support for colocating your styles with your JavaScript component. - Works great with and without React - Supports media queries without window.matchMedia - Supports pseudo-selectors like `:hover`, `:active`, etc. without needing to store hover or active state in components. `:visited` works just fine too. - Supports automatic global `@font-face` detection and insertion. - Respects precedence order when specifying multiple styles - Requires no AST transform - Injects only the exact styles needed for the render into the DOM. - Can be used for server rendering - Few dependencies, small (20k, 6k gzipped) - No external CSS file generated for inclusion - Autoprefixes styles # Installation Aphrodite is distributed via [npm](https://www.npmjs.com/): ``` npm install --save aphrodite ``` # API If you'd rather watch introductory videos, you can find them [here](https://www.youtube.com/playlist?list=PLo4Zh55ZzNSBP78pCD0dZJi9zf8CA72_M). ```jsx import React, { Component } from 'react'; import { StyleSheet, css } from 'aphrodite'; class App extends Component { render() { return

This is red. This turns red on hover. This turns red when the browser is less than 600px width. This is blue. This is blue and turns red when the browser is less than 600px width.

; } } const styles = StyleSheet.create({ red: { backgroundColor: 'red' }, blue: { backgroundColor: 'blue' }, hover: { ':hover': { backgroundColor: 'red' } }, small: { '@media (max-width: 600px)': { backgroundColor: 'red', } } }); ``` ## Conditionally Applying Styles Note: If you want to conditionally use styles, that is simply accomplished via: ```jsx const className = css( shouldBeRed() ? styles.red : styles.blue, shouldBeResponsive() && styles.small, shouldBeHoverable() && styles.hover )

``` This is possible because any falsey arguments will be ignored. ## Combining Styles To combine styles, pass multiple styles or arrays of styles into `css()`. This is common when combining styles from an owner component: ```jsx class App extends Component { render() { return ; } } class Marker extends Component { render() { // css() accepts styles, arrays of styles (including nested arrays), // and falsy values including undefined. return

; } } 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 `

${html}

`; ``` ## 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](#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 = `

This is red.

`; } } document.registerElement('my-app', App); ``` # Caveats ## Style injection and buffering Aphrodite will automatically attempt to create a `

	Stars	Issues	Version	Updated	Created
aphrodite	5,344	93	2.4.0	5 years ago	9 years ago
classnames	17,547	5	2.5.1	9 months ago	10 years ago
react-container-query	888	21	0.13.0	a year ago	9 years ago

aphrodite vs classnames vs react-container-query

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past