@compiled/react 0.9.1 → 0.10.0

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/index.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import type { Node } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
 export interface ClassNamesProps {
   children: (opts: {

package/src/class-names/index.tsx

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

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

@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import '@compiled/react';
+/** @jsxImportSource @compiled/react */
 import { css } from '@compiled/react';
+import { render } from '@testing-library/react';
 
 describe('css prop', () => {
   it('should create css from object literal', () => {

package/src/css/index.tsx

@@ -1,5 +1,7 @@
-import { createSetupError } from '../utils/error';
+/* eslint-disable import/export */
+
 import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import { createSetupError } from '../utils/error';
 
 /**
  * Create styles that can be re-used between components with a template literal.

package/src/index.js.flow

@@ -1,40 +1,15 @@
 /**
- * Flowtype definitions for index
+ * THIS IS A MANUALLY CURATED FLOW FILE.
+ *
+ * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.15.0
  * @flow
  */
-import type { CssFunction, CSSProps } from './types';
+import type { CSSProps, CssFunction } 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,37 +1,29 @@
+import { createElement } from 'react';
+
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
 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';
+
+// Pass through the (classic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export const jsx = createElement;
+
 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.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface DOMAttributes<T> {
-    css?: CssFunction | CssFunction[];
-  }
-}
-
-declare global {
-  namespace JSX {
-    interface 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[];
-    }
+export namespace jsx {
+  export namespace JSX {
+    export type Element = CompiledJSX.Element;
+    export type ElementClass = CompiledJSX.ElementClass;
+    export type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
+    export type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;
+    export type LibraryManagedAttributes<C, P> = CompiledJSX.LibraryManagedAttributes<C, P>;
+    export type IntrinsicAttributes = CompiledJSX.IntrinsicAttributes;
+    export type IntrinsicClassAttributes<T> = CompiledJSX.IntrinsicClassAttributes<T>;
+    export type IntrinsicElements = CompiledJSX.IntrinsicElements;
   }
 }

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

@@ -1,5 +1,4 @@
-import '@compiled/react';
-import React from 'react';
+/** @jsxImportSource @compiled/react */
 import { render } from '@testing-library/react';
 
 describe('css prop', () => {

package/src/jsx/__tests__/jsx-import-source-pragma.test.tsx

@@ -0,0 +1,37 @@
+/** @jsxImportSource @compiled/react */
+import { render } from '@testing-library/react';
+
+describe('local jsx namespace', () => {
+  it('should create css from object literal', () => {
+    const { getByText } = render(<div css={{ fontSize: '15px' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should allow css prop when class name is a declared prop', () => {
+    function Component({ className, children }: { className?: string; children: string }) {
+      return <div className={className}>{children}</div>;
+    }
+
+    const { getByText } = render(<Component css={{ fontSize: '15px' }}>hello world</Component>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should type error css prop when class name is not a declared prop', () => {
+    function Component({ children }: { children: string }) {
+      return <div>{children}</div>;
+    }
+
+    const { getByText } = render(
+      <Component
+        // CSS prop is not allowed when class name is not a declared prop
+        // @ts-expect-error
+        css={{ fontSize: '15px' }}>
+        hello world
+      </Component>
+    );
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('font-size', '15px');
+  });
+});

package/src/jsx/__tests__/jsx-pragma.test.tsx

@@ -0,0 +1,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+describe('local jsx namespace', () => {
+  it('should create css from object literal', () => {
+    const { getByText } = render(<div css={{ fontSize: '15px' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should allow css prop when class name is a declared prop', () => {
+    function Component({ className, children }: { className?: string; children: string }) {
+      return <div className={className}>{children}</div>;
+    }
+
+    const { getByText } = render(<Component css={{ fontSize: '15px' }}>hello world</Component>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should type error css prop when class name is not a declared prop', () => {
+    function Component({ children }: { children: string }) {
+      return <div>{children}</div>;
+    }
+
+    const { getByText } = render(
+      <Component
+        // CSS prop is not allowed when class name is not a declared prop
+        // @ts-expect-error
+        css={{ fontSize: '15px' }}>
+        hello world
+      </Component>
+    );
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('font-size', '15px');
+  });
+});

package/src/jsx/jsx-dev-runtime.tsx

@@ -0,0 +1,5 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+
+// Pass through the (automatic) jsx dev runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export * from 'react/jsx-dev-runtime';

package/src/jsx/jsx-local-namespace.tsx

@@ -0,0 +1,49 @@
+import type { CssFunction } from '../types';
+
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
+  ? string extends TProps['className' & keyof TProps]
+    ? {
+        /**
+         * Tie styles to an element.
+         *
+         * ```
+         * 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[];
+      }
+    : // eslint-disable-next-line @typescript-eslint/ban-types
+      {}
+  : // eslint-disable-next-line @typescript-eslint/ban-types
+    {};
+
+// Unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+
+export namespace CompiledJSX {
+  export type Element = ReactJSXElement;
+  export type ElementClass = ReactJSXElementClass;
+  export type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+  export type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+  export type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>;
+  export type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+  export type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: CssFunction | CssFunction[];
+    };
+  };
+}

package/src/jsx/jsx-runtime.tsx

@@ -0,0 +1,5 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+
+// Pass through the (automatic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export * from 'react/jsx-runtime';

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

@@ -1,7 +1,8 @@
+/** @jsxImportSource @compiled/react */
 import { keyframes, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
-import defaultFadeOut, { fadeOut as shadowedFadeOut, namedFadeOut } from '../__fixtures__';
+import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__fixtures__';
 
 const getOpacity = (str: string | number) => str;
 

package/src/runtime/__perf__/ax.test.ts

@@ -0,0 +1,42 @@
+import { runBenchmark } from '@compiled/benchmark';
+
+import { ax } from '../index';
+
+describe('ax benchmark', () => {
+  it('completes with ax() string as the fastest', async () => {
+    const arr = [
+      '_19itglyw',
+      '_2rko1l7b',
+      '_ca0qftgi',
+      '_u5f319bv',
+      '_n3tdftgi',
+      '_19bv19bv',
+      '_bfhk1mzw',
+      '_syazu67f',
+      '_k48p1nn1',
+      '_ect41kw7',
+      '_1wybdlk8',
+      '_irr3mlcl',
+      '_1di6vctu',
+      undefined,
+    ];
+
+    // Remove undefined and join the strings
+    const str = arr.slice(0, -1).join(' ');
+
+    const benchmark = await runBenchmark('ax', [
+      {
+        name: 'ax() array',
+        fn: () => ax(arr),
+      },
+      {
+        name: 'ax() string',
+        fn: () => ax([str, undefined]),
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: ['ax() string'],
+    });
+  }, 30000);
+});