@compiled/react 0.16.7 → 0.16.9

package/dist/browser/create-strict-api/index.d.ts

@@ -3,8 +3,8 @@ import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
 type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
 };
-type EnforceSchema<TObject> = {
-    [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
+type EnforceSchema<TSchema> = {
+    [P in keyof TSchema]?: P extends keyof CompiledSchema ? TSchema[P] extends Record<string, any> ? EnforceSchema<TSchema[P]> : TSchema[P] : never;
 };
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;

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/create-strict-api/index.d.ts

@@ -3,8 +3,8 @@ import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
 type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
 };
-type EnforceSchema<TObject> = {
-    [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
+type EnforceSchema<TSchema> = {
+    [P in keyof TSchema]?: P extends keyof CompiledSchema ? TSchema[P] extends Record<string, any> ? EnforceSchema<TSchema[P]> : TSchema[P] : never;
 };
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;

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/create-strict-api/index.d.ts

@@ -3,8 +3,8 @@ import { type CompiledStyles, cx, type Internal$XCSSProp } from '../xcss-prop';
 type PseudosDeclarations = {
     [Q in CSSPseudos]?: StrictCSSProperties;
 };
-type EnforceSchema<TObject> = {
-    [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
+type EnforceSchema<TSchema> = {
+    [P in keyof TSchema]?: P extends keyof CompiledSchema ? TSchema[P] extends Record<string, any> ? EnforceSchema<TSchema[P]> : TSchema[P] : never;
 };
 type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
 type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;

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.7",
+  "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__/generics.test.tsx

@@ -5,6 +5,58 @@ import type { XCSSProp } from './__fixtures__/strict-api-recursive';
 import { css, cssMap } from './__fixtures__/strict-api-recursive';
 
 describe('createStrictAPI()', () => {
+  it('should mark all styles as optional in css()', () => {
+    const styles = css({
+      '&:hover': {},
+      '&:active': {},
+      '&::before': {},
+      '&::after': {},
+    });
+
+    const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
+  it('should mark all styles as optional in cssMap()', () => {
+    const styles = cssMap({
+      nested: {
+        '&:hover': {},
+        '&:active': {},
+        '&::before': {},
+        '&::after': {},
+      },
+    });
+
+    const { getByTestId } = render(<div css={styles.nested} data-testid="div" />);
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
+  it('should mark all styles as optional in xcss prop', () => {
+    function Component({
+      xcss,
+    }: {
+      xcss: ReturnType<
+        typeof XCSSProp<
+          'backgroundColor' | 'color',
+          '&:hover' | '&:active' | '&::before' | '&::after'
+        >
+      >;
+    }) {
+      return <div data-testid="div" className={xcss} />;
+    }
+
+    const { getByTestId } = render(
+      <Component
+        xcss={{ '&:hover': {}, '&:active': {}, '&::before': {}, '&::after': {} }}
+        data-testid="div"
+      />
+    );
+
+    expect(getByTestId('div')).toBeDefined();
+  });
+
   describe('type violations', () => {
     it('should violate types for css()', () => {
       const styles = css({

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/create-strict-api/index.ts

@@ -6,11 +6,11 @@ type PseudosDeclarations = {
   [Q in CSSPseudos]?: StrictCSSProperties;
 };
 
-type EnforceSchema<TObject> = {
-  [P in keyof TObject]?: P extends keyof CompiledSchema
-    ? TObject[P] extends Record<string, unknown>
-      ? EnforceSchema<TObject[P]>
-      : TObject[P]
+type EnforceSchema<TSchema> = {
+  [P in keyof TSchema]?: P extends keyof CompiledSchema
+    ? TSchema[P] extends Record<string, any>
+      ? EnforceSchema<TSchema[P]>
+      : TSchema[P]
     : never;
 };
 

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;