@compiled/react 0.7.0 → 0.10.0

package/dist/esm/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/dist/esm/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA6DlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAwDlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/esm/types.d.ts

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

package/dist/esm/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/dist/esm/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;

package/jsx-dev-runtime/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/jsx/jsx-dev-runtime.js",
+  "module": "../dist/esm/jsx/jsx-dev-runtime.js",
+  "browser": "../dist/browser/jsx/jsx-dev-runtime.js",
+  "types": "../dist/esm/jsx/jsx-dev-runtime.d.ts"
+}

package/jsx-runtime/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/jsx/jsx-runtime.js",
+  "module": "../dist/esm/jsx/jsx-runtime.js",
+  "browser": "../dist/browser/jsx/jsx-runtime.js",
+  "types": "../dist/esm/jsx/jsx-runtime.d.ts"
+}

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@compiled/react",
-  "version": "0.7.0",
+  "version": "0.10.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
     "css-in-js",
     "styled-components",
-    "emotion-js",
     "typescript"
   ],
   "homepage": "https://compiledcssinjs.com",
@@ -21,16 +20,44 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./babel-plugin": {
-      "import": "./dist/esm/babel-plugin.js",
-      "require": "./dist/cjs/babel-plugin.js"
+      "import": [
+        "./dist/esm/index.js",
+        "./src/index.tsx"
+      ],
+      "require": [
+        "./dist/cjs/index.js",
+        "./src/index.tsx"
+      ]
     },
     "./runtime": {
-      "import": "./dist/esm/runtime.js",
-      "require": "./dist/cjs/runtime.js"
+      "import": [
+        "./dist/esm/runtime.js",
+        "./src/runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/runtime.js",
+        "./src/runtime.tsx"
+      ]
+    },
+    "./jsx-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ]
+    },
+    "./jsx-dev-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ]
     }
   },
   "main": "./dist/cjs/index.js",
@@ -40,17 +67,16 @@
   "files": [
     "dist",
     "src",
-    "babel-plugin",
     "runtime",
-    "README.md"
+    "jsx-runtime",
+    "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.0.8"
+    "csstype": "^3.0.9"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.7",
-    "@types/jscodeshift": "^0.11.2",
-    "jscodeshift": "^0.12.0",
+    "@types/react-dom": "^17.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/__tests__/browser.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import { styled } from '@compiled/react';
+import { render } from '@testing-library/react';
+import React from 'react';
 
-// Because of the babel transform these tests are using dist instead of src.
-// Anything we can do to use src instead?
-jest.mock('../../dist/cjs/runtime/is-node', () => ({
+// TODO: When we move back to browser checking (window vs. process) we can remove
+// this and replace with the "jest-environment node" pragma.
+jest.mock('../../src/runtime/is-node', () => ({
   isNodeEnvironment: () => false,
 }));
 

package/src/__tests__/jest-matcher.test.tsx

@@ -0,0 +1,197 @@
+/** @jsxImportSource @compiled/react */
+import { styled } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+describe('toHaveCompliedCss', () => {
+  it('should detect styles', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+        }}>
+        hello world
+      </div>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
+  it('should detect missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('color', 'blue');
+  });
+
+  it('should detect multiple styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss({
+      fontSize: '12px',
+      color: 'blue',
+    });
+  });
+
+  it('should detect single missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss({
+      zindex: '9999',
+    });
+  });
+
+  it('should detect multiple missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss({
+      backgroundColor: 'yellow',
+      zindex: '9999',
+    });
+  });
+
+  it('should detect evaluated rule from array styles', () => {
+    const base = { color: 'blue' };
+    const next = ` font-size: 15px; `;
+
+    const { getByText } = render(<div css={[base, next]}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'blue');
+  });
+
+  it('should find styles composed from multiple sources', () => {
+    const StyledDiv = styled.div`
+      font-size: 12px;
+    `;
+
+    const { getByText } = render(<StyledDiv css={{ fontSize: 14 }}>Hello world</StyledDiv>);
+
+    expect(getByText('Hello world')).toHaveCompiledCss('font-size', '14px');
+  });
+
+  it('should find multiple styles composed from multiple sources', () => {
+    const StyledDiv = styled.div`
+      color: yellow;
+      background-color: red;
+    `;
+
+    const { getByText } = render(<StyledDiv css={{ color: 'blue' }}>Hello world</StyledDiv>);
+
+    expect(getByText('Hello world')).toHaveCompiledCss({
+      backgroundColor: 'red',
+      color: 'blue',
+    });
+  });
+
+  it('should match styles with target:hover', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+          ':hover': {
+            transform: 'scale(2)',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('transform', 'scale(2)', { target: ':hover' });
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)');
+  });
+
+  it('should match styles with target', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+          ':hover': {
+            transform: 'scale(2)',
+          },
+          ':active': {
+            color: 'blue',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).not.toHaveCompiledCss('color', 'blue', { target: ':hover' });
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)');
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)', { target: ':active' });
+    expect(el).toHaveCompiledCss('transform', 'scale(2)', { target: ':hover' });
+    expect(el).toHaveCompiledCss('color', 'blue', { target: ':active' });
+  });
+
+  it('should match styles with media', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          color: 'green',
+          '@media screen': {
+            color: 'yellow',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'green');
+    expect(el).toHaveCompiledCss('color', 'yellow', { media: 'screen' });
+    // without narrowing to media -> screen
+    expect(el).not.toHaveCompiledCss('color', 'yellow');
+  });
+
+  it('should match styles with media and target', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          color: 'green',
+          '@media screen': {
+            color: 'yellow',
+            ':hover': {
+              background: 'red',
+            },
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('background-color', 'red', { media: 'screen', target: ':hover' });
+  });
+
+  it('should match styles with media nested inside class', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          '@media (min-width: 2px)': {
+            color: 'blue',
+            '@media (min-width: 1px)': {
+              color: 'red',
+            },
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'blue', { media: '(min-width: 2px)' });
+    expect(el).toHaveCompiledCss('color', 'red', { media: '(min-width: 1px)' });
+  });
+
+  it('should match complicated direct ancestors', () => {
+    const { getByText } = render(
+      <div
+        css={`
+          > :first-child {
+            color: red;
+          }
+        `}>
+        hello world
+      </div>
+    );
+
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'red', { target: '> :first-child' });
+  });
+});

