@compiled/react 0.8.0 → 0.10.1

package/src/runtime/sheet.tsx

@@ -1,4 +1,4 @@
-import type { StyleSheetOpts, Bucket } from './types';
+import type { Bucket, StyleSheetOpts } from './types';
 
 /**
  * Ordered style buckets using their short psuedo name.

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.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { ProviderComponent, UseCacheHook } from './types';

package/src/runtime/style-cache.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
+
 import { isNodeEnvironment } from './is-node';
 import type { ProviderComponent, UseCacheHook } from './types';
 

package/src/runtime/style.js.flow

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

package/src/runtime/style.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+
 import { analyzeCssInDev } from './dev-warnings';
-import type { StyleSheetOpts, Bucket } from './types';
-import { useCache } from './style-cache';
 import { isNodeEnvironment } from './is-node';
+import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+import { useCache } from './style-cache';
+import type { Bucket, StyleSheetOpts } from './types';
 
 interface StyleProps extends StyleSheetOpts {
   /**

package/src/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 export interface StyleSheetOpts {

package/src/runtime.js.flow

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

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+/** @jsxImportSource @compiled/react */
 import { styled } from '@compiled/react';
+import { render } from '@testing-library/react';
 
 const em = (str: string | number) => str;
 
@@ -139,7 +139,7 @@ describe('styled component', () => {
     expect(StyledDiv.displayName).toEqual(undefined);
   });
 
-  xit('should have a display name', () => {
+  it('should have a display name', () => {
     process.env.NODE_ENV = 'development';
 
     const StyledDiv = styled.div`

package/src/styled/index.js.flow

@@ -1,18 +1,15 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
-export interface FunctionIterpolation<TProps> {
-  (props: TProps): CSSProps | string | number | boolean | void;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
 /**
  * Typing for the CSS object.
  */
-export type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 /**
  * Extra props added to the output Styled Component.
  */
@@ -21,7 +18,7 @@ export type StyledProps = {
 };
 export type Interpolations<TProps: mixed> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];
@@ -36,7 +33,7 @@ export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
     ...interpolations: Interpolations<TProps>
   ): React$ComponentType<{
     ...TProps,
-    ...$ElementType<$JSXIntrinsics, TTag>,
+    ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
     ...StyledProps,
   }>;
 }

package/src/styled/index.tsx

@@ -1,15 +1,12 @@
 import type { ComponentType } from 'react';
-import { createSetupError } from '../utils/error';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
 
-export interface FunctionIterpolation<TProps> {
-  (props: TProps): CSSProps | string | number | boolean | undefined;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
+import { createSetupError } from '../utils/error';
 
 /**
  * Typing for the CSS object.
  */
-export type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 
 /**
  * Extra props added to the output Styled Component.
@@ -20,7 +17,7 @@ export interface StyledProps {
 
 export type Interpolations<TProps extends unknown> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];
@@ -61,17 +58,45 @@ export interface StyledComponentInstantiator extends 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,
+ * });
+ * ```
+ *
+ * ### Style with template literals
  *
+ * @example
  * ```
- * 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
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### 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: StyledComponentInstantiator = new Proxy(
   {},

package/src/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -9,12 +9,15 @@ import * as CSS from 'csstype';
  * Typing for the interpolations.
  */
 export type BasicTemplateInterpolations = string | number;
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
+}
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<string | number>;
+export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue,
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
   ...
 };
 export type CssFunction<TValue = void> =

package/src/types.tsx

@@ -5,13 +5,17 @@ import type * as CSS from 'csstype';
  */
 export type BasicTemplateInterpolations = string | number;
 
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+}
+
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<string | number>;
+export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 
 export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue;
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
 };
 
 export type CssFunction<TValue = void> =

package/src/utils/error.js.flow

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

package/CHANGELOG.md

@@ -1,68 +0,0 @@
-# @compiled/react
-
-## 0.8.0
-
-### Minor Changes
-
-- 4210ff6: Add flow types support
-- 53935b3: Add `ObjectExpression` support to `css`
-
-## 0.7.0
-
-### Minor Changes
-
-- bcb2a68: Add support for `keyframes`
-- a7ab8e1: Add support for conditional rules for `Styled`
-
-## 0.6.13
-
-### Patch Changes
-
-- 13c3a60: add support of additional parameters to css function
-
-## 0.6.12
-
-### Patch Changes
-
-- b5b4e8a: Catch unhandled exception on inserting rules with prefixed selectors.
-
-## 0.6.11
-
-### Patch Changes
-
-- ee3363e: Fix HTML characters escapes in style tags on SSR.
-
-## 0.6.10
-
-### Patch Changes
-
-- 40bc0d9: Package descriptions have been updated.
-- 1b1c964: The `css` mixin API is now available,
-  functioning similarly to the [emotion equivalent](https://emotion.sh/docs/composition).
-
-  ```jsx
-  import { css } from '@compiled/react';
-
-  <div
-    css={css`
-      display: flex;
-      font-size: 50px;
-      color: blue;
-    `}>
-    blue text
-  </div>;
-  ```
-
-  For more help, read the docs: https://compiledcssinjs.com/docs/css.
-
-## 0.6.9
-
-### Patch Changes
-
-- 4032cd4: Memo has been removed from the style component which was breaking re-renders at times.
-
-## 0.6.8
-
-### Patch Changes
-
-- aea3504: Packages now released with [changesets](https://github.com/atlassian/changesets).