@compiled/react 0.16.2 → 0.16.4

package/dist/esm/types.d.ts

@@ -20,9 +20,14 @@ export type CssObject<TProps> = Readonly<{
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
 /**
- * The xcss prop must be given all known available properties even
- * if it takes a subset of them. This is ensure the (lack-of an)
+ * 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>>;
+/**
+ * A stricter subset of the {@link CSSProperties} type that excludes
+ * vendor and obsolete properties.
+ */
+export type StrictCSSProperties = Readonly<CSS.StandardProperties & CSS.SvgProperties>;

package/dist/esm/utils/error.d.ts

@@ -1 +1,2 @@
 export declare const createSetupError: () => Error;
+export declare const createStrictSetupError: () => Error;

package/dist/esm/utils/error.js

@@ -17,4 +17,23 @@ export const createSetupError = () => {
   Good luck!
 `);
 };
+export const createStrictSetupError = () => {
+    return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. To resolve make sure to:
+
+  1. Set up Compiled.
+  2. Configure importSources in your Compiled config to point to the module that exports the output of createStrictAPI().
+
+  For more information visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+`);
+};
 //# sourceMappingURL=error.js.map

package/dist/esm/utils/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAU,EAAE;IAChD,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}

package/dist/esm/xcss-prop/index.d.ts

@@ -1,12 +1,15 @@
 import type * as CSS from 'csstype';
 import type { CSSPseudos, CSSProperties } from '../types';
