@compiled/react 0.16.9 → 0.17.0

package/src/xcss-prop/__tests__/media-query-strict.test.tsx

@@ -0,0 +1,179 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cssMap as cssMapLoose } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+import { cssMap } from '../../create-strict-api/__tests__/__fixtures__/strict-api';
+import type { XCSSProp } from '../../create-strict-api/__tests__/__fixtures__/strict-api';
+import type { XCSSAllProperties, XCSSAllPseudos } from '../index';
+
+function CSSPropComponent({
+  testId,
+  xcss,
+}: {
+  testId?: string;
+  xcss: ReturnType<typeof XCSSProp<XCSSAllProperties, XCSSAllPseudos>>;
+}) {
+  return (
+    <div data-testid={testId} className={xcss}>
+      foo
+    </div>
+  );
+}
+
+const styles = cssMap({
+  invalidMediaObject: {
+    // @ts-expect-error — @media at rule object is not allowed in strict cssMap
+    '@media': {
+      screen: { color: 'red' },
+    },
+  },
+  invalidMediaQuery: {
+    // @ts-expect-error — this specific @media is not in our allowed types
+    '@media (min-width: 100px)': {
+      color: 'red',
+    },
+  },
+  valid: {
+    '@media (min-width: 110rem)': {
+      // @ts-expect-error — color should be a value from the strict schema
+      color: 'red',
+    },
+  },
+});
+
+const looseStyles = cssMapLoose({
+  invalidMediaObject: {
+    '@media': {
+      screen: { color: 'var(--ds-text)' },
+    },
+  },
+  invalidMediaQuery: {
+    '@media (min-width: 100px)': {
+      color: 'red',
+    },
+  },
+  validMediaQueryInvalidProperty: {
+    '@media (min-width: 110rem)': {
+      color: 'red',
+    },
+  },
+  valid: {
+    '@media (min-width: 110rem)': {
+      color: 'var(--ds-text)',
+    },
+  },
+});
+
+describe('xcss prop', () => {
+  it('should block all usage of loose media queries in strict api as it is unsafe', () => {
+    const { getByText } = render(
+      <CSSPropComponent
+        // @ts-expect-error — Block all media queries in strict xcss prop
+        xcss={looseStyles.valid}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'var(--ds-text)', {
+      media: '(min-width: 110rem)',
+    });
+  });
+
+  it('should type error invalid media queries from loose api', () => {
+    const { getByTestId } = render(
+      <>
+        <CSSPropComponent
+          // @ts-expect-error — Types of property '"@media"' are incompatible.
+          xcss={looseStyles.invalidMediaObject}
+        />
+        <CSSPropComponent testId="foobar" xcss={styles.invalidMediaObject} />
+      </>
+    );
+
+    expect(getByTestId('foobar')).toHaveCompiledCss('color', 'red', { media: 'screen' });
+  });
+
+  it('should allow valid media queries in inline xcss prop', () => {
+    const { getByText } = render(
+      <CSSPropComponent
+        xcss={{
+          '@media (min-width: 110rem)': {
+            color: 'var(--ds-text)',
+          },
+        }}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'var(--ds-text)', {
+      media: '(min-width: 110rem)',
+    });
+  });
+
+  it('should allow valid media queries in inline xcss prop', () => {
+    const { getByText } = render(
+      <CSSPropComponent
+        xcss={{
+          '@media (min-width: 110rem)': {
+            // @ts-expect-error — color should be a value from the strict schema
+            color: 'red',
+          },
+        }}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red', { media: '(min-width: 110rem)' });
+  });
+
+  it('should allow valid psuedo through inline xcss prop', () => {
+    const { getByText } = render(
+      <CSSPropComponent
+        xcss={{ '@media (min-width: 30rem)': { '&:hover': { color: 'var(--ds-text-hover)' } } }}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'var(--ds-text-hover)', {
+      media: '(min-width: 30rem)',
+      target: ':hover',
+    });
+  });
+
+  it('should type error for unexpected media query', () => {
+    const { getByTestId } = render(
+      <>
+        <CSSPropComponent
+          // NOTE: This doesn't currently error as the output isn't the generic value
+          // when the cssMap call has type supressions. While not ideal this is acceptable
+          // for now. Hopefully we can fix this in the future.
+          xcss={styles.invalidMediaQuery}
+        />
+        <CSSPropComponent
+          // @ts-expect-error — Passing loose media queries to XCSS prop is not supported.
+          xcss={looseStyles.invalidMediaQuery}
+        />
+        <CSSPropComponent
+          // @ts-expect-error — Passing loose media queries to XCSS prop is not supported.
+          xcss={looseStyles.validMediaQueryInvalidProperty}
+        />
+        <CSSPropComponent
+          testId="foobar"
+          xcss={{
+            // @ts-expect-error — Types of property '"@media"' are incompatible.
+            '@media (min-width: 100px)': {
+              color: 'var(--ds-text)',
+            },
+          }}
+        />
+      </>
+    );
+
+    expect(getByTestId('foobar')).toHaveCompiledCss('color', 'var(--ds-text)', {
+      media: '(min-width: 100px)',
+    });
+  });
+
+  it('should type check top level media query styles from cssMap', () => {
+    const { getByText } = render(<CSSPropComponent xcss={styles.valid} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red', { media: '(min-width: 110rem)' });
+  });
+});

package/src/xcss-prop/__tests__/media-query.test.tsx

@@ -0,0 +1,53 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cssMap } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+import type { XCSSProp, XCSSAllProperties, XCSSAllPseudos } from '../index';
+
+function CSSPropComponent({ xcss }: { xcss: XCSSProp<XCSSAllProperties, XCSSAllPseudos> }) {
+  return <div className={xcss}>foo</div>;
+}
+
+const styles = cssMap({
+  invalid: {
+    '@media': { screen: { color: 'red' } },
+  },
+  valid: { '@media screen': { color: 'red' } },
+});
+
+describe('xcss prop', () => {
+  it('should allow valid media queries in inline xcss prop', () => {
+    const { getByText } = render(<CSSPropComponent xcss={{ '@media screen': { color: 'red' } }} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red', { media: 'screen' });
+  });
+
+  it('should allow valid psuedo through inline xcss prop', () => {
+    const { getByText } = render(
+      <CSSPropComponent xcss={{ '@media screen': { '&:hover': { color: 'green' } } }} />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'green', {
+      media: 'screen',
+      target: ':hover',
+    });
+  });
+
+  it('should type error for disallowed nested media query object from cssMap', () => {
+    const { getByText } = render(
+      <CSSPropComponent
+        // @ts-expect-error — @media object is not allowed in xcss prop
+        xcss={styles.invalid}
+      />
+    );
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red', { media: 'screen' });
+  });
+
+  it('should type check top level media query styles from cssMap', () => {
+    const { getByText } = render(<CSSPropComponent xcss={styles.valid} />);
+
+    expect(getByText('foo')).toHaveCompiledCss('color', 'red', { media: 'screen' });
+  });
+});

package/src/xcss-prop/__tests__/xcss-prop.test.tsx

@@ -177,7 +177,7 @@ describe('xcss prop', () => {
     ).toBeObject();
   });
 
-  it('should type error when passing in at rules to xcss prop', () => {
+  it('should type error when passing in @media property to xcss prop', () => {
     function CSSPropComponent({ xcss }: { xcss: XCSSProp<'color', '&:hover'> }) {
       return <div className={xcss}>foo</div>;
     }
@@ -228,11 +228,7 @@ describe('xcss prop', () => {
     function CSSPropComponent({
       xcss,
     }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: 'color'; requiredPseudos: never }
-      >;
+      xcss: XCSSProp<'color' | 'backgroundColor', '&:hover', { requiredProperties: 'color' }>;
     }) {
       return <div className={xcss}>foo</div>;
     }
@@ -249,11 +245,7 @@ describe('xcss prop', () => {
     function CSSPropComponent({
       xcss,
     }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: 'color'; requiredPseudos: never }
-      >;
+      xcss: XCSSProp<'color' | 'backgroundColor', '&:hover', { requiredProperties: 'color' }>;
     }) {
       return <div className={xcss}>foo</div>;
     }
@@ -268,27 +260,4 @@ describe('xcss prop', () => {
       />
     ).toBeObject();
   });
-
-  it('should mark a xcss prop pseudo as required', () => {
-    function CSSPropComponent({
-      xcss,
-    }: {
-      xcss: XCSSProp<
-        'color' | 'backgroundColor',
-        '&:hover',
-        { requiredProperties: never; requiredPseudos: '&:hover' }
-      >;
-    }) {
-      return <div className={xcss}>foo</div>;
-    }
-
-    expectTypeOf(
-      <CSSPropComponent
-        // @ts-expect-error — Property '"&:hover"' is missing in type '{ color: string; }' but required in type '{ "&:hover": MarkAsRequired<XCSSItem<"backgroundColor" | "color">, never>; }'.
-        xcss={{
-          color: 'red',
-        }}
-      />
-    ).toBeObject();
-  });
 });

package/src/xcss-prop/index.ts

@@ -1,44 +1,58 @@
 import type * as CSS from 'csstype';
 
+import type { ApplySchemaValue } from '../create-strict-api/types';
 import { ac } from '../runtime';
-import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
+import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
 
 type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
-type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
-  [Q in keyof CSSProperties]: Q extends TStyleDecl
-    ?
-        | CompiledPropertyDeclarationReference
-        | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q])
+type XCSSValue<
+  TStyleDecl extends keyof CSSProperties,
+  TSchema,
+  TPseudoKey extends CSSPseudoClasses | ''
+> = {
+  [Q in keyof StrictCSSProperties]: Q extends TStyleDecl
+    ? ApplySchemaValue<TSchema, Q, TPseudoKey>
     : never;
 };
 
