@compiled/react 0.16.10 → 0.17.1

package/src/css-map/index.ts

@@ -83,6 +83,21 @@ type ExtendedSelectors = {
   selectors?: ExtendedSelector;
 };
 
+type LooseMediaQueries = Record<`@media ${string}`, CSSProperties & AllPseudos>;
+
+/**
+ * We remap media query keys to `"@media"` so it's blocked inside the strict APIs.
+ * This is done as it's currently impossible to ensure type safety end-to-end — when
+ * passing in unknown media queries from the loose API into the strict API you end up
+ * being also able to pass any styles you want, which makes the whole point of the strict
+ * API meaningless.
+ *
+ * Sorry folks!
+ */
+type RemapMedia<TStyles> = {
+  [Q in keyof TStyles as Q extends `@media ${string}` ? '@media [loose]' : Q]: TStyles[Q];
+};
+
 /**
  * ## CSS Map
  *
@@ -100,11 +115,14 @@ type ExtendedSelectors = {
  * ```
  */
 export default function cssMap<
-  TStyles extends Record<string, CSSProperties & WhitelistedSelector & ExtendedSelectors>
+  TStyles extends Record<
+    string,
+    CSSProperties & WhitelistedSelector & ExtendedSelectors & LooseMediaQueries
+  >
 >(
   _styles: TStyles
 ): {
-  readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+  readonly [P in keyof TStyles]: CompiledStyles<RemapMedia<TStyles[P]>>;
 } {
   throw createSetupError();
 }

package/src/index.ts

@@ -4,10 +4,17 @@ import type { CompiledJSX } from './jsx/jsx-local-namespace';
 
 export { ClassNames } from './class-names';
 export { createStrictAPI } from './create-strict-api';
+export type {
+  PseudosDeclarations,
+  MediaQueries,
+  AllowedStyles,
+  ApplySchema,
+  ApplySchemaMap,
+} from './create-strict-api/types';
 export { default as css } from './css';
 export { default as cssMap } from './css-map';
 export { keyframes } from './keyframes';
-export { styled } from './styled';
+export { styled, StyledProps } from './styled';
 export type {
   CSSProperties,
   CSSProps,
@@ -16,7 +23,14 @@ export type {
   CssType,
   StrictCSSProperties,
 } from './types';
-export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
+export {
+  type XCSSAllProperties,
+  type XCSSAllPseudos,
+  type XCSSProp,
+  type CompiledStyles,
+  type Internal$XCSSProp,
+  cx,
+} from './xcss-prop';
 
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.

package/src/types.ts

@@ -35,14 +35,7 @@ export type CssFunction<TProps = unknown> =
   | boolean // Something like `false && styles`
   | undefined; // Something like `undefined && styles`
 
-/*
- * This list of pseudo-classes and pseudo-elements are from csstype
- * but with & added to the front. Compiled supports both &-ful
- * and &-less forms and both will target the current element
- * (`&:hover` <==> `:hover`), however we force the use of the
- * &-ful form for consistency with the nested spec for new APIs.
- */
-export type CSSPseudos =
+export type CSSPseudoElements =
   | '&::after'
   | '&::backdrop'
   | '&::before'
@@ -56,7 +49,9 @@ export type CSSPseudos =
   | '&::selection'
   | '&::spelling-error'
   | '&::target-text'
-  | '&::view-transition'
+  | '&::view-transition';
+
+export type CSSPseudoClasses =
   | '&:active'
   | '&:autofill'
   | '&:blank'
@@ -94,13 +89,22 @@ export type CSSPseudos =
   | '&:valid'
   | '&:visited';
 
+/*
+ * This list of pseudo-classes and pseudo-elements are from csstype
+ * but with & added to the front. Compiled supports both &-ful
+ * and &-less forms and both will target the current element
+ * (`&:hover` <==> `:hover`), however we force the use of the
+ * &-ful form for consistency with the nested spec for new APIs.
+ */
+export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<string | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
 
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes

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;