@compiled/react 0.10.4 → 0.11.0

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

@@ -1,13 +1,8 @@
 import type { ComponentType } from 'react';
 
-import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
+import type { CssType, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
 
-/**
- * Typing for the CSS object.
- */
-export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
-
 /**
  * Extra props added to the output Styled Component.
  */
@@ -15,46 +10,33 @@ export interface StyledProps {
   as?: keyof JSX.IntrinsicElements;
 }
 
-export type Interpolations<TProps extends unknown> = (
-  | 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 `JSX.IntrinsicElements`, while also injecting our own
- * props from `StyledProps`.
- */
-export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
-  <TProps extends unknown>(
-    // Allows either string or object (`` or ({}))
-    css: CssObject<TProps> | CssObject<TProps>[],
-    ...interpolations: Interpolations<TProps>
-  ): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
-}
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 
-export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
-  <TProps extends unknown>(
-    // Allows either string or object (`` or ({}))
-    css: CssObject<TProps> | TemplateStringsArray,
-    ...interpolations: Interpolations<TProps>
-  ): React.ComponentType<TProps & StyledProps & TInheritedProps>;
+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 = {
-  // This creates the DOM element types for `styled.blah`, e.g. `span`, `div`, `h1`, etc.
-  [Tag in keyof JSX.IntrinsicElements]: StyledFunctionFromTag<Tag>;
+  [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
 };
 
-export interface StyledComponentInstantiator extends StyledComponentMap {
-  /**
-   * Typing to enable consumers to compose components, e.g: `styled(Component)`
-   */
+export interface CreateStyledComponent extends StyledComponentMap {
+  // Typing to enable consumers to compose components, e.g: `styled(Component)`
   <TInheritedProps extends unknown>(
     Component: ComponentType<TInheritedProps>
-  ): StyledFunctionFromComponent<TInheritedProps>;
+  ): StyledComponent<TInheritedProps>;
 }
 
 /**
@@ -98,7 +80,7 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
  * );
  * ```
  */
-export const styled: StyledComponentInstantiator = new Proxy(
+export const styled: CreateStyledComponent = new Proxy(
   {},
   {
     get() {

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

@@ -6,22 +6,30 @@ import type * as CSS from 'csstype';
 export type BasicTemplateInterpolations = string | number;
 
 export interface FunctionInterpolation<TProps> {
-  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+  (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 = CSS.Properties<BasicTemplateInterpolations>;
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
 
-export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
+export type CssObject<TProps> = {
+  [key: string]: CssFunction<TProps>;
 };
 
-export type CssFunction<TValue = void> =
-  | CSSProps
-  | AnyKeyCssProps<TValue>
-  | TemplateStringsArray
-  | string
-  | boolean
-  | undefined;
+// 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.ts"],"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.ts"],"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.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAG;IAC/B,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC;AACvC,CAAC,CAAC"}

package/src/runtime/is-node.ts

@@ -1,15 +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 const isNodeEnvironment = (): boolean => {
-  return typeof window === 'undefined';
-};