@compiled/react 0.10.4 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.10.4",
+  "version": "0.11.1",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -72,13 +72,13 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.0.11"
+    "csstype": "^3.1.0"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.0.1",
-    "@testing-library/react": "^12.1.4",
-    "@types/jsdom": "^16.2.14",
-    "@types/react-dom": "^17.0.13",
+    "@testing-library/react": "^12.1.5",
+    "@types/jsdom": "^16.2.15",
+    "@types/react-dom": "^17.0.17",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/__tests__/browser.test.tsx

@@ -3,6 +3,10 @@ import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
 
+jest.mock('../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('browser', () => {
   beforeEach(() => {
     // Reset style tags in head before each test so that it will remove styles

package/src/__tests__/server-side-hydrate.test.tsx

@@ -3,8 +3,8 @@ import { hydrate } from 'react-dom';
 
 import { CC, CS } from '../runtime';
 
-jest.mock('../runtime/is-node', () => ({
-  isNodeEnvironment: () => false,
+jest.mock('../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
 }));
 
 describe('server side hydrate', () => {

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__/css-custom-property.test.ts

@@ -4,13 +4,13 @@ describe('interpolation', () => {
   it('should return an empty CSS comment when undefined', () => {
     const actual = interpolation(undefined, undefined, undefined);
 
-    expect(actual).toEqual('var(--, )');
+    expect(actual).toEqual('var(--c-, )');
   });
 
   it('should return an empty CSS comment when null', () => {
     const actual = interpolation(null, undefined, undefined);
 
-    expect(actual).toEqual('var(--, )');
+    expect(actual).toEqual('var(--c-, )');
   });
 
   it('should pass through the value if there are no suffix prefix', () => {

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/css-custom-property.ts

@@ -27,5 +27,5 @@ export default function cssCustomPropertyValue(
   // Currently React trims these values so we can't use a space " " to block the value.
   // Instead we use a CSS variable that doesn't exist which falls back to " ".
   // Bug raised here: https://github.com/facebook/react/issues/20497
-  return 'var(--, )';
+  return 'var(--c-, )';
 }

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';