@compiled/react 0.14.0 → 0.16.0

package/dist/browser/css-map/index.d.ts

@@ -1,4 +1,96 @@
-import type { CSSProps, CssObject } from '../types';
+import type { Properties, AtRules } from 'csstype';
+import type { Pseudos } from './pseudos';
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ *
+ * @example
+ * ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+type AllPseudos = {
+    [key in Pseudos]?: CssProps & AllPseudos;
+};
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+    [atRuleFirstHalf in AtRules]?: {
+        [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+    };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+type ExtendedSelector = {
+    [key: string]: CssProps | ExtendedSelector;
+} & {
+    /**
+     * Using `selectors` is not valid here - you cannot nest a `selectors` object
+     * inside another `selectors` object.
+     */
+    selectors?: never;
+};
+type ExtendedSelectors = {
+    /**
+     * Provides a way to use selectors that have not been explicitly whitelisted
+     * in cssMap.
+     *
+     * This does not provide any type-checking for the selectors (thus allowing
+     * more expressive selectors), though this is more flexible and allows
+     * nesting selectors in other selectors.
+     *
+     * A selector defined both outside of the `selectors` object and
+     * inside the `selectors` object is a runtime error.
+     *
+     * Note that you cannot nest a `selectors` object inside another
+     * `selectors` object.
+     *
+     * Only use if absolutely necessary.
+     *
+     * @example
+     * ```
+     * const myMap = cssMap({
+     *   danger: {
+     *     color: 'red',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.5em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: 'pink',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'yellow',
+     *       }
+     *     },
+     *   },
+     *   success: {
+     *     color: 'green',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.3em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: '#8f8',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'white',
+     *       }
+     *     },
+     *   },
+     * });
+     * ```
+     */
+    selectors?: ExtendedSelector;
+};
+type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
+type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
 /**
  * ## cssMap
  *
@@ -16,6 +108,5 @@ import type { CSSProps, CssObject } from '../types';
  * <Component borderStyle="solid" />
  * ```
  */
-type returnType<T extends string, P> = Record<T, CSSProps<P>>;
-export default function cssMap<T extends string, TProps = unknown>(_styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>): Readonly<returnType<T, TProps>>;
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
 export {};

package/dist/browser/css-map/index.js

@@ -1,4 +1,21 @@
 import { createSetupError } from '../utils/error';
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ *
+ * @example
+ * ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
 export default function cssMap(_styles) {
     throw createSetupError();
 }

package/dist/browser/css-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqBlD,MAAM,CAAC,OAAO,UAAU,MAAM,CAC5B,OAA2D;IAE3D,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAmB,OAAoB;IACnE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/css-map/pseudos.d.ts

@@ -0,0 +1 @@
+export type Pseudos = '&::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';

package/dist/browser/css-map/pseudos.js

@@ -0,0 +1,5 @@
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+export {};
+//# sourceMappingURL=pseudos.js.map

package/dist/browser/css-map/pseudos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/dist/cjs/css-map/index.d.ts

@@ -1,4 +1,96 @@
-import type { CSSProps, CssObject } from '../types';
+import type { Properties, AtRules } from 'csstype';
+import type { Pseudos } from './pseudos';
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ *
+ * @example
+ * ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+type AllPseudos = {
+    [key in Pseudos]?: CssProps & AllPseudos;
+};
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+    [atRuleFirstHalf in AtRules]?: {
+        [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+    };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+type ExtendedSelector = {
+    [key: string]: CssProps | ExtendedSelector;
+} & {
+    /**
+     * Using `selectors` is not valid here - you cannot nest a `selectors` object
+     * inside another `selectors` object.
+     */
+    selectors?: never;
+};
+type ExtendedSelectors = {
+    /**
+     * Provides a way to use selectors that have not been explicitly whitelisted
+     * in cssMap.
+     *
+     * This does not provide any type-checking for the selectors (thus allowing
+     * more expressive selectors), though this is more flexible and allows
+     * nesting selectors in other selectors.
+     *
+     * A selector defined both outside of the `selectors` object and
+     * inside the `selectors` object is a runtime error.
+     *
+     * Note that you cannot nest a `selectors` object inside another
+     * `selectors` object.
+     *
+     * Only use if absolutely necessary.
+     *
+     * @example
+     * ```
+     * const myMap = cssMap({
+     *   danger: {
+     *     color: 'red',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.5em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: 'pink',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'yellow',
+     *       }
+     *     },
+     *   },
+     *   success: {
+     *     color: 'green',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.3em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: '#8f8',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'white',
+     *       }
+     *     },
+     *   },
+     * });
+     * ```
+     */
+    selectors?: ExtendedSelector;
+};
+type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
+type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
 /**
  * ## cssMap
  *
@@ -16,6 +108,5 @@ import type { CSSProps, CssObject } from '../types';
  * <Component borderStyle="solid" />
  * ```
  */
-type returnType<T extends string, P> = Record<T, CSSProps<P>>;
-export default function cssMap<T extends string, TProps = unknown>(_styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>): Readonly<returnType<T, TProps>>;
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
 export {};

package/dist/cjs/css-map/index.js

@@ -1,6 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const error_1 = require("../utils/error");
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ *
+ * @example
+ * ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
 function cssMap(_styles) {
     throw (0, error_1.createSetupError)();
 }

package/dist/cjs/css-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;AACA,0CAAkD;AAqBlD,SAAwB,MAAM,CAC5B,OAA2D;IAE3D,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AAJD,yBAIC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;AAEA,0CAAkD;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,SAAwB,MAAM,CAAmB,OAAoB;IACnE,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AAFD,yBAEC"}

package/dist/cjs/css-map/pseudos.d.ts

@@ -0,0 +1 @@
+export type Pseudos = '&::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';

package/dist/cjs/css-map/pseudos.js

@@ -0,0 +1,6 @@
+"use strict";
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=pseudos.js.map

package/dist/cjs/css-map/pseudos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":";AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/dist/esm/css-map/index.d.ts

@@ -1,4 +1,96 @@
-import type { CSSProps, CssObject } from '../types';
+import type { Properties, AtRules } from 'csstype';
+import type { Pseudos } from './pseudos';
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ *
+ * @example
+ * ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+type AllPseudos = {
+    [key in Pseudos]?: CssProps & AllPseudos;
+};
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+    [atRuleFirstHalf in AtRules]?: {
+        [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+    };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+type ExtendedSelector = {
+    [key: string]: CssProps | ExtendedSelector;
+} & {
+    /**
+     * Using `selectors` is not valid here - you cannot nest a `selectors` object
+     * inside another `selectors` object.
+     */
+    selectors?: never;
+};
+type ExtendedSelectors = {
+    /**
+     * Provides a way to use selectors that have not been explicitly whitelisted
+     * in cssMap.
+     *
+     * This does not provide any type-checking for the selectors (thus allowing
+     * more expressive selectors), though this is more flexible and allows
+     * nesting selectors in other selectors.
+     *
+     * A selector defined both outside of the `selectors` object and
+     * inside the `selectors` object is a runtime error.
+     *
+     * Note that you cannot nest a `selectors` object inside another
+     * `selectors` object.
+     *
+     * Only use if absolutely necessary.
+     *
+     * @example
+     * ```
+     * const myMap = cssMap({
+     *   danger: {
+     *     color: 'red',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.5em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: 'pink',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'yellow',
+     *       }
+     *     },
+     *   },
+     *   success: {
+     *     color: 'green',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.3em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: '#8f8',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'white',
+     *       }
+     *     },
+     *   },
+     * });
+     * ```
+     */
+    selectors?: ExtendedSelector;
+};
+type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
+type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
 /**
  * ## cssMap
  *
@@ -16,6 +108,5 @@ import type { CSSProps, CssObject } from '../types';
  * <Component borderStyle="solid" />
  * ```
  */
-type returnType<T extends string, P> = Record<T, CSSProps<P>>;
-export default function cssMap<T extends string, TProps = unknown>(_styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>): Readonly<returnType<T, TProps>>;
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
 export {};

package/dist/esm/css-map/index.js

@@ -1,4 +1,21 @@
 import { createSetupError } from '../utils/error';
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ *
+ * @example
+ * ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
 export default function cssMap(_styles) {
     throw createSetupError();
 }

package/dist/esm/css-map/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqBlD,MAAM,CAAC,OAAO,UAAU,MAAM,CAC5B,OAA2D;IAE3D,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAmB,OAAoB;IACnE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/css-map/pseudos.d.ts

@@ -0,0 +1 @@
+export type Pseudos = '&::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';

package/dist/esm/css-map/pseudos.js

@@ -0,0 +1,5 @@
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+export {};
+//# sourceMappingURL=pseudos.js.map

package/dist/esm/css-map/pseudos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -79,6 +79,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
     "@types/react-dom": "^17.0.20",
+    "expect-type": "^0.17.3",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/css/__tests__/types.test.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @compiled/react */
+import { css } from '@compiled/react';
+import { expectTypeOf } from 'expect-type';
+
+describe('css func tests', () => {
+  it('should type violate when given invalid types', () => {
+    const style = css({ color: 'red' });
+
+    expectTypeOf(style).not.toMatchTypeOf<string>();
+  });
+});

package/src/css-map/index.ts

@@ -1,6 +1,108 @@
-import type { CSSProps, CssObject } from '../types';
+import type { Properties, AtRules } from 'csstype';
+
 import { createSetupError } from '../utils/error';
 
+import type { Pseudos } from './pseudos';
+
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ *
+ * @example
+ * ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+
+type AllPseudos = { [key in Pseudos]?: CssProps & AllPseudos };
+
+// The `screen and (max-width: 768px)` part of `@media screen and (max-width: 768px)`.
+// Ideally we would do type checking to forbid this from containing the `@media` part,
+// but TypeScript doesn't provide a good way to do this.
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+  [atRuleFirstHalf in AtRules]?: {
+    [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+  };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+
+type ExtendedSelector = { [key: string]: CssProps | ExtendedSelector } & {
+  /**
+   * Using `selectors` is not valid here - you cannot nest a `selectors` object
+   * inside another `selectors` object.
+   */
+  selectors?: never;
+};
+
+type ExtendedSelectors = {
+  /**
+   * Provides a way to use selectors that have not been explicitly whitelisted
+   * in cssMap.
+   *
+   * This does not provide any type-checking for the selectors (thus allowing
+   * more expressive selectors), though this is more flexible and allows
+   * nesting selectors in other selectors.
+   *
+   * A selector defined both outside of the `selectors` object and
+   * inside the `selectors` object is a runtime error.
+   *
+   * Note that you cannot nest a `selectors` object inside another
+   * `selectors` object.
+   *
+   * Only use if absolutely necessary.
+   *
+   * @example
+   * ```
+   * const myMap = cssMap({
+   *   danger: {
+   *     color: 'red',
+   *     '@media': {
+   *       '(min-width: 100px)': {
+   *         font-size: '1.5em',
+   *       },
+   *     },
+   *     '&:hover': {
+   *       color: 'pink',
+   *     },
+   *     selectors: {
+   *       '&:not(:active)': {
+   *         backgroundColor: 'yellow',
+   *       }
+   *     },
+   *   },
+   *   success: {
+   *     color: 'green',
+   *     '@media': {
+   *       '(min-width: 100px)': {
+   *         font-size: '1.3em',
+   *       },
+   *     },
+   *     '&:hover': {
+   *       color: '#8f8',
+   *     },
+   *     selectors: {
+   *       '&:not(:active)': {
+   *         backgroundColor: 'white',
+   *       }
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  selectors?: ExtendedSelector;
+};
+
+type Variants<VariantName extends string> = Record<
+  VariantName,
+  CssProps & WhitelistedSelector & ExtendedSelectors
+>;
+type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
+
 /**
  * ## cssMap
  *
@@ -18,10 +120,7 @@ import { createSetupError } from '../utils/error';
  * <Component borderStyle="solid" />
  * ```
  */
-type returnType<T extends string, P> = Record<T, CSSProps<P>>;
 
-export default function cssMap<T extends string, TProps = unknown>(
-  _styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>
-): Readonly<returnType<T, TProps>> {
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>> {
   throw createSetupError();
 }

package/src/css-map/pseudos.ts

@@ -0,0 +1,59 @@
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+
+// We also exclude anything that requires providing an argument
+// (e.g. &:not(...) ), and anything that uses information from elements
+// outside of the current element (e.g. &:first-of-type)
+
+export type Pseudos =
+  | '&::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';