Aphrodite (#10238)

* Aphrodite

* added no-important module

* change css() args to any[]

aphrodite/aphrodite-tests.tsx

@@ -0,0 +1,82 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="./aphrodite.d.ts" />
+
+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 <div>
+            <span className={css(styles.red)}>
+                This is red.
+            </span>
+            <span className={css(styles.hover)}>
+                This turns red on hover.
+            </span>
+            <span className={css(styles.small)}>
+                This turns red when the browser is less than 600px width.
+            </span>
+            <span className={css(styles.red, styles.blue)}>
+                This is blue.
+            </span>
+            <span className={css(styles.blue, styles.small)}>
+                This is blue and turns red when the browser is less than
+                600px width.
+            </span>
+            <span className={css(withFont.bodyText)}>
+                With font
+            </span>
+        </div>;
+    }
+}
+
+const output = StyleSheetServer.renderStatic(() => {
+    return "test";
+});
+
+output.css.content;
+output.css.renderedClassNames;
+output.html;
+
+StyleSheet.rehydrate(output.css.renderedClassNames);
+
+StyleSheetTestUtils.suppressStyleInjection();
+StyleSheetTestUtils.clearBufferAndResumeStyleInjection();

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 <https://github.com/asvetliakov>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+declare module "aphrodite" {
+    import * as React from "react";
+
+    /**
+     * Aphrodite style declaration
+     */
+    export interface StyleDeclaration {
+        [key: string]: React.CSSProperties;
+    }
+
+    interface StyleSheetStatic {
+        /**
+         * Create style sheet
+         */
+        create<T extends StyleDeclaration>(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";
+}