@compiled/react 0.6.12 → 0.9.0

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

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import '@compiled/react';
+import { css } from '@compiled/react';
+
+describe('css prop', () => {
+  it('should create css from object literal', () => {
+    const { getByText } = render(<div css={css({ fontSize: '13px' })}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
+  });
+
+  it('should create css from object literal call expression', () => {
+    const style = css({ fontSize: '13px' });
+    const { getByText } = render(<div css={style}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
+  });
+
+  it('should create css from tagged template expression', () => {
+    const { getByText } = render(
+      <div
+        css={css`
+          font-size: 13px;
+        `}>
+        hello world
+      </div>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
+  });
+
+  it('should create css from tagged template expression variable', () => {
+    const style = css`
+      font-size: 13px;
+    `;
+    const { getByText } = render(<div css={style}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
+  });
+});

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

@@ -0,0 +1,17 @@
+// @flow strict-local
+import React from 'react';
+import { css } from '@compiled/react';
+
+// Tagged template expression
+(): React$Element<'div'> => {
+  const styles = css`
+    color: red;
+  `;
+  return <div css={styles}>red text</div>;
+};
+
+// Object call expression
+(): React$Element<'div'> => {
+  const styles = css({ color: 'red' });
+  return <div css={styles}>red text</div>;
+};

package/src/css/index.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+/**
+ * Create styles that can be re-used between components with a template literal.
+ *
+ * ```
+ * css`color: red;`;
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ * @param css
+ * @param values
+ */
+declare export default function css<T>(
+  _css: $ReadOnlyArray<string>,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps;
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ * @param css
+ */
+declare export default function css(_css: CSSProps): CSSProps;

package/src/css/index.tsx

@@ -1,8 +1,8 @@
 import { createSetupError } from '../utils/error';
-import type { CSSProps } from '../types';
+import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 
 /**
- * Create styles that can be re-used between components.
+ * Create styles that can be re-used between components with a template literal.
  *
  * ```
  * css`color: red;`;
@@ -12,7 +12,30 @@ import type { CSSProps } from '../types';
  * https://compiledcssinjs.com/docs/api-css
  *
  * @param css
+ * @param values
  */
-export default function css(_css: TemplateStringsArray): CSSProps {
+export default function css<T = void>(
+  _css: TemplateStringsArray,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps;
+
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ *
+ * @param css
+ */
+export default function css(_css: CSSProps): CSSProps;
+
+export default function css<T = void>(
+  _css: TemplateStringsArray | CSSProps,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps {
   throw createSetupError();
 }

package/src/index.js.flow

@@ -0,0 +1,40 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import type { CssFunction, CSSProps } from './types';
+declare export { keyframes } from './keyframes';
+declare export { styled } from './styled';
+declare export { ClassNames } from './class-names';
+declare export { default as css } from './css';
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
+declare module 'react' {
+  declare interface DOMAttributes<T> {
+    css?: CssFunction<> | CssFunction<>[];
+  }
+}
+declare module 'global' {
+  declare var JSX: typeof npm$namespace$JSX;
+  declare var npm$namespace$JSX: {|
+    IntrinsicAttributes: Class<JSX$IntrinsicAttributes>,
+  |};
+  declare interface JSX$IntrinsicAttributes {
+    /**
+     * Tie styles to an element.
+     * It is available when the `@compiled/react` module is in scope.
+     *
+     * ```
+     * css={{ fontSize: 12 }} // Object CSS
+     * css={`font-size: 12px;`} // Template literal CSS
+     * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+     * ```
+     *
+     * For more help, read the docs:
+     * https://compiledcssinjs.com/docs/api-css-prop
+     */
+    css?: CssFunction<> | CssFunction<>[];
+  }
+}

package/src/index.tsx

@@ -1,8 +1,11 @@
+import type { CssFunction, CSSProps } from './types';
+
+export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
-
-import { CssFunction } from './types';
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
 
 declare module 'react' {
   // We must match the same type signature so the generic needs to stay.

package/src/keyframes/__fixtures__/index.tsx

@@ -0,0 +1,14 @@
+import { keyframes } from '@compiled/react';
+
+export const fadeOut = keyframes({
+  from: {
+    opacity: 1,
+  },
+  to: {
+    opacity: 0,
+  },
+});
+
+export const namedFadeOut = fadeOut;
+
+export default fadeOut;

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

@@ -0,0 +1,324 @@
+import { keyframes, styled } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+import defaultFadeOut, { fadeOut as shadowedFadeOut, namedFadeOut } from '../__fixtures__';
+
+const getOpacity = (str: string | number) => str;
+
+const getKeyframe = (name: string) => {
+  const styles = Array.from(
+    document.body.querySelectorAll('style'),
+    (style) => style.innerHTML
+  ).join('\n');
+
+  return styles.substring(styles.indexOf(`@keyframes ${name}`));
+};
+
+describe('keyframes', () => {
+  describe('referenced through a css prop', () => {
+    describe('render an animation', () => {
+      it('given an object call expression argument', () => {
+        const fadeOut = keyframes({
+          from: {
+            opacity: 1,
+          },
+          to: {
+            opacity: 0,
+          },
+        });
+
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a template literal call expression argument', () => {
+        const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'klmf72q');
+        expect(getKeyframe('klmf72q')).toMatchInlineSnapshot(
+          `"@keyframes klmf72q{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a string call expression argument', () => {
+        const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1b0zjii');
+        expect(getKeyframe('k1b0zjii')).toMatchInlineSnapshot(
+          `"@keyframes k1b0zjii{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a tagged template expression', () => {
+        const fadeOut = keyframes`
+          from { opacity: 1; }
+          to   { opacity: 0; }
+        `;
+
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1vk0ha6');
+        expect(getKeyframe('k1vk0ha6')).toMatchInlineSnapshot(
+          `"@keyframes k1vk0ha6{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in a default import', () => {
+        const { getByText } = render(
+          <div css={{ animationName: defaultFadeOut }}>hello world</div>
+        );
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in an imported named import', () => {
+        const { getByText } = render(<div css={{ animationName: namedFadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in a local named import', () => {
+        const { getByText } = render(
+          <div css={{ animationName: shadowedFadeOut }}>hello world</div>
+        );
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing a call expression', () => {
+        const from = 1;
+        const to = 0;
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: getOpacity(from),
+          },
+          to: {
+            opacity: getOpacity(to),
+          },
+        });
+
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'kbrsk95');
+        expect(getKeyframe('kbrsk95')).toMatchInlineSnapshot(
+          `"@keyframes kbrsk95{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing an identifier referencing a constant numeric literal', () => {
+        const fromOpacity = 1;
+        const toOpacity = 0;
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: fromOpacity,
+          },
+          to: {
+            opacity: toOpacity,
+          },
+        });
+
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'korwhog');
+        expect(getKeyframe('korwhog')).toMatchInlineSnapshot(
+          `"@keyframes korwhog{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing an identifier referencing a call expression', () => {
+        const fromOpacity = getOpacity(1);
+        const toOpacity = getOpacity(0);
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: fromOpacity,
+          },
+          to: {
+            opacity: toOpacity,
+          },
+        });
+
+        const { getByText } = render(<div css={{ animationName: fadeOut }}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'korwhog');
+        expect(getKeyframe('korwhog')).toMatchInlineSnapshot(
+          `"@keyframes korwhog{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+    });
+  });
+
+  describe('referenced through a styled component', () => {
+    describe('render an animation', () => {
+      it('given an object call expression argument', () => {
+        const fadeOut = keyframes({
+          from: {
+            opacity: 1,
+          },
+          to: {
+            opacity: 0,
+          },
+        });
+
+        const Component = styled.div({ animationName: fadeOut });
+
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a template literal call expression argument', () => {
+        const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'klmf72q');
+        expect(getKeyframe('klmf72q')).toMatchInlineSnapshot(
+          `"@keyframes klmf72q{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a string call expression argument', () => {
+        const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1b0zjii');
+        expect(getKeyframe('k1b0zjii')).toMatchInlineSnapshot(
+          `"@keyframes k1b0zjii{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('given a tagged template expression', () => {
+        const fadeOut = keyframes`
+          from { opacity: 1; }
+          to   { opacity: 0; }
+        `;
+
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1vk0ha6');
+        expect(getKeyframe('k1vk0ha6')).toMatchInlineSnapshot(
+          `"@keyframes k1vk0ha6{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in a default export', () => {
+        const Component = styled.div({ animationName: defaultFadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in an imported named import', () => {
+        const Component = styled.div({ animationName: namedFadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('defined in a local named import', () => {
+        const Component = styled.div({ animationName: shadowedFadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'k1m8j3od');
+        expect(getKeyframe('k1m8j3od')).toMatchInlineSnapshot(
+          `"@keyframes k1m8j3od{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing a call expression', () => {
+        const from = 1;
+        const to = 0;
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: getOpacity(from),
+          },
+          to: {
+            opacity: getOpacity(to),
+          },
+        });
+
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'kbrsk95');
+        expect(getKeyframe('kbrsk95')).toMatchInlineSnapshot(
+          `"@keyframes kbrsk95{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing an identifier referencing a constant numeric literal', () => {
+        const fromOpacity = 1;
+        const toOpacity = 0;
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: fromOpacity,
+          },
+          to: {
+            opacity: toOpacity,
+          },
+        });
+
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'korwhog');
+        expect(getKeyframe('korwhog')).toMatchInlineSnapshot(
+          `"@keyframes korwhog{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+
+      it('containing an identifier referencing a call expression', () => {
+        const fromOpacity = getOpacity(1);
+        const toOpacity = getOpacity(0);
+
+        const fadeOut = keyframes({
+          from: {
+            opacity: fromOpacity,
+          },
+          to: {
+            opacity: toOpacity,
+          },
+        });
+
+        const Component = styled.div({ animationName: fadeOut });
+        const { getByText } = render(<Component>hello world</Component>);
+
+        expect(getByText('hello world')).toHaveCompiledCss('animation-name', 'korwhog');
+        expect(getKeyframe('korwhog')).toMatchInlineSnapshot(
+          `"@keyframes korwhog{0%{opacity:1}to{opacity:0}}"`
+        );
+      });
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+// @flow strict-local
+import React from 'react';
+import { css, ClassNames, styled, keyframes } from '@compiled/react';
+
+// Tagged template expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes`
+    from { opacity: 1; }
+    to   { opacity: 0; }
+  `;
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};
+
+// Object call expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes({
+    from: {
+      opacity: 1,
+    },
+    to: {
+      opacity: 0,
+    },
+  });
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};
+
+// String call expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};

package/src/keyframes/index.js.flow

@@ -0,0 +1,54 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import type { BasicTemplateInterpolations, CSSProps } from '../types';
+export type KeyframeSteps = string | { [key: string]: CSSProps, ... };
+/**
+ * Create keyframes using a tagged template expression:
+ *
+ * ```
+ * const fadeOut = keyframes`
+ *   from { opacity: 1; }
+ *   to   { opacity: 0; }
+ * `;
+ * ```
+ * @param _strings The input string values
+ * @param _interpolations The arguments used in the expression
+ */
+declare export function keyframes(
+  _strings: $ReadOnlyArray<string>,
+  ..._interpolations: BasicTemplateInterpolations[]
+): string;
+/**
+ * Create keyframes using:
+ *
+ * 1. An object expression
+ *
+ * ```
+ * const fadeOut = keyframes({
+ *   from: {
+ *     opacity: 1,
+ *   },
+ *   to: {
+ *     opacity: 0,
+ *   },
+ * });
+ * ```
+ *
+ * 2. A string
+ *
+ * ```
+ * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+ * ```
+ *
+ * 3. A template literal
+ *
+ * ```
+ * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
+ * ```
+ * @param _steps The waypoints along the animation sequence
+ */
+declare export function keyframes(_steps: KeyframeSteps): string;

package/src/keyframes/index.tsx

@@ -0,0 +1,61 @@
+import type { BasicTemplateInterpolations, CSSProps } from '../types';
+import { createSetupError } from '../utils/error';
+
+export type KeyframeSteps = string | Record<string, CSSProps>;
+
+/**
+ * Create keyframes using a tagged template expression:
+ *
+ * ```
+ * const fadeOut = keyframes`
+ *   from { opacity: 1; }
+ *   to   { opacity: 0; }
+ * `;
+ * ```
+ *
+ * @param _strings The input string values
+ * @param _interpolations The arguments used in the expression
+ */
+export function keyframes(
+  _strings: TemplateStringsArray,
+  ..._interpolations: BasicTemplateInterpolations[]
+): string;
+
+/**
+ * Create keyframes using:
+ *
+ * 1. An object expression
+ *
+ * ```
+ * const fadeOut = keyframes({
+ *   from: {
+ *     opacity: 1,
+ *   },
+ *   to: {
+ *     opacity: 0,
+ *   },
+ * });
+ * ```
+ *
+ * 2. A string
+ *
+ * ```
+ * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+ * ```
+ *
+ * 3. A template literal
+ *
+ * ```
+ * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
+ * ```
+ *
+ * @param _steps The waypoints along the animation sequence
+ */
+export function keyframes(_steps: KeyframeSteps): string;
+
+export function keyframes(
+  _stringsOrSteps: TemplateStringsArray | KeyframeSteps,
+  ..._interpolations: BasicTemplateInterpolations[]
+): string {
+  throw createSetupError();
+}