@compiled/react 0.16.8 → 0.16.10

package/dist/browser/css/index.d.ts

@@ -28,4 +28,4 @@ import type { CSSProps, CssObject, CssFunction } from '../types';
  * ```
  */
 export default function css<TProps = unknown>(styles: TemplateStringsArray, ...interpolations: CssFunction<TProps>[]): CSSProps<TProps>;
-export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
+export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[] | CSSProps<T> | CSSProps<T>[]): CSSProps<T>;

package/dist/browser/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/jsx/jsx-local-namespace.d.ts

@@ -41,6 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
+type ReactJSXElementType = string | React.JSXElementConstructor<any>;
 type ReactJSXElement = JSX.Element;
 type ReactJSXElementClass = JSX.ElementClass;
 type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
@@ -50,6 +51,7 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
+    type ElementType = ReactJSXElementType;
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;
     type ElementAttributesProperty = ReactJSXElementAttributesProperty;

package/dist/cjs/css/index.d.ts

@@ -28,4 +28,4 @@ import type { CSSProps, CssObject, CssFunction } from '../types';
  * ```
  */
 export default function css<TProps = unknown>(styles: TemplateStringsArray, ...interpolations: CssFunction<TProps>[]): CSSProps<TProps>;
-export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
+export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[] | CSSProps<T> | CSSProps<T>[]): CSSProps<T>;

package/dist/cjs/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,0CAAkD;AAqClD,SAAwB,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":";AAAA,kCAAkC;;AAGlC,0CAAkD;AAuClD,SAAwB,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

package/dist/cjs/jsx/jsx-local-namespace.d.ts

@@ -41,6 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
+type ReactJSXElementType = string | React.JSXElementConstructor<any>;
 type ReactJSXElement = JSX.Element;
 type ReactJSXElementClass = JSX.ElementClass;
 type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
@@ -50,6 +51,7 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
+    type ElementType = ReactJSXElementType;
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;
     type ElementAttributesProperty = ReactJSXElementAttributesProperty;

package/dist/esm/css/index.d.ts

@@ -28,4 +28,4 @@ import type { CSSProps, CssObject, CssFunction } from '../types';
  * ```
  */
 export default function css<TProps = unknown>(styles: TemplateStringsArray, ...interpolations: CssFunction<TProps>[]): CSSProps<TProps>;
-export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
+export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[] | CSSProps<T> | CSSProps<T>[]): CSSProps<T>;

package/dist/esm/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D,EAC7D,GAAG,eAA8B;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/jsx/jsx-local-namespace.d.ts

@@ -41,6 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
+type ReactJSXElementType = string | React.JSXElementConstructor<any>;
 type ReactJSXElement = JSX.Element;
 type ReactJSXElementClass = JSX.ElementClass;
 type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
@@ -50,6 +51,7 @@ type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
 type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
+    type ElementType = ReactJSXElementType;
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;
     type ElementAttributesProperty = ReactJSXElementAttributesProperty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.16.8",
+  "version": "0.16.10",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/create-strict-api/__tests__/mixed.test.tsx

@@ -0,0 +1,23 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from '@compiled/react';
+import { css as strictCSS } from '@fixture/strict-api-test';
+import { render } from '@testing-library/react';
+
+describe('strict api used with top level api', () => {
+  it('should mix styles together deterministically', () => {
+    const styles = strictCSS({
+      color: 'var(--ds-text)',
+    });
+    const otherStyles = css({
+      backgroundColor: 'red',
+      color: 'blue',
+    });
+
+    const { getByTestId } = render(<div css={[styles, otherStyles]} data-testid="div" />);
+
+    expect(getByTestId('div')).not.toHaveCompiledCss('color', 'var(--ds-text)');
+    expect(getByTestId('div')).toHaveCompiledCss('color', 'blue');
+    expect(getByTestId('div')).toHaveCompiledCss('backgroundColor', 'red');
+  });
+});

package/src/css/index.ts

@@ -36,7 +36,9 @@ export default function css<TProps = unknown>(
   ...interpolations: CssFunction<TProps>[]
 ): CSSProps<TProps>;
 
-export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
+export default function css<T = unknown>(
+  styles: CssObject<T> | CssObject<T>[] | CSSProps<T> | CSSProps<T>[]
+): CSSProps<T>;
 
 export default function css<T = unknown>(
   _styles: TemplateStringsArray | CssObject<T> | CssObject<T>[],

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

@@ -49,6 +49,9 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
     {};
 
 // Unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+// Based on the code from @types/react@18.2.8 / @emotion-js
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+type ReactJSXElementType = string | React.JSXElementConstructor<any>;
 type ReactJSXElement = JSX.Element;
 type ReactJSXElementClass = JSX.ElementClass;
 type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
@@ -59,6 +62,7 @@ type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
 type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 
 export namespace CompiledJSX {
+  export type ElementType = ReactJSXElementType;
   export type Element = ReactJSXElement;
   export type ElementClass = ReactJSXElementClass;
   export type ElementAttributesProperty = ReactJSXElementAttributesProperty;