@compiled/react 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -79,6 +79,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
     "@types/react-dom": "^17.0.20",
+    "expect-type": "^0.17.3",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/css/__tests__/types.test.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @compiled/react */
+import { css } from '@compiled/react';
+import { expectTypeOf } from 'expect-type';
+
+describe('css func tests', () => {
+  it('should type violate when given invalid types', () => {
+    const style = css({ color: 'red' });
+
+    expectTypeOf(style).not.toMatchTypeOf<string>();
+  });
+});

package/dist/browser/class-names/index.js.flow

@@ -1,53 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Node } from 'react';
-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: CssSignature<TProps>,
-    style: $Shape<CSSStyleDeclaration>,
-    ...
-  }) => Node;
-}
-/**
- * ## Class names
- *
- * 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>
- * ```
- *
- * ### Style with template literals
- * @example ```
- * <ClassNames>
- *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
- * </ClassNames>
- * ```
- *
- * ### Compose styles with arrays
- * @example ```
- * <ClassNames>
- *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
- * </ClassNames>
- * ```
- */
-declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;

package/dist/browser/css/index.js.flow

@@ -1,36 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { CSSProps, CssObject, CssFunction } from '../types';
-/**
- * ## CSS
- *
- * Define styles that are statically typed and useable with other Compiled APIs.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
- *
- * ### Style with objects
- * @example ```
- * const redText = css({
- *   color: 'red',
- * });
- *
- * <div css={redText} />
- * ```
- *
- * ### Style with template literals
- * @example ```
- * const redText = css`
- *   color: red;
- * `;
- *
- * <div css={redText} />
- * ```
- */
-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/dist/browser/css-map/index.js.flow

