diff --git a/aphrodite/aphrodite-tests.tsx b/aphrodite/aphrodite-tests.tsx new file mode 100644 index 0000000000..76d28ca43f --- /dev/null +++ b/aphrodite/aphrodite-tests.tsx @@ -0,0 +1,82 @@ +/// +/// + +import * as React from "react"; +import { StyleSheet, css, StyleSheetServer, StyleSheetTestUtils } from "aphrodite"; + +const styles = StyleSheet.create({ + red: { + backgroundColor: 'red' + }, + blue: { + backgroundColor: 'blue' + }, + hover: { + ':hover': { + backgroundColor: 'red' + } + }, + small: { + '@media (max-width: 600px)': { + backgroundColor: 'red', + } + } +}); + +const coolFont = { + fontFamily: "CoolFont", + fontStyle: "normal", + fontWeight: "normal", + src: "url('coolfont.woff2') format('woff2')" +}; + +const withFont = StyleSheet.create({ + headingText: { + fontFamily: coolFont, + fontSize: 20 + }, + bodyText: { + fontFamily: [coolFont, "sans-serif"], + fontSize: 12 + } +}); + + +class App extends React.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. + + + With font + +
; + } +} + +const output = StyleSheetServer.renderStatic(() => { + return "test"; +}); + +output.css.content; +output.css.renderedClassNames; +output.html; + +StyleSheet.rehydrate(output.css.renderedClassNames); + +StyleSheetTestUtils.suppressStyleInjection(); +StyleSheetTestUtils.clearBufferAndResumeStyleInjection(); diff --git a/aphrodite/aphrodite.d.ts b/aphrodite/aphrodite.d.ts new file mode 100644 index 0000000000..89d8646e54 --- /dev/null +++ b/aphrodite/aphrodite.d.ts @@ -0,0 +1,76 @@ +// Type definitions for Aphrodite 0.5.0 +// Project: https://github.com/Khan/aphrodite +// Definitions by: Alexey Svetliakov +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare module "aphrodite" { + import * as React from "react"; + + /** + * Aphrodite style declaration + */ + export interface StyleDeclaration { + [key: string]: React.CSSProperties; + } + + interface StyleSheetStatic { + /** + * Create style sheet + */ + create(styles: T): T; + /** + * Rehydrate class names from server renderer + */ + rehydrate(renderedClassNames: string[]): void; + } + + export var StyleSheet: StyleSheetStatic; + /** + * Get class names from passed styles + */ + export function css(...styles: any[]): string; + + interface StaticRendererResult { + html: string; + css: { + content: string; + renderedClassNames: string[]; + } + } + + /** + * Utilities for using Aphrodite server-side. + */ + interface StyleSheetServerStatic { + renderStatic(renderFunc: () => string): StaticRendererResult; + } + + export var StyleSheetServer: StyleSheetServerStatic; + + interface StyleSheetTestUtilsStatic { + /** + * Prevent styles from being injected into the DOM. + * + * This is useful in situations where you'd like to test rendering UI + * components which use Aphrodite without any of the side-effects of + * Aphrodite happening. Particularly useful for testing the output of + * components when you have no DOM, e.g. testing in Node without a fake DOM. + * + * Should be paired with a subsequent call to + * clearBufferAndResumeStyleInjection. + */ + suppressStyleInjection(): void; + /** + * Opposite method of preventStyleInject. + */ + clearBufferAndResumeStyleInjection(): void; + } + + export var StyleSheetTestUtils: StyleSheetTestUtilsStatic; +} + +declare module "aphrodite/no-important" { + export * from "aphrodite"; +}