@compiled/react 0.13.1 → 0.15.0

package/src/css-map/index.js.flow

@@ -0,0 +1,125 @@
+/**
+ * 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/src/css-map/index.ts

@@ -0,0 +1,126 @@
+import type { Properties, AtRules } from 'csstype';
+
+import { createSetupError } from '../utils/error';
+
+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,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+
+type AllPseudos = { [key in Pseudos]?: CssProps & AllPseudos };
+
+// The `screen and (max-width: 768px)` part of `@media screen and (max-width: 768px)`.
+// Ideally we would do type checking to forbid this from containing the `@media` part,
+// but TypeScript doesn't provide a good way to do this.
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+  [atRuleFirstHalf in AtRules]?: {
+    [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+  };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+
+type ExtendedSelector = { [key: string]: CssProps | ExtendedSelector } & {
+  /**
+   * Using `selectors` is not valid here - you cannot nest a `selectors` object
+   * inside another `selectors` object.
+   */
+  selectors?: never;
+};
+
+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;
+};
+
+type Variants<VariantName extends string> = Record<
+  VariantName,
+  CssProps & WhitelistedSelector & ExtendedSelectors
+>;
+type ReturnType<VariantName extends string> = Record<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" />
+ * ```
+ */
+
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>> {
+  throw createSetupError();
+}

package/src/css-map/pseudos.js.flow

@@ -0,0 +1,57 @@
+/**
+ * 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/src/css-map/pseudos.ts

@@ -0,0 +1,59 @@
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+
+// We also exclude anything that requires providing an argument
+// (e.g. &:not(...) ), and anything that uses information from elements
+// outside of the current element (e.g. &:first-of-type)
+
+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/src/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CssFunction, CSSProps, CssType } from './types';
@@ -10,3 +10,4 @@ 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/src/index.ts

@@ -9,6 +9,7 @@ export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+export { default as cssMap } from './css-map';
 
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.

package/src/keyframes/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';

package/src/runtime/ac.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ac
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/src/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.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.20.1
+ * Flowgen v1.21.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.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

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.20.1
+ * Flowgen v1.21.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.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { default as CS } from './style';

package/src/runtime/is-server-environment.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for is-server-environment
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/src/runtime/sheet.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.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.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 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.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { StyleSheetOpts } from './types';

package/src/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.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.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';

package/src/styled/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { ComponentType } from 'react';

package/src/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -19,11 +19,11 @@ export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps>
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export type CssObject<TProps> = {
+export type CSSProps<TProps> = $ReadOnly<CSS.Properties<CssFunction<TProps>>>;
+export type CssObject<TProps> = $ReadOnly<{
   ...CSSProps<TProps>,
   [key: string]: CssFunction<TProps>,
-};
+}>;
 export type CssFunction<TProps = mixed> =
   | CssType<TProps>
   | BasicTemplateInterpolations

package/src/types.ts

@@ -21,11 +21,11 @@ export type CssType<TProps> =
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CSSProps<TProps> = Readonly<CSS.Properties<CssFunction<TProps>>>;
 
-export type CssObject<TProps> = {
+export type CssObject<TProps> = Readonly<{
   [key: string]: CssFunction<TProps>;
-};
+}>;
 
 // CSS inside of a CSS expression
 export type CssFunction<TProps = unknown> =

package/src/utils/error.js.flow

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