@compiled/react 0.10.2 → 0.11.0

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

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

@@ -188,7 +188,7 @@ describe('styled component', () => {
     expect(ref).toHaveProperty('tagName', 'A');
   });
 
-  it('should overide the underlying markup with a span', () => {
+  it('should override the underlying markup with a span', () => {
     const Heading = styled.h1`
       color: red;
     `;

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

@@ -1,30 +1,84 @@
 // @flow strict-local
-import React, { type Node } from 'react';
-import { styled, type CssObject, type CSSProps } from '@compiled/react';
+import React, { type Node, type Element } from 'react';
+import { styled, type CssType } from '@compiled/react';
 
 // Tagged template expression
 () => {
-  const StyledTaggedTemplateExpression = styled.div`
+  const StyledComponent = styled.div`
     font-size: 12px;
   `;
-  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+  return <StyledComponent>red text</StyledComponent>;
+};
+
+// Tagged template expression with conditional
+() => {
+  const StyledComponent = styled.div`
+    font-size: ${({ big }) => (big ? big : 12)}px;
+  `;
+  return <StyledComponent big>red text</StyledComponent>;
 };
 
 // Object call expression
 () => {
-  const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 });
-  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+  const StyledComponent = styled.div<{ big: number, children: Node }>({
+    fontSize: (props: { big: number, children: Node }): number => (props.big == 5 ? 50 : 10),
+  });
+
+  return <StyledComponent big={5}>red text</StyledComponent>;
+};
+
+// Object call expression with no props
+() => {
+  const StyledComponent = styled.div({
+    wordBreak: 'break-word',
+    position: 'relative',
+    left: `${2 - 2}px`,
+  });
+
+  return <StyledComponent>red text</StyledComponent>;
+};
+
+// Object call expression with conditional
+() => {
+  const StyledComponent = styled.div<{ big: number, children: Node }>({
+    fontSize: ({ big }) => `${big ? 50 : 12}px`,
+    width: ({ big }) => (big ? 500 : 120),
+  });
+
+  return <StyledComponent big={5}>red text</StyledComponent>;
+};
+
+// Object call expression with logical operator expression
+() => {
+  // Type defined as constant so we test the type without sketchy null check errors
+  const StyledComponent = styled.div<{ big?: 5000, children: Node }>(
+    {
+      fontSize: ({ big }) => `${big || 50}px`,
+      width: ({ big }) => big && 500,
+    },
+    ({ big }) => big && { height: '100px' }
+  );
+
+  return <StyledComponent big={5000}>red text</StyledComponent>;
 };
 
 // Array
 () => {
-  const styles: CSSProps[] = [{ fontSize: '12px' }];
-  const StyledTaggedTemplateExpression = styled.div(styles);
-  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+  const styles: CssType<{ fontSize: number, children: Node }>[] = [{ fontSize: '12px' }];
+  const StyledComponent = styled.div(styles);
+  return <StyledComponent fontSize={50}>red text</StyledComponent>;
 };
 
 // Multiple arguments
 () => {
-  const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 }, `font-size: 12px`);
-  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+  const StyledComponent = styled.div({ fontSize: 12 }, `font-size: 12px`);
+  return <StyledComponent>red text</StyledComponent>;
+};
+
+// Dynamic function calls
+() => {
+  const StyledComponent = styled.div({
+    backgroundColor: token('elevation.surface', 'black'),
+    zIndex: layers.modal(),
+  });
 };

package/src/styled/index.js.flow

@@ -1,69 +1,68 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
-/**
- * Typing for the CSS object.
- */
-export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
+import type { CssType, CssFunction } from '../types';
 /**
  * Extra props added to the output Styled Component.
  */
 export type StyledProps = {
   as?: $Keys<$JSXIntrinsics>,
 };
-export type Interpolations<TProps: mixed> = (
-  | BasicTemplateInterpolations
-  | FunctionInterpolation<TProps>
-  | CssObject<TProps>
-  | CssObject<TProps>[]
-)[];
-/**
- * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
- * define correct props based on it from `$JSXIntrinsics`, while also injecting our own
- * props from `StyledProps`.
- */
-export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
-  <TProps: mixed>(
-    css: CssObject<TProps> | $ReadOnlyArray<CssObject<TProps>>,
-    ...interpolations: Interpolations<TProps>
-  ): React$ComponentType<{
-    ...TProps,
-    ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
-    ...StyledProps,
-  }>;
-}
-export interface StyledFunctionFromComponent<TInheritedProps: mixed> {
-  <TProps: mixed>(
-    css: CssObject<TProps> | $ReadOnlyArray<string>,
-    ...interpolations: Interpolations<TProps>
-  ): React$ComponentType<{ ...TProps, ...StyledProps, ...TInheritedProps }>;
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps: mixed> {
+  <TProps>(
+    ...css: ObjectInterpolation<TProps>[]
+  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
+  <TProps>(
+    template: $ReadOnlyArray<string>,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
 }
-export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledFunctionFromTag<Tag>>;
-export type StyledComponentInstantiator = {
-  /**
-   * Typing to enable consumers to compose components, e.g: `styled(Component)`
-   */
+export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
+export type CreateStyledComponent = {
   <TInheritedProps: mixed>(
     Component: ComponentType<TInheritedProps>
-  ): StyledFunctionFromComponent<TInheritedProps>,
+  ): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
  *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ * @example ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ *
+ * ### Style with template literals
+ * @example ```
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ * @example ```
+ * import type { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
-declare export var styled: StyledComponentInstantiator;
+declare export var styled: CreateStyledComponent;

package/src/styled/index.ts

@@ -0,0 +1,94 @@
+import type { ComponentType } from 'react';
+
+import type { CssType, CssFunction } from '../types';
+import { createSetupError } from '../utils/error';
+
+/**
+ * Extra props added to the output Styled Component.
+ */
+export interface StyledProps {
+  as?: keyof JSX.IntrinsicElements;
+}
+
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+
+export interface StyledComponent<ComponentProps extends unknown> {
+  // Allows either string or object (`` or ({}))
+  // We disable the ban types rule here as we need to join the empty object default with other props
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<
+    TProps & ComponentProps & StyledProps
+  >;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  <TProps = {}>(
+    template: TemplateStringsArray,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): React.ComponentType<TProps & ComponentProps & StyledProps>;
+}
+
+// This creates the DOM element types for `styled.tag`, e.g. `span`, `div`, `h1`, etc.
+export type StyledComponentMap = {
+  [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
+};
+
+export interface CreateStyledComponent extends StyledComponentMap {
+  // Typing to enable consumers to compose components, e.g: `styled(Component)`
+  <TInheritedProps extends unknown>(
+    Component: ComponentType<TInheritedProps>
+  ): StyledComponent<TInheritedProps>;
+}
+
+/**
+ * ## Styled component
+ *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
+ *
+ * ### Style with template literals
+ *
+ * @example
+ * ```
+ * styled.div`
+ *   font-size: 12px
+ * `;
+ * ```
+ *
+ * ### Compose styles with arrays
+ *
+ * @example
+ * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
+ */
+export const styled: CreateStyledComponent = new Proxy(
+  {},
+  {
+    get() {
+      return () => {
+        // Blow up if the transformer isn't turned on.
+        // This code won't ever be executed when setup correctly.
+        throw createSetupError();
+      };
+    },
+  }
+) as any;

package/src/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
  */
 import * as CSS from 'csstype';
@@ -10,20 +10,23 @@ import * as CSS from 'csstype';
  */
 export type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
-  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
+  (props: TProps): CssFunction<TProps>;
 }
+/**
+ * Possible types for a CSS value
+ */
+export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
-export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CssObject<TProps> = {
+  ...CSSProps<TProps>,
+  [key: string]: CssFunction<TProps>,
   ...
 };
-export type CssFunction<TValue = void> =
-  | CSSProps
-  | AnyKeyCssProps<TValue>
-  | $ReadOnlyArray<string>
-  | string
+export type CssFunction<TProps = mixed> =
+  | CssType<TProps>
+  | BasicTemplateInterpolations
   | boolean
   | void;

package/src/types.ts

@@ -0,0 +1,35 @@
+import type * as CSS from 'csstype';
+
+/**
+ * Typing for the interpolations.
+ */
+export type BasicTemplateInterpolations = string | number;
+
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CssFunction<TProps>;
+}
+
+/**
+ * Possible types for a CSS value
+ */
+export type CssType<TProps> =
+  | CSSProps<TProps> // Typed CSS properties
+  | CssObject<TProps> // CSS object
+  | FunctionInterpolation<TProps> // Props provider usage
+  | string; // Plain css string
+
+/**
+ * These are all the CSS props that will exist.
+ */
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+
+export type CssObject<TProps> = {
+  [key: string]: CssFunction<TProps>;
+};
+
+// CSS inside of a CSS expression
+export type CssFunction<TProps = unknown> =
+  | CssType<TProps>
+  | BasicTemplateInterpolations // CSS values in tagged template expression
+  | boolean // Something like `false && styles`
+  | undefined; // Something like `undefined && styles`

package/src/utils/error.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for error
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 declare export var createSetupError: () => Error;

package/dist/browser/runtime/is-node.js

@@ -1,16 +0,0 @@
-/**
- * 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 (isNodeEnvironment()) {
- *   // This code will be removed from the browser bundle
- * }
- * ```
- */
-export var isNodeEnvironment = function () {
-    return typeof window === 'undefined';
-};
-//# sourceMappingURL=is-node.js.map

package/dist/browser/runtime/is-node.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-node.js","sourceRoot":"","sources":["../../../src/runtime/is-node.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG;IAC/B,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC,CAAC"}

package/dist/cjs/runtime/is-node.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNodeEnvironment = void 0;
-/**
- * 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 (isNodeEnvironment()) {
- *   // This code will be removed from the browser bundle
- * }
- * ```
- */
-var isNodeEnvironment = function () {
-    return typeof window === 'undefined';
-};
-exports.isNodeEnvironment = isNodeEnvironment;
-//# sourceMappingURL=is-node.js.map

package/dist/cjs/runtime/is-node.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-node.js","sourceRoot":"","sources":["../../../src/runtime/is-node.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;GAWG;AACI,IAAM,iBAAiB,GAAG;IAC/B,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC,CAAC;AAFW,QAAA,iBAAiB,qBAE5B"}

package/dist/esm/runtime/is-node.js

@@ -1,16 +0,0 @@
-/**
- * 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 (isNodeEnvironment()) {
- *   // This code will be removed from the browser bundle
- * }
- * ```
- */
-export var isNodeEnvironment = function () {
-    return typeof window === 'undefined';
-};
-//# sourceMappingURL=is-node.js.map

package/dist/esm/runtime/is-node.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-node.js","sourceRoot":"","sources":["../../../src/runtime/is-node.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG;IAC/B,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC,CAAC"}