@compiled/react 0.6.13 → 0.9.1

package/src/runtime/__tests__/style.test.tsx

@@ -1,103 +1,137 @@
 import React from 'react';
+import type { ComponentType } from 'react';
 import { render } from '@testing-library/react';
-import Style from '../style';
 
 jest.mock('../is-node', () => ({
   isNodeEnvironment: () => false,
 }));
 
 describe('<Style />', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
   beforeEach(() => {
-    // Reset style tags in head before each test so that it will remove styles
-    // injected by test
-    document.head.querySelectorAll('style').forEach((styleElement) => {
-      styleElement.textContent = '';
-    });
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+    document.head.innerHTML = '';
   });
 
+  // We want to isolate the test to correctly mimic the environment being loaded in once
+  const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
+    jest.isolateModules(() => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const Style = require('../style');
+
+      callback(Style.default);
+    });
+  };
+
   it('should render nothing on the client', () => {
-    const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
 
-    expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should add style to the head on the client', () => {
-    render(<Style>{[`.b { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.b { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should only add one style if it was already added', () => {
-    render(<Style>{[`.c { display: block; }`]}</Style>);
-    render(<Style>{[`.c { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.c { display: block; }`]}</Style>);
+      render(<Style>{[`.c { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should noop in prod', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'production';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'production';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).not.toHaveBeenCalled();
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should warn in dev when using a dangerous pseduo selector', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalled();
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
   });
 
   it('should warn in dev only once', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringMatching('Selectors ":first-child, :nth-child" are dangerous to use')
+      );
+    });
   });
 
   it('should render style tags in buckets', () => {
-    render(
-      <Style>
-        {[
-          `._a1234567:hover{ color: red; }`,
-          `._b1234567:active{ color: blue; }`,
-          `._c1234567:link{ color: green; }`,
-          `._d1234567{ display: block; }`,
-          `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
-          `._f1234567:focus{ color: pink; }`,
-          `._g1234567:visited{ color: grey; }`,
-          `._h1234567:focus-visible{ color: white; }`,
-          `._i1234567:focus-within{ color: black; }`,
-        ]}
-      </Style>
-    );
-
-    expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style>._d1234567{ display: block; }</style>
-      <style>._c1234567:link{ color: green; }</style>
-      <style>._g1234567:visited{ color: grey; }</style>
-      <style>._i1234567:focus-within{ color: black; }</style>
-      <style>._f1234567:focus{ color: pink; }</style>
-      <style>._h1234567:focus-visible{ color: white; }</style>
-      <style>._a1234567:hover{ color: red; }</style>
-      <style>._b1234567:active{ color: blue; }</style>
-      <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
-      "
-    `);
+    createIsolatedTest((Style) => {
+      render(
+        <Style>
+          {[
+            `._a1234567:hover{ color: red; }`,
+            `._b1234567:active{ color: blue; }`,
+            `._c1234567:link{ color: green; }`,
+            `._d1234567{ display: block; }`,
+            `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
+            `._f1234567:focus{ color: pink; }`,
+            `._g1234567:visited{ color: grey; }`,
+            `._h1234567:focus-visible{ color: white; }`,
+            `._i1234567:focus-within{ color: black; }`,
+          ]}
+        </Style>
+      );
+
+      expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
+        "<style>._d1234567{ display: block; }</style>
+        <style>._c1234567:link{ color: green; }</style>
+        <style>._g1234567:visited{ color: grey; }</style>
+        <style>._i1234567:focus-within{ color: black; }</style>
+        <style>._f1234567:focus{ color: pink; }</style>
+        <style>._h1234567:focus-visible{ color: white; }</style>
+        <style>._a1234567:hover{ color: red; }</style>
+        <style>._b1234567:active{ color: blue; }</style>
+        <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
+        "
+      `);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should update styles', () => {
-    const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
 
-    rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
+      rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 });

package/src/runtime/ax.js.flow

@@ -0,0 +1,27 @@
+/**
+ * Flowtype definitions for ax
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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/src/runtime/css-custom-property.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for css-custom-property
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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 | number | null,
+  suffix?: string | void | null,
+  prefix?: string | void | null
+): string | number;

package/src/runtime/dev-warnings.js.flow

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

package/src/runtime/dev-warnings.tsx

@@ -1,7 +1,7 @@
 const selectorsToWarn = [':first-child', ':nth-child'];
 const hasWarned: Record<string, true> = {};
 
-export const warn = (str: string, ...args: any[]): void =>
+const warn = (str: string, ...args: any[]): void =>
   console.error(
     `
  ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗

package/src/runtime/index.js.flow

@@ -0,0 +1,10 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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 ix } from './css-custom-property';

package/src/runtime/is-node.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for is-node
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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 (isNodeEnvironment()) {
+ *   // This code will be removed from the browser bundle
+ * }
+ * ```
+ */
+declare export var isNodeEnvironment: () => boolean;

package/src/runtime/sheet.js.flow

@@ -0,0 +1,36 @@
+/**
+ * Flowtype definitions for sheet
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+import type { StyleSheetOpts, Bucket } 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/src/runtime/sheet.tsx

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

package/src/runtime/style-cache.js.flow

@@ -0,0 +1,19 @@
+/**
+ * Flowtype definitions for style-cache
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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/src/runtime/style-cache.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
 import { isNodeEnvironment } from './is-node';
-import { ProviderComponent, UseCacheHook } from './types';
+import type { ProviderComponent, UseCacheHook } from './types';
 
 /**
  * Cache to hold already used styles.

package/src/runtime/style.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for style
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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;
+declare export {};

package/src/runtime/style.tsx

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

package/src/runtime/types.js.flow

@@ -0,0 +1,23 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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/src/runtime.js.flow

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

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

@@ -0,0 +1,30 @@
+// @flow strict-local
+import React, { type Node } from 'react';
+import { styled, type CssObject, type CSSProps } from '@compiled/react';
+
+// Tagged template expression
+() => {
+  const StyledTaggedTemplateExpression = styled.div`
+    font-size: 12px;
+  `;
+  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+};
+
+// Object call expression
+() => {
+  const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 });
+  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+};
+
+// Array
+() => {
+  const styles: CSSProps[] = [{ fontSize: '12px' }];
+  const StyledTaggedTemplateExpression = styled.div(styles);
+  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+};
+
+// Multiple arguments
+() => {
+  const StyledTaggedTemplateExpression = styled.div({ fontSize: 12 }, `font-size: 12px`);
+  return <StyledTaggedTemplateExpression>red text</StyledTaggedTemplateExpression>;
+};

package/src/styled/index.js.flow

@@ -0,0 +1,69 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.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>>;
+/**
+ * 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 StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledFunctionFromTag<Tag>>;
+export type StyledComponentInstantiator = {
+  /**
+   * Typing to enable consumers to compose components, e.g: `styled(Component)`
+   */
+  <TInheritedProps: mixed>(
+    Component: ComponentType<TInheritedProps>
+  ): StyledFunctionFromComponent<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.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
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-styled
+ */
+declare export var styled: StyledComponentInstantiator;

package/src/styled/index.tsx

@@ -1,15 +1,11 @@
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import { createSetupError } from '../utils/error';
-import { CssFunction, BasicTemplateInterpolations } from '../types';
-
-export interface FunctionIterpolation<TProps> {
-  (props: TProps): string | number | undefined;
-}
+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.
@@ -20,7 +16,7 @@ export interface StyledProps {
 
 export type Interpolations<TProps extends unknown> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];
@@ -34,7 +30,7 @@ export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements>
   <TProps extends unknown>(
     // Allows either string or object (`` or ({}))
     css: CssObject<TProps> | CssObject<TProps>[],
-    ...interpoltations: Interpolations<TProps>
+    ...interpolations: Interpolations<TProps>
   ): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
 }
 
@@ -42,7 +38,7 @@ export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
   <TProps extends unknown>(
     // Allows either string or object (`` or ({}))
     css: CssObject<TProps> | TemplateStringsArray,
-    ...interpoltations: Interpolations<TProps>
+    ...interpolations: Interpolations<TProps>
   ): React.ComponentType<TProps & StyledProps & TInheritedProps>;
 }
 

package/src/types.js.flow

@@ -0,0 +1,29 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+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<BasicTemplateInterpolations>;
+export type AnyKeyCssProps<TValue> = {
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
+  ...
+};
+export type CssFunction<TValue = void> =
+  | CSSProps
+  | AnyKeyCssProps<TValue>
+  | $ReadOnlyArray<string>
+  | string
+  | boolean
+  | void;

package/src/types.tsx

@@ -1,17 +1,21 @@
-import * as CSS from 'csstype';
+import type * as CSS from 'csstype';
 
 /**
  * Typing for the interpolations.
  */
 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

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