@compiled/react 0.16.8 → 0.16.9

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/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/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.9",
   "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/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;