-type XCSSItem<TStyleDecl extends keyof CSSProperties> = {
-    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | string | number : never;
+type MarkAsRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
+    [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
 };
 type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
-}> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> : never;
+}, TCompiledTypedPseudo> = {
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
 };
 /**
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -47,7 +50,7 @@ export type XCSSAllProperties = keyof CSSProperties;
  */
 export type XCSSAllPseudos = CSSPseudos;
 /**
- * ## xcss prop
+ * ## XCSSProp
  *
  * Declare styles your component takes with all other styles marked as violations
  * by the TypeScript compiler. There are two primary use cases for xcss prop:
@@ -106,12 +109,13 @@ export type XCSSAllPseudos = CSSPseudos;
 export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
     requiredPseudos: TAllowedPseudos;
-} = never> = (MarkAsRequired<XCSSItem<TAllowedProperties>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
-type MarkAsRequired<T, K extends keyof T> = T & {
-    [P in K]-?: T[P];
-};
+} = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
+export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
+    requiredProperties: TAllowedProperties;
+    requiredPseudos: TAllowedPseudos;
+}> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
 /**
- * ## cx
+ * ## CX
  *
  * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
  * declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.

package/dist/esm/xcss-prop/index.js

@@ -1,6 +1,6 @@
 import { ac } from '../runtime';
 /**
- * ## cx
+ * ## CX
  *
  * Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
  * declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.

package/dist/esm/xcss-prop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAiJhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAwKhC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAChB,GAAG,MAAe,EACD,EAAE;IACnB,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,YAAY,GAAG,MAA6B,CAAC;IAEnD,+EAA+E;IAC/E,kFAAkF;IAClF,OAAO,EAAE,CAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -76,6 +76,7 @@
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.1.0",
+    "@fixture/strict-api-test": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
     "@types/react-dom": "^17.0.22",

package/src/class-names/index.ts

@@ -19,7 +19,7 @@ export interface ClassNamesProps<TProps> {
 }
 
 /**
- * ## Class names
+ * ## Class Names
  *
  * Use a component where styles are not necessarily used on a JSX element.
  * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).

package/src/create-strict-api/__tests__/__fixtures__/strict-api.ts

@@ -0,0 +1,13 @@
+import { createStrictAPI } from '@compiled/react';
+
+const { css, XCSSProp, cssMap, cx } = createStrictAPI<{
+  '&:hover': {
+    color: 'var(--ds-text-hover)';
+    background: 'var(--ds-surface-hover)' | 'var(--ds-surface-sunken-hover)';
+  };
+  color: 'var(--ds-text)';
+  background: 'var(--ds-surface)' | 'var(--ds-surface-sunken)';
+  bkgrnd: 'red' | 'green';
+}>();
+
+export { css, XCSSProp, cssMap, cx };

package/src/create-strict-api/__tests__/index.test.tsx

@@ -0,0 +1,312 @@
+/** @jsxImportSource @compiled/react */
+import { render } from '@testing-library/react';
+
+import { css, cssMap, XCSSProp } from './__fixtures__/strict-api';
+
+describe('createStrictAPI()', () => {
+  describe('css()', () => {
+    it('should type error when circumventing the excess property check', () => {
+      const styles = css({
+        color: 'var(--ds-text)',
+        accentColor: 'red',
+        // @ts-expect-error — Type 'string' is not assignable to type 'undefined'.ts(2322)
+        bkgrnd: 'red',
+        '&:hover': {
+          color: 'var(--ds-text-hover)',
+          // @ts-expect-error — Type 'string' is not assignable to type 'undefined'.ts(2322)
+          bkgrnd: 'red',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+
+    it('should constrain declared types for css() func', () => {
+      // @ts-expect-error — Type '"red"' is not assignable to type '"var(--ds-surface)" | "var(--ds-surface-sunken" | undefined'.ts(2322)
+      const styles = css({ background: 'red' });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('background-color', 'red');
+    });
+
+    it('should mark all properties as optional', () => {
+      const styles1 = css({});
+      const styles2 = css({ '&:hover': {} });
+
+      const { getByTestId } = render(<div css={[styles1, styles2]} data-testid="div" />);
+
+      expect(getByTestId('div')).not.toHaveCompiledCss('color', 'red');
+    });
+
+    it('should constrain pseudos', () => {
+      const styles = css({
+        // @ts-expect-error — Type '"red"' is not assignable to type '"var(--ds-surface)" | "var(--ds-surface-sunken" | undefined'.ts(2322)
+        background: 'red',
+        '&:hover': {
+          // @ts-expect-error — Type '"red"' is not assignable to type '"var(--ds-surface)" | "var(--ds-surface-sunken" | undefined'.ts(2322)
+          background: 'red',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('background-color', 'red', { target: ':hover' });
+    });
+
+    it('should allow valid properties inside pseudos that are different to root', () => {
+      const styles = css({
+        background: 'var(--ds-surface)',
+        '&:hover': {
+          accentColor: 'red',
+          background: 'var(--ds-surface-hover)',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('background', 'var(--ds-surface-hover)', {
+        target: ':hover',
+      });
+    });
+
+    it('should allow valid properties', () => {
+      const styles = css({
+        background: 'var(--ds-surface)',
+        accentColor: 'red',
+        color: 'var(--ds-text)',
+        all: 'inherit',
+        '&:hover': { color: 'var(--ds-text-hover)' },
+        '&:invalid': { color: 'orange' },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('all', 'inherit');
+    });
+  });
+
+  describe('cssMap()', () => {
+    it('should allow valid properties', () => {
+      const styles = cssMap({
+        primary: {
+          background: 'var(--ds-surface)',
+          accentColor: 'red',
+          all: 'inherit',
+          '&:hover': { color: 'var(--ds-text-hover)' },
+          '&:invalid': { color: 'orange' },
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
+    it('should allow valid properties inside pseudos that are different to root', () => {
+      const styles = cssMap({
+        primary: {
+          background: 'var(--ds-surface)',
+          '&:hover': {
+            accentColor: 'red',
+            background: 'var(--ds-surface-hover)',
+          },
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('background', 'var(--ds-surface-hover)', {
+        target: ':hover',
+      });
+    });
+
+    it('should type error invalid vales', () => {
+      const styles = cssMap({
+        primary: {
+          // @ts-expect-error — Type '{ val: string; }' is not assignable to type 'Readonly<Properties<string | number, string & {}>> & PseudosDeclarations & EnforceSchema<{ background: "var(--ds-surface)" | "var(--ds-surface-sunken"; }>'.
+          val: 'ok',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('val', 'ok');
+    });
+
+    it('should type error invalid values in pseudos', () => {
+      const styles = cssMap({
+        primary: {
+          // @ts-expect-error — Type '"red"' is not assignable to type '"var(--ds-surface)" | "var(--ds-surface-sunken" | undefined'.ts(2322)
+          background: 'red',
+          '&:hover': {
+            // @ts-expect-error — Type 'string' is not assignable to type 'never'.ts(2322)
+            val: 'ok',
+          },
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('val', 'ok', { target: ':hover' });
+    });
+  });
+
+  describe('XCSSProp', () => {
+    it('should allow valid values', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(<Button xcss={{ background: 'var(--ds-surface)' }} />);
+
+      expect(getByTestId('button')).toHaveCompiledCss('background', 'var(--ds-surface)');
+    });
+
+    it('should type error for invalid known values', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            // @ts-expect-error — Type '"red"' is not assignable to type '"var(--ds-surface)" | "var(--ds-surface-sunken" | CompiledPropertyDeclarationReference | undefined'.ts(2322)
+            background: 'red',
+            // @ts-expect-error — Type '{ background: string; }' is not assignable to type 'undefined'.ts(2322)
+            '&::after': {
+              background: 'red',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('background-color', 'red');
+    });
+
+    it('should type error for invalid unknown values', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            // @ts-expect-error — Type '{ asd: number; }' is not assignable to type 'Internal$XCSSProp<"background", never, { background: "var(--ds-surface)" | "var(--ds-surface-sunken"; }, PickObjects<{ background: "var(--ds-surface)" | "var(--ds-surface-sunken"; }>, never>'.
+            asd: 0,
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('asd', '0');
+    });
+
+    it('should type error for unsupported known pseudos', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            // @ts-expect-error — Object literal may only specify known properties, and '':hover'' does not exist in type
+            ':hover': {
+              color: 'red',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('color', 'red', { target: ':hover' });
+    });
+
+    it('should type error for unsupported unknown pseudos', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'background', never>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            // @ts-expect-error — Object literal may only specify known properties, and '':hover'' does not exist in type
+            ':asd': {
+              color: 'red',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('color', 'red', { target: ':asd' });
+    });
+
+    it('should type error for invalid known values in pseudos', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'color', '&:hover'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            '&:hover': {
+              // @ts-expect-error — Type '"red"' is not assignable to type 'CompiledPropertyDeclarationReference | "var(--ds-text)" | undefined'.ts(2322)
+              color: 'red',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('color', 'red', { target: ':hover' });
+    });
+
+    it('should type error for invalid unknown values in pseudos', () => {
+      function Button({ xcss }: { xcss: ReturnType<typeof XCSSProp<'color', '&:hover'>> }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          xcss={{
+            '&:hover': {
+              // @ts-expect-error — Type '{ asd: string; }' is not assignable to type 'MarkAsRequired<XCSSItem<"color", { color: "var(--ds-text)"; }>, never>'.
+              asd: 'red',
+            },
+          }}
+        />
+      );
+
+      expect(getByTestId('button')).toHaveCompiledCss('asd', 'red', { target: ':hover' });
+    });
+
+    it('should enforce required properties', () => {
+      function Button({
+        xcss,
+      }: {
+        xcss: ReturnType<
+          typeof XCSSProp<
+            'background',
+            never,
+            { requiredProperties: 'background'; requiredPseudos: never }
+          >
+        >;
+      }) {
+        return <button data-testid="button" className={xcss} />;
+      }
+
+      const { getByTestId } = render(
+        <Button
+          // @ts-expect-error — Type '{}' is not assignable to type 'Internal$XCSSProp<"background", never, EnforceSchema<{ background: "var(--ds-surface)" | "var(--ds-surface-sunken"; }>, object, { requiredProperties: "background"; requiredPseudos: never; }>'.ts(2322)
+          xcss={{}}
+        />
+      );
+
+      expect(getByTestId('button')).not.toHaveCompiledCss('color', 'red');
+    });
+  });
+
+  it('should throw when calling XCSSProp directly', () => {
+    expect(() => {
+      XCSSProp();
+    }).toThrow();
+  });
+});

package/src/create-strict-api/__tests__/package.test.tsx

@@ -0,0 +1,21 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from '@fixture/strict-api-test';
+import { render } from '@testing-library/react';
+
+describe('createStrictAPI()', () => {
+  describe('css()', () => {
+    it('should type error when circumventing the excess property check', () => {
+      const styles = css({
+        color: 'var(--ds-text)',
+        '&:hover': {
+          color: 'var(--ds-text-hover)',
+        },
+      });
+
+      const { getByTestId } = render(<div css={styles} data-testid="div" />);
+
+      expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
+    });
+  });
+});