package/src/__tests__/server-side-hydrate.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { hydrate } from 'react-dom';
+
 import { CC, CS } from '../runtime';
 
 jest.mock('../runtime/is-node', () => ({

package/src/__tests__/ssr.test.tsx

@@ -1,10 +1,10 @@
 /**
  * @jest-environment node
  */
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { styled } from '@compiled/react';
 import { CC as CompiledRoot } from '@compiled/react/runtime';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 describe('SSR', () => {
   it('should render styles inline', () => {

package/src/class-names/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
+import { ClassNames } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ClassNames } from '@compiled/react';
 
 describe('class names component', () => {
   it('should create css from object literal', () => {

package/src/class-names/__tests__/types.test.js.flow

@@ -0,0 +1,28 @@
+// @flow strict-local
+import React, { type Node } from 'react';
+import { ClassNames, type CssFunction } from '@compiled/react';
+
+// Object call expression
+({ children }: { children: Node }): React$Element<typeof ClassNames> => (
+  <ClassNames>{({ css }) => <span className={css({ fontSize: 12 })}>{children}</span>}</ClassNames>
+);
+
+// Tagged template expression
+({ children }: { children: Node }): React$Element<typeof ClassNames> => (
+  <ClassNames>
+    {({ css }) => (
+      <span
+        className={css`
+          font-size: 12px;
+        `}>
+        {children}
+      </span>
+    )}
+  </ClassNames>
+);
+
+// Array
+({ children }: { children: Node }): React$Element<typeof ClassNames> => {
+  const classes: CssFunction<>[] = [{ fontSize: 12 }, `font-size: 12px`];
+  return <ClassNames>{({ css }) => <span className={css(classes)}>{children}</span>}</ClassNames>;
+};

package/src/class-names/index.js.flow

@@ -0,0 +1,45 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+import type { Node } from 'react';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
+export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
+export interface ClassNamesProps {
+  children: (opts: {
+    css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
+    style: {
+      [key: string]: string,
+      ...
+    },
+    ...
+  }) => Node;
+}
+/**
+ * Use a component where styles are not necessarily tied to an element.
+ *
+ * ```
+ * // Object CSS
+ * <ClassNames>
+ *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
+ * </ClassNames>
+ *
+ * // Template literal CSS
+ * <ClassNames>
+ *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
+ * </ClassNames>
+ *
+ * // Array CSS
+ * <ClassNames>
+ *   {({ css, style }) =>
+ *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
+ * </ClassNames>
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-class-names
+ * @param props
+ */
+declare export function ClassNames(_: ClassNamesProps): React$Node;

package/src/class-names/index.tsx

@@ -1,6 +1,7 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
-import { CssFunction, BasicTemplateInterpolations } from '../types';
 
 export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 

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

@@ -0,0 +1,40 @@
+/** @jsxImportSource @compiled/react */
+import { css } from '@compiled/react';
+import { render } from '@testing-library/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.15.0
+ * @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;