Block invalid properties on the strict API cssMap when extended type was met. (#1582)

* Block invalid properties on `cssMap` when extended type was met.

Previously, `asdf` in this example would never error because part of the interface existed, so this was "extended", eg. `{ color: …, asdf: … }` extends `{ color: … }` was true.

So instead of using the inferred generic `TStyles extends …` to enforce, we enforce the type explicitly, and use the inferred generic `TStyles` to build our output type.  This maintains the proper output type while blocking the input type.

More easily visualized in the playground:

 - Before: [TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnAVHAhgZzgYQGVC4AzKCEOAcgGMcclVqBuAKDZQA9JYFk0RQgAUcKAK4ATCHgC8bOHAA+NAGQAudVlIwUUaguVrNAIyy0A1pIpgDildQ3qTKUtBR2jjzbXEfDDk6+KAC0UCgA5sAQAHaegZqkwFCMIQA2KDC6+gHG6kkpMOnAMf72eRFQWCAgWFAhehQ55d7qtVAWevF5YGnmKAAWEGmSXbmtYhm0MNFx4044qGlpJRENUE3drTB1EZkhulwwW04AbsAoAO4HVTE4wDOxJ1rTwKdlXhpY4jAQScvPEx9GIWZ60AYoSwoSTPUakb5pY7zdRwkrQ2HAHBYIHo5EocBIZ4oGLYjIw5EFRjPNy+HDUiC0kLne44+mMy4PAYlaniZY4WjhYnPIbvZqfdQlMJYGJ7Z4lUbZEAlLC6OUxU5YFbkloaDI6Z4rEEGhma4pG5EQMCPElpZ4QH4hP5SmUfBJgb5ibXisDAabicIhSU+v3hZ69fpDEZ6EI4IaXOY69ThxCrZ7hLCSR0xNKINMoDMhS5QB6u4zhACO4mSuMTxYiAyRiZ2UD2jfF4jE9RKGq1zw70Z7wC9CUHw+MzJLMPYHG4vHgTEExGENj0MxQcjgACV89Js4gADxCAB0y8tq4uOH3jGLMqMMXEIBcUAAfM-pwuCJQfWTCOD8Vg4FkOBCBgYtpiEU9UFgC84FUOBRAkaQcAAEUhPoqmtHBp1naB5wEYDQN9GAIJXaD10Arcd1iHND2II8QOlSQ6kkSDz3IuDj0IU4IlYsicDfDgPwQqQZFQ2h0JVWYNwAb0MABtABFOASgIJcxBEnAAF0AH51AIsDiKXUi1ywtgAF933wgBRGI3CgWgUF-CFan3AAVAB5EwACtIRgZ8KNkxQ5OEZSYjgTpED+OAPO83ydL0kLuF0GJJDwCKovwL9gB-P9akMRRtOizyfOmYLNLgJLiVSyjaGgSQr0ImUABo4HEEEYggeNn3yxQ4EKmy7Icpz-zc4rfLK7ret6vSYpKmAyp6vTSlFdgLME-DMvAbLoV4pAxIk61t1IPRiQcgL5OoAB9S78HcgBZYQAEkABkrOQy7hE3dzhCszdXIATUu5CrPwZ6AEFNzB1zHvcgA5S7NysgAxX6rNh-ArKB9zLth9zXMugB1TdHtczHkMexH8Fc57Acu6hNL00C-FW7CeFw-hUE-LafyQDJL1m3z-KAwK4EU0LwpQSLSCK2LpgZmW5sU8rKpSvBt1qqB6uvVYWraiwOq6nrCs279oRAxA+dG2X5oUzTJumrnTZY4zEH2upJNiI6TpiByWY4Wq7ngAV810Ci3OG2oKqOKq8BN7bJAjrBnwACgASkA-yRcUUg2teWI4HoHA7qwMA4H3Hqptc82+aj5LqvVuqGpvCIWpAgySLPPjYPg9SkLdjCpO7gboCG3KsHDsfXx6lOK96xgLfXGbq-XHrU70rOprgdNdxzUWQpU9Lpar3n13luOeYX-nl5wCb2Cmsy4A3qaAHpn7gAABGAcAaHhfPWJo4AhBCHAS4AwVQoFFLPRQ4QYD+jCvPPmd9epmQ4FNGBcDH4FwYMXUuKCUH+1iIwTBhccFwAfkBYO4D9wb1qmkaAelqAaigMnIBqUDhJVTtQJqPVvAii6OvAuwx6E0CYSwkIbDDhFD4VAThZDzIp1TtOAORCEEoFIRQ7BJdk4bw6qUdeUDBF0KgAw0RrDv6SM4dwzevVeEQFFNQARtDhGMLqGIiRSUQjSNkWZKx1jjAdRgMnfIyRUjgmypIdQASgmUiKGEkYqdOGOKEcYmg4QYRkN8dYxwcB-ImB+L8OISSjEMKBH4agcj77mVTkAA)
 - After: [TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnAVHAhgZzgYQGVC4AzKCEOAcgGMcclVqBuAKDZQA9JYFk0RQgAUcKAK4ATCHgC8bOHAA+NAGQAudVlIwUUaguVrNAIyy0A1pIpgDildQ3qTKUtBR2jjzbXEfDDk6+KAC0UCgA5sAQAHaegZqkwFCMIQA2KDC6+gHG6kkpMOnAMf72eRFQWCAgWFAhehQ55d7qtVAWevF5YGnmKAAWEGmSXbmtYhm0MNFx4044qGlpJRENUE3drTB1EZkhulwwW04AbsAoAO4HVTE4wDOxJ1rTwKdlXhpY4jAQScvPEx9GIWZ60AYoSwoSTPUakb5pY7zdRwkrQ2HAHBYIHo5EocBIZ4oGLYjIw5EFRjPNy+HDUiC0kLne44+mMy4PAYlaniZY4WjhYnPIbvZqfdQlMJYGJ7Z4lUbZEAlLC6OUxU5YFbkloaDI6Z4rEEGhma4pG5EQMCPElpZ4QH4hP5SmUfBJgb5ibXisDAabicIhSU+v3hZ69fpDEZ6EI4IaXOY69ThxCrZ7hLCSR0xNKINMoDMhS5QB6u4zhACO4mSuMTxYiAyRiZ2UD2jfF4jE9RKGq1zw70Z7wC9CUHw+MzJLMPYHG4vHgTEExGENj0MxQcjgACV89Js4gADxCAB0y8tq4uOH3jGLMqMMXEIBcUAAfM-pwuCJQfWTCOD8Vg4FkOBCBgYtpiEU9UFgC84FUOBRAkaQcAAEUhPoqmtHBp1naB5wEYDQN9GAIJXaD10Arcd1iHND2II8QOlSQ6kkSDz3IuDj0IU4IlYsicDfDgPwQqQZFQ2h0JVWYNwAb0MABtABFOASgIJcxBEnAAF0AH51AIsDiKXUi1ywtgAF933wgBRGI3CgWgUF-CFan3AAVAB5EwACtIRgZ8KNkxQ5OEZSYjgTpED+OAPO83ydL0kLuF0GJJDwCKovwL9gB-P9akMRRtOizyfOmYLNLgJLiVSyjaGgSQr0ImUABo4HEEEYggeNn3yxQ4EKmy7Icpz-zc4rfLK7ret6vSYpKmAyp6vTSlFdgLME-DMvAbLoV4pAxIk61t1IPRiQcgL5OoAB9S78HcgBZYQAEkABkrOQy7hE3dzhCszdXIATUu5CrPwZ6AEFNzB1zHvcgA5S7NysgAxX6rNh-ArKB9zLth9zXMugB1TdHtczHkMexH8Fc57Acu6hNL00C-FW7CeFw-hUE-LafyQDJL1m3z-KAwK4EU0LwpQSLSCK2LpgZmW5sU8rKpSvBt1qqB6uvVYWraiwOq6nrCs279oRAxA+dG2X5oUzTJumrnTZY4zEH2upJNiI6TpiByWY4Wq7ngAV810Ci3OG2oKqOKq8BN7bJAjrBnwACgASkA-yRcUUg2teWI4HoHA7qwMA4H3Hqptc82+aj5LqvVuqGpvCIWpAgySLPPjYPg9SkLdjCpO7gboCG3KsHDsfXx6lOK96xgLfXPSG81pudf0oiO6gkzu+Evu0PdzCh9skfHLHw8spy5yk-txRU70rOprgdNdxzUWQpU9Lpar3n13luOeYXvzau64JrsCmmZOAD8poAHpoFwAAAIwBwA0Hgvl1hNDgCEEIcBLgDBVCgUUs9FDhBgP6MK88+ZgN6mZDgU0SFkMgQXBgxdS40Jof7WIjBGGFxYXACBQFg74P3A-WqaRoB6WoBqKAycsGpQOElVO1Amo9W8CKLo98C7DHETQKRMiQhyMOEUNRUBFF8PMinVO04A5cIoSgXhAjmEl2Tg-DqpR75EM0WIqAEjdGyOQYYxRyjH69VURAUU1ANGiO0ZIuoeiDFJRCMY0xZkgnBOMB1GAyd8jJFSOCbKkh1AZKyZSIoeSRip0UZErR3iaDhBhHw1JwTHBwH8iYH4vw4hVK8RIoEfhqBmPAeZVOQA)

* Fix strictly scoped test and extend to the `css()` call as well.

 - The `expect(getByTestId('div')).toHaveCompiledCss('bkgrnd', 'red');` was wrong.
 - Adds this to `css()` calls to ensure we don't regress in the future.

* Minimize repetition of `TSchema` styles and update generic on `cssMap` to be distinct.

* Split our "invalid css property" test into multiple call sites to test different variants.

---------

Co-authored-by: Jake Lane <jlane2@atlassian.com>

Author: kylorhall-atlassian

.changeset/rich-toys-care.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Block invalid properties on our `cssMap` input objects to avoid invalid css and other mistakes.

packages/react/src/create-strict-api/__tests__/index.test.tsx

@@ -86,6 +86,56 @@ describe('createStrictAPI()', () => {
 
       expect(getByTestId('div')).toHaveCompiledCss('all', 'inherit');
     });
+
+    it('should type error with css properties not in the style scope', () => {
+      // NOTE: These are split into mutliple `css()` calls to ensure the type errors are not hidden
+      // as only one will error at a time when combined into one query
+
+      const bgStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - Object literal may only specify known properties, and 'bg' does not exist in type …
+        bg: 'red',
+      });
+
+      const colourStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+        colour: 'var(--ds-text)',
+      });
+
+      const hoverStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        '&:hover': {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+          colour: 'var(--ds-text-hover)',
+        },
+      });
+
+      const invalidPsuedoStyles = css({
+        fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+        // @ts-expect-error - bject literal may only specify known properties, and ''&:invalid-pseudo'' does not exist in type …
+        '&:invalid-pseudo': {
+          color: 'var(--ds-text)',
+        },
+      });
+
+      const { getByTestId } = render(
+        <div css={[bgStyles, colourStyles, hoverStyles, invalidPsuedoStyles]} data-testid="div" />
+      );
+
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold');
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold', {
+        target: ':hover',
+      });
+
+      // These still get compiled to css, even if they're not valid
+      expect(getByTestId('div')).toHaveCompiledCss('bg', 'red');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text)');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text-hover)', {
+        target: ':hover',
+      });
+    });
   });
 
   describe('cssMap()', () => {
@@ -152,6 +202,72 @@ describe('createStrictAPI()', () => {
 
       expect(getByTestId('div')).toHaveCompiledCss('val', 'ok', { target: ':hover' });
     });
+
+    it('should type error with css properties not in the style scope', () => {
+      // NOTE: These are split into mutliple `css()` calls to ensure the type errors are not hidden
+      // as only one will error at a time when combined into one query
+
+      const bgStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'bg' does not exist in type …
+          bg: 'red',
+        },
+      });
+
+      const colourStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+          colour: 'var(--ds-text)',
+        },
+      });
+
+      const hoverStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          '&:hover': {
+            fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+            // @ts-expect-error - Object literal may only specify known properties, and 'colour' does not exist in type …
+            colour: 'var(--ds-text-hover)',
+          },
+        },
+      });
+
+      const invalidPsuedoStyles = cssMap({
+        primary: {
+          fontWeight: 'bold', // just a valid property to ensure the `extends` keyword isn't working as intended
+          // @ts-expect-error - bject literal may only specify known properties, and ''&:invalid-pseudo'' does not exist in type …
+          '&:invalid-pseudo': {
+            color: 'var(--ds-text)',
+          },
+        },
+      });
+
+      const { getByTestId } = render(
+        <div
+          css={[
+            bgStyles.primary,
+            colourStyles.primary,
+            hoverStyles.primary,
+            invalidPsuedoStyles.primary,
+          ]}
+          data-testid="div"
+        />
+      );
+
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold');
+      expect(getByTestId('div')).toHaveCompiledCss('font-weight', 'bold', {
+        target: ':hover',
+      });
+
+      // These still get compiled to css, even if they're not valid
+      expect(getByTestId('div')).toHaveCompiledCss('bg', 'red');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text)');
+      expect(getByTestId('div')).toHaveCompiledCss('colour', 'var(--ds-text-hover)', {
+        target: ':hover',
+      });
+    });
   });
 
   describe('XCSSProp', () => {

packages/react/src/create-strict-api/index.ts

@@ -18,7 +18,12 @@ type PickObjects<TObject> = {
   [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
 };
 
-interface CompiledAPI<TSchema> {
+type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties &
+  PseudosDeclarations &
+  EnforceSchema<TSchema>;
+type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
+
+interface CompiledAPI<TSchema extends CompiledSchema> {
   /**
    * ## CSS
    *
@@ -34,9 +39,7 @@ interface CompiledAPI<TSchema> {
    * <div css={redText} />
    * ```
    */
-  css(
-    styles: StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>
-  ): StrictCSSProperties;
+  css(styles: CSSStyles<TSchema>): StrictCSSProperties;
   /**
    * ## CSS Map
    *
@@ -53,15 +56,12 @@ interface CompiledAPI<TSchema> {
    * <div css={styles.solid} />
    * ```
    */
-  cssMap<
-    TStyles extends Record<
-      string,
-      StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>
-    >
-  >(
-    styles: TStyles
+  cssMap<TStylesMap extends CSSMapStyles<TSchema>>(
+    // NOTE: This should match the generic `TStylesMap extends …` as we want this arg to strictly satisfy this type, not just extend it.
+    // The "extends" functionality is to infer and build the return type, this is to enforce the input type.
+    styles: CSSMapStyles<TSchema>
   ): {
-    readonly [P in keyof TStyles]: CompiledStyles<TStyles[P]>;
+    readonly [P in keyof TStylesMap]: CompiledStyles<TStylesMap[P]>;
   };
   /**
    * ## CX