@compiled/react 0.10.4 → 0.11.0

package/src/class-names/__tests__/types.test.js.flow

@@ -1,6 +1,6 @@
 // @flow strict-local
 import React, { type Node } from 'react';
-import { ClassNames, type CssFunction } from '@compiled/react';
+import { ClassNames, type CssType } from '@compiled/react';
 
 // Object call expression
 ({ children }: { children: Node }): React$Element<typeof ClassNames> => (
@@ -23,6 +23,13 @@ import { ClassNames, type CssFunction } from '@compiled/react';
 
 // Array
 ({ children }: { children: Node }): React$Element<typeof ClassNames> => {
-  const classes: CssFunction<>[] = [{ fontSize: 12 }, `font-size: 12px`];
-  return <ClassNames>{({ css }) => <span className={css(classes)}>{children}</span>}</ClassNames>;
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <span className={css(([{ fontSize: 12 }, `font-size: 12px`]: CssType<void>[]))}>
+          {children}
+        </span>
+      )}
+    </ClassNames>
+  );
 };

package/src/class-names/index.js.flow

@@ -1,45 +1,54 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { Node } from 'react';
-import type { BasicTemplateInterpolations, CssFunction } from '../types';
-export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
-export interface ClassNamesProps {
+import type { CssType, CssFunction } from '../types';
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+declare interface CssSignature<TProps> {
+  (...interpolations: ObjectInterpolation<TProps>[]): string;
+  (
+    template: $ReadOnlyArray<string>,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): string;
+}
+export interface ClassNamesProps<TProps> {
   children: (opts: {
-    css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
-    style: {
-      [key: string]: string,
-      ...
-    },
+    css: CssSignature<TProps>,
+    style: $Shape<CSSStyleDeclaration>,
     ...
   }) => Node;
 }
 /**
- * Use a component where styles are not necessarily tied to an element.
+ * ## Class names
  *
- * ```
- * // Object CSS
+ * Use a component where styles are not necessarily used on a JSX element.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
+ *
+ * ### Style with objects
+ * @example ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
  * </ClassNames>
+ * ```
  *
- * // Template literal CSS
+ * ### Style with template literals
+ * @example ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
  * </ClassNames>
+ * ```
  *
- * // Array CSS
+ * ### Compose styles with arrays
+ * @example ```
  * <ClassNames>
  *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
+ *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
  * </ClassNames>
  * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- * @param props
  */
-declare export function ClassNames(_: ClassNamesProps): React$Node;
+declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;
+declare export {};

package/src/class-names/index.ts

@@ -1,15 +1,21 @@
 import type { ReactNode, CSSProperties } from 'react';
 
-import type { BasicTemplateInterpolations, CssFunction } from '../types';
+import type { CssType, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
 
-export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 
-export interface ClassNamesProps {
-  children: (opts: {
-    css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
-    style: CSSProperties;
-  }) => ReactNode;
+interface CssSignature<TProps> {
+  (...interpolations: ObjectInterpolation<TProps>[]): string;
+  (
+    template: TemplateStringsArray,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): string;
+}
+
+export interface ClassNamesProps<TProps> {
+  children: (opts: { css: CssSignature<TProps>; style: CSSProperties }) => ReactNode;
 }
 
 /**
@@ -46,8 +52,8 @@ export interface ClassNamesProps {
  * </ClassNames>
  * ```
  */
-export function ClassNames({ children }: ClassNamesProps): JSX.Element;
+export function ClassNames<TProps = void>({ children }: ClassNamesProps<TProps>): JSX.Element;
 
-export function ClassNames(_props: ClassNamesProps): JSX.Element {
+export function ClassNames<TProps = void>(_props: ClassNamesProps<TProps>): JSX.Element {
   throw createSetupError();
 }

package/src/css/__tests__/types.test.js.flow

@@ -15,3 +15,28 @@ import { css } from '@compiled/react';
   const styles = css({ color: 'red' });
   return <div css={styles}>red text</div>;
 };
+
+// Object call with function call
+(): React$Element<'div'> => {
+  const styles = css({
+    backgroundColor: token('elevation.surface', 'white'),
+    zIndex: layers.modal(),
+  });
+  return <div css={styles}>red text</div>;
+};
+
+// Media query selector
+css({
+  /* Style only for Google Chrome */
+  '@media screen and (-webkit-min-device-pixel-ratio: 0)': {
+    wordBreak: 'break-word',
+  },
+  /* Style only for Safari */
+  '@media screen and (-webkit-transition)': {
+    wordBreak: 'break-word',
+  },
+  /* Style only for Mozilla Firefox */
+  '@-moz-document url-prefix()': {
+    overflowWrap: 'anywhere',
+  },
+});

package/src/css/index.js.flow

@@ -1,35 +1,36 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import type { CSSProps, CssObject, CssFunction } from '../types';
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## CSS
  *
- * ```
- * css`color: red;`;
- * ```
+ * Define styles that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- * @param css
- * @param values
- */
-declare export default function css<T>(
-  _css: $ReadOnlyArray<string>,
-  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps;
-/**
- * Create styles that can be re-used between components with an object
+ * ### Style with objects
+ * @example ```
+ * const redText = css({
+ *   color: 'red',
+ * });
  *
+ * <div css={redText} />
  * ```
- * css({ color: 'red' });
- * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- * @param css
+ * ### Style with template literals
+ * @example ```
+ * const redText = css`
+ *   color: red;
+ * `;
+ *
+ * <div css={redText} />
+ * ```
  */
-declare export default function css(_css: CSSProps): CSSProps;
+declare export default function css<TProps>(
+  styles: $ReadOnlyArray<string>,
+  ...interpolations: CssFunction<TProps>[]
+): CSSProps<TProps>;
+declare export default function css<T>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;

package/src/css/index.ts

@@ -1,11 +1,6 @@
 /* eslint-disable import/export */
 
-import type {
-  AnyKeyCssProps,
-  BasicTemplateInterpolations,
-  CSSProps,
-  FunctionInterpolation,
-} from '../types';
+import type { CSSProps, CssObject, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
 
 /**
@@ -36,16 +31,16 @@ import { createSetupError } from '../utils/error';
  * <div css={redText} />
  * ```
  */
-export default function css<T = void>(
+export default function css<TProps = unknown>(
   styles: TemplateStringsArray,
-  ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps;
+  ...interpolations: CssFunction<TProps>[]
+): CSSProps<TProps>;
 
-export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
+export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
 
-export default function css<T = void>(
-  _styles: TemplateStringsArray | CSSProps,
-  ..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps {
+export default function css<T = unknown>(
+  _styles: TemplateStringsArray | CssObject<T> | CssObject<T>[],
+  ..._interpolations: CssFunction[]
+): CSSProps<T> {
   throw createSetupError();
 }

package/src/index.js.flow

@@ -1,15 +1,12 @@
 /**
- * THIS IS A MANUALLY CURATED FLOW FILE.
- *
- * Flowtype definitions for runtime
+ * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
-import type { CSSProps, CssFunction } from './types';
+import type { CssFunction, CSSProps, CssType } from './types';
+export type { CSSProps, CssFunction, CssType };
 declare export { keyframes } from './keyframes';
 declare export { styled } from './styled';
 declare export { ClassNames } from './class-names';
 declare export { default as css } from './css';
-export type { CssFunction, CSSProps };
-export type { CssObject } from './styled';

package/src/index.ts

@@ -1,7 +1,9 @@
 import { createElement } from 'react';
 
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps } from './types';
+import type { CssFunction, CSSProps, CssType } from './types';
+
+export type { CSSProps, CssFunction, CssType };
 
 export { keyframes } from './keyframes';
 export { styled } from './styled';
@@ -12,9 +14,6 @@ export { default as css } from './css';
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
 export const jsx = createElement;
 
-export type { CssFunction, CSSProps };
-export type { CssObject } from './styled';
-
 export namespace jsx {
   export namespace JSX {
     export type Element = CompiledJSX.Element;

package/src/jsx/jsx-local-namespace.ts

@@ -41,7 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
          * />
          * ```
          */
-        css?: CssFunction | CssFunction[];
+        css?: CssFunction<void> | CssFunction<void>[];
       }
     : // eslint-disable-next-line @typescript-eslint/ban-types
       {}
@@ -69,7 +69,7 @@ export namespace CompiledJSX {
   export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
   export type IntrinsicElements = {
     [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-      css?: CssFunction | CssFunction[];
+      css?: CssFunction<void> | CssFunction<void>[];
     };
   };
 }

package/src/keyframes/__tests__/index.test.tsx

@@ -16,6 +16,10 @@ const getKeyframe = (name: string) => {
     .join('\n');
 };
 
+jest.mock('../../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('keyframes', () => {
   beforeAll(() => {
     process.env.CACHE = 'false';

package/src/keyframes/index.js.flow

@@ -1,33 +1,19 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | { [key: string]: CSSProps, ... };
+export type KeyframeSteps = string | { [key: string]: CSSProps<void> };
 /**
- * Create keyframes using a tagged template expression:
+ * ## Keyframes
  *
- * ```
- * const fadeOut = keyframes`
- *   from { opacity: 1; }
- *   to   { opacity: 0; }
- * `;
- * ```
- * @param _strings The input string values
- * @param _interpolations The arguments used in the expression
- */
-declare export function keyframes(
-  _strings: $ReadOnlyArray<string>,
-  ..._interpolations: BasicTemplateInterpolations[]
-): string;
-/**
- * Create keyframes using:
+ * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
+ * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
  *
- * 1. An object expression
- *
- * ```
+ * ### Style with objects
+ * @example ```
  * const fadeOut = keyframes({
  *   from: {
  *     opacity: 1,
@@ -36,19 +22,27 @@ declare export function keyframes(
  *     opacity: 0,
  *   },
  * });
- * ```
- *
- * 2. A string
  *
- * ```
- * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
  *
- * 3. A template literal
+ * ### Style with template literals
+ * @example ```
+ * const fadeOut = keyframes`
+ *   from {
+ *     opacity: 1;
+ *   }
  *
+ *   to {
+ *     opacity: 0;
+ *   }
+ * `;
+ *
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
- * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
- * ```
- * @param _steps The waypoints along the animation sequence
  */
-declare export function keyframes(_steps: KeyframeSteps): string;
+declare export function keyframes(steps: KeyframeSteps): string;
+declare export function keyframes(
+  strings: $ReadOnlyArray<string>,
+  ...interpolations: BasicTemplateInterpolations[]
+): string;

package/src/keyframes/index.ts

@@ -1,7 +1,7 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
 import { createSetupError } from '../utils/error';
 
-export type KeyframeSteps = string | Record<string, CSSProps>;
+export type KeyframeSteps = string | Record<string, CSSProps<void>>;
 
 /**
  * ## Keyframes

package/src/runtime/__tests__/style.test.tsx

@@ -2,6 +2,10 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import type { ComponentType } from 'react';
 
+jest.mock('../is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('<Style />', () => {
   let consoleErrorSpy: jest.SpyInstance;
 

package/src/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/css-custom-property.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/dev-warnings.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 declare export var analyzeCssInDev: (sheet: string) => void;

package/src/runtime/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 declare export { default as CS } from './style';

package/src/runtime/{is-node.js.flow → is-server-environment.js.flow}

@@ -1,7 +1,7 @@
 /**
- * Flowtype definitions for is-node
+ * Flowtype definitions for is-server-environment
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**
@@ -11,9 +11,9 @@
  * When using this it will remove any node code from the browser bundle - for example:
  *
  * ```js
- * if (isNodeEnvironment()) {
+ * if (isServerEnvironment()) {
  *   // This code will be removed from the browser bundle
  * }
  * ```
  */
-declare export var isNodeEnvironment: () => boolean;
+declare export var isServerEnvironment: () => boolean;

package/src/runtime/is-server-environment.ts

@@ -0,0 +1,29 @@
+/**
+ * @see https://github.com/jsdom/jsdom/releases/tag/12.0.0
+ * @see https://github.com/jsdom/jsdom/issues/1537
+ */
+const isJsDomEnvironment = () =>
+  window.name === 'nodejs' ||
+  navigator.userAgent.includes('Node.js') ||
+  navigator.userAgent.includes('jsdom');
+/**
+ * Returns `true` when inside a node environment,
+ * else `false`.
+ *
+ * When using this it will remove any node code from the browser bundle - for example:
+ *
+ * ```js
+ * if (isServerEnvironment()) {
+ *   // This code will be removed from the browser bundle
+ * }
+ * ```
+ */
+export const isServerEnvironment = (): boolean => {
+  if (typeof process !== 'undefined' && process.versions != null && process.versions.node != null) {
+    return true;
+  }
+  if (isJsDomEnvironment()) {
+    return true;
+  }
+  return false;
+};

package/src/runtime/sheet.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { Bucket, StyleSheetOpts } from './types';

package/src/runtime/style-cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style-cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { ProviderComponent, UseCacheHook } from './types';

package/src/runtime/style-cache.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import { createContext, useContext } from 'react';
 
 import { isCacheDisabled } from './cache';
-import { isNodeEnvironment } from './is-node';
+import { isServerEnvironment } from './is-server-environment';
 import type { ProviderComponent, UseCacheHook } from './types';
 
 /**
  * Cache to hold already used styles.
  * React Context on the server - singleton object on the client.
  */
-const Cache: any = isNodeEnvironment() ? createContext<Record<string, true> | null>(null) : {};
+const Cache: any = isServerEnvironment() ? createContext<Record<string, true> | null>(null) : {};
 
-if (!isNodeEnvironment()) {
+if (!isServerEnvironment()) {
   /**
    * Iterates through all found style elements generated when server side rendering.
    *
@@ -32,7 +32,7 @@ export const useCache: UseCacheHook = () => {
     return {};
   }
 
-  if (isNodeEnvironment()) {
+  if (isServerEnvironment()) {
     // On the server we use React Context to we don't leak the cache between SSR calls.
     // During runtime this hook isn't conditionally called - it is at build time that the flow gets decided.
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -50,7 +50,7 @@ export const useCache: UseCacheHook = () => {
  * On the browser this turns into a fragment with no React Context.
  */
 const StyleCacheProvider: ProviderComponent = (props) => {
-  if (isNodeEnvironment()) {
+  if (isServerEnvironment()) {
     // This code path isn't conditionally called at build time - safe to ignore.
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const inserted = useCache();

package/src/runtime/style.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { StyleSheetOpts } from './types';

package/src/runtime/style.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { analyzeCssInDev } from './dev-warnings';
-import { isNodeEnvironment } from './is-node';
+import { isServerEnvironment } from './is-server-environment';
 import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
 import { useCache } from './style-cache';
 import type { Bucket, StyleSheetOpts } from './types';
@@ -22,7 +22,7 @@ export default function Style(props: StyleProps): JSX.Element | null {
   }
 
   if (props.children.length) {
-    if (isNodeEnvironment()) {
+    if (isServerEnvironment()) {
       const bucketedSheets: Partial<Record<Bucket, string>> = {};
       let hasSheets = false;
 

package/src/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 export interface StyleSheetOpts {
@@ -16,7 +16,7 @@ export interface StyleSheetOpts {
  * Buckets under which we will group our stylesheets
  */
 export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export type UseCacheHook = () => { [key: string]: true, ... };
+export type UseCacheHook = () => { [key: string]: true };
 export type ProviderComponent = (props: {
   children: React$Node[] | React$Node,
   ...

package/src/runtime.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 declare export { CC, CS, ax, ix } from './runtime/index';