@@ -1,125 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Properties, AtRules } from 'csstype';
-import type { Pseudos } from './pseudos';
-/**
- * These are all the CSS props that will exist.
- * Only 'string' and 'number' are valid CSS values.
- * @example ```
- * const style: CssProps = {
- *  color: 'red',
- *  margin: 10,
- * };
- * ```
- */
-declare type CssProps = $ReadOnly<Properties<string | number>>;
-declare type AllPseudos = $ObjMapi<
-  { [k: Pseudos]: any },
-  <key>(key) => { ...CssProps, ...AllPseudos }
->;
-declare type AtRuleSecondHalf = string;
-declare type WhitelistedAtRule = $ObjMapi<
-  { [k: AtRules]: any },
-  <atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
-    { [k: AtRuleSecondHalf]: any },
-    <atRuleSecondHalf>(atRuleSecondHalf) => {
-      ...CssProps,
-      ...AllPseudos,
-      ...WhitelistedAtRule,
-    }
-  >
->;
-declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
-declare type ExtendedSelector = {
-  ...{
-    [key: string]: CssProps | ExtendedSelector,
-  },
-  ...{
-    /**
-     * Using `selectors` is not valid here - you cannot nest a `selectors` object
-     * inside another `selectors` object.
-     */
-    selectors?: empty,
-    ...
-  },
-};
-declare type ExtendedSelectors = {
-  /**
-   * Provides a way to use selectors that have not been explicitly whitelisted
-   * in cssMap.
-   *
-   * This does not provide any type-checking for the selectors (thus allowing
-   * more expressive selectors), though this is more flexible and allows
-   * nesting selectors in other selectors.
-   *
-   * A selector defined both outside of the `selectors` object and
-   * inside the `selectors` object is a runtime error.
-   *
-   * Note that you cannot nest a `selectors` object inside another
-   * `selectors` object.
-   *
-   * Only use if absolutely necessary.
-   * @example ```
-   * const myMap = cssMap({
-   *   danger: {
-   *     color: 'red',
-   *     '@media': {
-   *       '(min-width: 100px)': {
-   *         font-size: '1.5em',
-   *       },
-   *     },
-   *     '&:hover': {
-   *       color: 'pink',
-   *     },
-   *     selectors: {
-   *       '&:not(:active)': {
-   *         backgroundColor: 'yellow',
-   *       }
-   *     },
-   *   },
-   *   success: {
-   *     color: 'green',
-   *     '@media': {
-   *       '(min-width: 100px)': {
-   *         font-size: '1.3em',
-   *       },
-   *     },
-   *     '&:hover': {
-   *       color: '#8f8',
-   *     },
-   *     selectors: {
-   *       '&:not(:active)': {
-   *         backgroundColor: 'white',
-   *       }
-   *     },
-   *   },
-   * });
-   * ```
-   */
-  selectors?: ExtendedSelector,
-  ...
-};
-declare type Variants<VariantName: string> = {
-  [key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
-};
-declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
-/**
- * ## cssMap
- *
- * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
- * @example ```
- * const borderStyleMap = cssMap({
- *     none: { borderStyle: 'none' },
- *     solid: { borderStyle: 'solid' },
- * });
- * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
- *
- * <Component borderStyle="solid" />
- * ```
- */
-declare export default function cssMap<T: string>(_styles: Variants<T>): $ReadOnly<ReturnType<T>>;

package/dist/browser/css-map/pseudos.js.flow

@@ -1,57 +0,0 @@
-/**
- * Flowtype definitions for pseudos
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-export type Pseudos =
-  | '&::after'
-  | '&::backdrop'
-  | '&::before'
-  | '&::cue'
-  | '&::cue-region'
-  | '&::first-letter'
-  | '&::first-line'
-  | '&::grammar-error'
-  | '&::marker'
-  | '&::placeholder'
-  | '&::selection'
-  | '&::spelling-error'
-  | '&::target-text'
-  | '&::view-transition'
-  | '&:active'
-  | '&:autofill'
-  | '&:blank'
-  | '&:checked'
-  | '&:default'
-  | '&:defined'
-  | '&:disabled'
-  | '&:empty'
-  | '&:enabled'
-  | '&:first'
-  | '&:focus'
-  | '&:focus-visible'
-  | '&:focus-within'
-  | '&:fullscreen'
-  | '&:hover'
-  | '&:in-range'
-  | '&:indeterminate'
-  | '&:invalid'
-  | '&:left'
-  | '&:link'
-  | '&:local-link'
-  | '&:optional'
-  | '&:out-of-range'
-  | '&:paused'
-  | '&:picture-in-picture'
-  | '&:placeholder-shown'
-  | '&:playing'
-  | '&:read-only'
-  | '&:read-write'
-  | '&:required'
-  | '&:right'
-  | '&:target'
-  | '&:user-invalid'
-  | '&:user-valid'
-  | '&:valid'
-  | '&:visited';

package/dist/browser/index.js.flow

@@ -1,13 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-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';
-declare export { default as cssMap } from './css-map';

package/dist/browser/keyframes/index.js.flow

@@ -1,48 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | { [key: string]: CSSProps<void> };
-/**
- * ## Keyframes
- *
- * 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).
- *
- * ### Style with objects
- * @example ```
- * const fadeOut = keyframes({
- *   from: {
- *     opacity: 1,
- *   },
- *   to: {
- *     opacity: 0,
- *   },
- * });
- *
- * <div css={{ animation: `${fadeOut} 2s` }} />
- * ```
- *
- * ### Style with template literals
- * @example ```
- * const fadeOut = keyframes`
- *   from {
- *     opacity: 1;
- *   }
- *
- *   to {
- *     opacity: 0;
- *   }
- * `;
- *
- * <div css={{ animation: `${fadeOut} 2s` }} />
- * ```
- */
-declare export function keyframes(steps: KeyframeSteps): string;
-declare export function keyframes(
-  strings: $ReadOnlyArray<string>,
-  ...interpolations: BasicTemplateInterpolations[]
-): string;

package/dist/browser/runtime/ac.js.flow

@@ -1,56 +0,0 @@
-/**
- * Flowtype definitions for ac
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Memoize the result of ac so if it is called with the same args, it returns immediately.
- * Also, to prevent useless React rerenders
- */
-declare var cache: Map<any, any>;
-/**
- * `ac` returns an instance of AtomicGroups. The instance holds the knowledge of Atomic Group so we can chain `ac`.
- * e.g. <div className={ax([ax(['_aaaa_b']), '_aaaa_c'])} />
- */
-declare class AtomicGroups {
-  values: Map<string, string>;
-  constructor(values: Map<string, string>): this;
-  toString(): string;
-}
-/**
- * Joins classes together and ensures atomic declarations of a single group exist.
- * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
- * where both `group` and `value` are hashes **four characters long**.
- * Class names can be of any length,
- * this function can take both atomic declarations and class names.
- *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
- * ```
- *
- * Output:
- *
- * ```
- * '_aaaacccc'
- * ```
- * @param classes
- */
-declare export function ac(
-  classNames: (AtomicGroups | string | void | false)[]
-): AtomicGroups | void;
-declare export function memoizedAc(
-  classNames: (AtomicGroups | string | void | false)[]
-): AtomicGroups | void;
-declare var _default: typeof ac;
-declare export default typeof _default;
-/**
- * Provide an opportunity to clear the cache to prevent memory leak.
- */
-declare export function clearCache(): void;
-/**
- * Expose cache
- */
-declare export function getCache(): typeof cache;

package/dist/browser/runtime/ax.js.flow

@@ -1,27 +0,0 @@
-/**
- * Flowtype definitions for ax
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Joins classes together and ensures atomic declarations of a single group exist.
- * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
- * where both `group` and `value` are hashes **four characters long**.
- * Class names can be of any length,
- * this function can take both atomic declarations and class names.
- *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
- * ```
- *
- * Output:
- *
- * ```
- * '_aaaacccc'
- * ```
- * @param classes
- */
-declare export default function ax(classNames: (string | void | false)[]): string | void;

package/dist/browser/runtime/cache.js.flow

@@ -1,18 +0,0 @@
-/**
- * Flowtype definitions for cache
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Returns `true` when caching should be disabled, else `false`.
- *
- * Any code within this check will be removed in the output bundles:
- *
- * ```js
- * if (isCacheDisabled()) {
- *   // This code will be removed from the output bundles
- * }
- * ```
- */
-declare export var isCacheDisabled: () => boolean;

package/dist/browser/runtime/css-custom-property.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for css-custom-property
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Returns a CSS custom property value with an optional suffix & prefix.
- * Prefix will only be added if there is a suffix.
- * If the value is undefined a fallback value will be returned to prevent children inheriting parent values.
- * @param value
- * @param suffix
- * @param prefix
- */
-declare export default function cssCustomPropertyValue(
-  value: string | number | null | void,
-  suffix?: string | void | null,
-  prefix?: string | void | null
-): string | number;

package/dist/browser/runtime/dev-warnings.js.flow

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

package/dist/browser/runtime/index.js.flow

@@ -1,11 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export { default as CS } from './style';
-declare export { default as CC } from './style-cache';
-declare export { default as ax } from './ax';
-declare export { default as ac, clearCache as clearAcCache } from './ac';
-declare export { default as ix } from './css-custom-property';

package/dist/browser/runtime/is-server-environment.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for is-server-environment
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * 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
- * }
- * ```
- */
-declare export var isServerEnvironment: () => boolean;

package/dist/browser/runtime/sheet.js.flow

@@ -1,36 +0,0 @@
-/**
- * Flowtype definitions for sheet
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Bucket, StyleSheetOpts } from './types';
-/**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
- */
-declare export var styleBucketOrdering: Bucket[];
-/**
- * Gets the bucket depending on the sheet.
- * This function makes assumptions as to the form of the input class name.
- *
- * Input:
- *
- * ```
- * "._a1234567:hover{ color: red; }"
- * ```
- *
- * Output:
- *
- * ```
- * "h"
- * ```
- * @param sheet styles for which we are getting the bucket
- */
-declare export var getStyleBucketName: (sheet: string) => Bucket;
-/**
- * Used to move styles to the head of the application during runtime.
- * @param css string
- * @param opts StyleSheetOpts
- */
-declare export default function insertRule(css: string, opts: StyleSheetOpts): void;

package/dist/browser/runtime/style-cache.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for style-cache
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { ProviderComponent, UseCacheHook } from './types';
-/**
- * Hook using the cache created on the server or client.
- */
-declare export var useCache: UseCacheHook;
-/**
- * On the server this ensures the minimal amount of styles will be rendered
- * safely using React Context.
- *
- * On the browser this turns into a fragment with no React Context.
- */
-declare var StyleCacheProvider: ProviderComponent;
-declare export default typeof StyleCacheProvider;

package/dist/browser/runtime/style.js.flow

@@ -1,16 +0,0 @@
-/**
- * Flowtype definitions for style
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { StyleSheetOpts } from './types';
-declare type StyleProps = {
-  /**
-   * CSS Rules.
-   * Ensure each rule is a separate element in the array.
-   */
-  children: string[],
-  ...
-} & StyleSheetOpts;
-declare export default function Style(props: StyleProps): React$Node | null;

package/dist/browser/runtime/types.js.flow

@@ -1,23 +0,0 @@
-/**
- * Flowtype definitions for types
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-export interface StyleSheetOpts {
-  /**
-   * Used to set a nonce on the style element.
-   * This is needed when using a strict CSP and should be a random hash generated every server load.
-   * Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src for more information.
-   */
-  nonce?: string;
-}
-/**
- * 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 ProviderComponent = (props: {
-  children: React$Node[] | React$Node,
-  ...
-}) => React$Node;

package/dist/browser/runtime.js.flow

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