-type XCSSPseudos<
-  TAllowedProperties extends keyof CSSProperties,
+type XCSSPseudo<
+  TAllowedProperties extends keyof StrictCSSProperties,
   TAllowedPseudos extends CSSPseudos,
   TRequiredProperties extends { requiredProperties: TAllowedProperties },
   TSchema
 > = {
   [Q in CSSPseudos]?: Q extends TAllowedPseudos
     ? MarkAsRequired<
-        XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>,
+        XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>,
         TRequiredProperties['requiredProperties']
       >
     : never;
 };
 
+type XCSSMediaQuery<
+  TAllowedProperties extends keyof StrictCSSProperties,
+  TAllowedPseudos extends CSSPseudos,
+  TAllowedMediaQueries extends string,
+  TSchema
+> = {
+  [Q in `@media ${TAllowedMediaQueries}`]?:
+    | XCSSValue<TAllowedProperties, TSchema, ''>
+    | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;
+};
+
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
  * must declare them so the (lack-of a) excess property check doesn't bite us and allow
  * unexpected values through.
  */
-type BlockedRules = {
+type BlockedRules<TMode extends 'loose' | 'strict'> = {
+  // To ensure styles that aren't allowed through XCSS prop strict APIs we block any
+  // loose media queries from being passed through as we can't ensure they're correct.
+  '@media [loose]'?: TMode extends 'loose' ? any : never;
   selectors?: never;
 } & {
-  /**
-   * We currently block all at rules from xcss prop.
-   * This needs us to decide on what the final API is across Compiled to be able to set.
-   */
+  // We also block all type level at rule "objects" that are present on cssMap.
   [Q in CSS.AtRules]?: never;
 };
 
@@ -54,7 +68,7 @@ type CompiledPropertyDeclarationReference = {
 export type CompiledStyles<TObject> = {
   [Q in keyof TObject]: TObject[Q] extends Record<string, unknown>
     ? CompiledStyles<TObject[Q]>
-    : CompiledPropertyDeclarationReference;
+    : CompiledPropertyDeclarationReference & TObject[Q];
 };
 
 /**
@@ -111,7 +125,7 @@ export type XCSSAllPseudos = CSSPseudos;
  *   xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  *
  *   // The xcss prop is required as well as the color property. No pseudos are required.
- *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color', requiredPseudos: never }>;
+ *   xcss: XCSSProp<XCSSAllProperties, '&:hover', { requiredProperties: 'color' }>;
  * }
  *
  * function MyComponent({ xcss }: MyComponentProps) {
@@ -134,32 +148,37 @@ export type XCSSAllPseudos = CSSPseudos;
  * To concatenate and conditonally apply styles use the {@link cssMap} {@link cx} functions.
  */
 export type XCSSProp<
-  TAllowedProperties extends keyof CSSProperties,
+  TAllowedProperties extends keyof StrictCSSProperties,
   TAllowedPseudos extends CSSPseudos,
   TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
   } = never
-> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
+> = Internal$XCSSProp<
+  TAllowedProperties,
+  TAllowedPseudos,
+  string,
+  object,
+  TRequiredProperties,
+  'loose'
+>;
 
 export type Internal$XCSSProp<
-  TAllowedProperties extends keyof CSSProperties,
+  TAllowedProperties extends keyof StrictCSSProperties,
   TAllowedPseudos extends CSSPseudos,
+  TAllowedMediaQueries extends string,
   TSchema,
   TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-    requiredPseudos: TAllowedPseudos;
-  }
+  },
+  TMode extends 'loose' | 'strict'
 > =
   | (MarkAsRequired<
-      XCSSItem<TAllowedProperties, TSchema>,
+      XCSSValue<TAllowedProperties, TSchema, ''>,
       TRequiredProperties['requiredProperties']
     > &
-      MarkAsRequired<
-        XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>,
-        TRequiredProperties['requiredPseudos']
-      > &
-      BlockedRules)
+      XCSSPseudo<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema> &
+      XCSSMediaQuery<TAllowedProperties, TAllowedPseudos, TAllowedMediaQueries, TSchema> &
+      BlockedRules<TMode>)
   | false
   | null
   | undefined;