@compiled/react 0.16.6 → 0.16.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,9 +6,6 @@ type PseudosDeclarations = {
6
6
  type EnforceSchema<TObject> = {
7
7
  [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
8
8
  };
9
- type PickObjects<TObject> = {
10
- [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
11
- };
12
9
  type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
13
10
  type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
14
11
  interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
128
125
  XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
129
126
  requiredProperties: TAllowedProperties;
130
127
  requiredPseudos: TAllowedPseudos;
131
- } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
128
+ } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
132
129
  }
133
130
  type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
134
131
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAiK/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
@@ -1,13 +1,12 @@
1
1
  import { createElement } from 'react';
2
2
  import type { CompiledJSX } from './jsx/jsx-local-namespace';
3
- import type { CssFunction, CSSProps, CssType } from './types';
4
- export type { CSSProps, CssFunction, CssType };
5
- export { keyframes } from './keyframes';
6
- export { styled } from './styled';
7
3
  export { ClassNames } from './class-names';
4
+ export { createStrictAPI } from './create-strict-api';
8
5
  export { default as css } from './css';
9
6
  export { default as cssMap } from './css-map';
10
- export { createStrictAPI } from './create-strict-api';
7
+ export { keyframes } from './keyframes';
8
+ export { styled } from './styled';
9
+ export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
11
10
  export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
12
11
  export declare const jsx: typeof createElement;
13
12
  export declare namespace jsx {
@@ -1,10 +1,10 @@
1
1
  import { createElement } from 'react';
2
- export { keyframes } from './keyframes';
3
- export { styled } from './styled';
4
2
  export { ClassNames } from './class-names';
3
+ export { createStrictAPI } from './create-strict-api';
5
4
  export { default as css } from './css';
6
5
  export { default as cssMap } from './css-map';
7
- export { createStrictAPI } from './create-strict-api';
6
+ export { keyframes } from './keyframes';
7
+ export { styled } from './styled';
8
8
  export { cx } from './xcss-prop';
9
9
  // Pass through the (classic) jsx runtime.
10
10
  // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
@@ -1,15 +1,15 @@
1
1
  import type * as CSS from 'csstype';
2
- import type { CSSPseudos, CSSProperties } from '../types';
2
+ import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
3
3
  type MarkAsRequired<T, K extends keyof T> = T & {
4
4
  [P in K]-?: T[P];
5
5
  };
6
- type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
7
- [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
6
+ type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
7
+ [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
8
8
  };
9
9
  type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
10
10
  requiredProperties: TAllowedProperties;
11
- }, TCompiledTypedPseudo> = {
12
- [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
11
+ }, TSchema> = {
12
+ [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
13
13
  };
14
14
  /**
15
15
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
39
39
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
40
40
  * your component.
41
41
  */
42
- export type XCSSAllProperties = keyof CSSProperties;
42
+ export type XCSSAllProperties = keyof StrictCSSProperties;
43
43
  /**
44
44
  * Please think twice before using this type, you're better off declaring explicitly
45
45
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
109
109
  export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
110
110
  requiredProperties: TAllowedProperties;
111
111
  requiredPseudos: TAllowedPseudos;
112
- } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
113
- export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
112
+ } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
113
+ export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
114
114
  requiredProperties: TAllowedProperties;
115
115
  requiredPseudos: TAllowedPseudos;
116
- }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
116
+ }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
117
117
  /**
118
118
  * ## CX
119
119
  *
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAoKhC;;;;;;;;;;;;;;;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"}
@@ -6,9 +6,6 @@ type PseudosDeclarations = {
6
6
  type EnforceSchema<TObject> = {
7
7
  [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
8
8
  };
9
- type PickObjects<TObject> = {
10
- [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
11
- };
12
9
  type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
13
10
  type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
14
11
  interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
128
125
  XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
129
126
  requiredProperties: TAllowedProperties;
130
127
  requiredPseudos: TAllowedPseudos;
131
- } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
128
+ } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
132
129
  }
133
130
  type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
134
131
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":";;;AACA,0CAAwD;AACxD,4CAA+E;AAiK/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,SAAgB,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,EAAE,EAAF,cAAE;QACF,QAAQ;YACN,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC;AAbD,0CAaC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":";;;AACA,0CAAwD;AACxD,4CAA+E;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,SAAgB,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;QACD,EAAE,EAAF,cAAE;QACF,QAAQ;YACN,MAAM,IAAA,8BAAsB,GAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC;AAbD,0CAaC"}
@@ -1,13 +1,12 @@
1
1
  import { createElement } from 'react';
2
2
  import type { CompiledJSX } from './jsx/jsx-local-namespace';
3
- import type { CssFunction, CSSProps, CssType } from './types';
4
- export type { CSSProps, CssFunction, CssType };
5
- export { keyframes } from './keyframes';
6
- export { styled } from './styled';
7
3
  export { ClassNames } from './class-names';
4
+ export { createStrictAPI } from './create-strict-api';
8
5
  export { default as css } from './css';
9
6
  export { default as cssMap } from './css-map';
10
- export { createStrictAPI } from './create-strict-api';
7
+ export { keyframes } from './keyframes';
8
+ export { styled } from './styled';
9
+ export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
11
10
  export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
12
11
  export declare const jsx: typeof createElement;
13
12
  export declare namespace jsx {
package/dist/cjs/index.js CHANGED
@@ -3,20 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.jsx = exports.cx = exports.createStrictAPI = exports.cssMap = exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
6
+ exports.jsx = exports.cx = exports.styled = exports.keyframes = exports.cssMap = exports.css = exports.createStrictAPI = exports.ClassNames = void 0;
7
7
  const react_1 = require("react");
8
- var keyframes_1 = require("./keyframes");
9
- Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
10
- var styled_1 = require("./styled");
11
- Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.styled; } });
12
8
  var class_names_1 = require("./class-names");
13
9
  Object.defineProperty(exports, "ClassNames", { enumerable: true, get: function () { return class_names_1.ClassNames; } });
10
+ var create_strict_api_1 = require("./create-strict-api");
11
+ Object.defineProperty(exports, "createStrictAPI", { enumerable: true, get: function () { return create_strict_api_1.createStrictAPI; } });
14
12
  var css_1 = require("./css");
15
13
  Object.defineProperty(exports, "css", { enumerable: true, get: function () { return __importDefault(css_1).default; } });
16
14
  var css_map_1 = require("./css-map");
17
15
  Object.defineProperty(exports, "cssMap", { enumerable: true, get: function () { return __importDefault(css_map_1).default; } });
18
- var create_strict_api_1 = require("./create-strict-api");
19
- Object.defineProperty(exports, "createStrictAPI", { enumerable: true, get: function () { return create_strict_api_1.createStrictAPI; } });
16
+ var keyframes_1 = require("./keyframes");
17
+ Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
18
+ var styled_1 = require("./styled");
19
+ Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.styled; } });
20
20
  var xcss_prop_1 = require("./xcss-prop");
21
21
  Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return xcss_prop_1.cx; } });
22
22
  // Pass through the (classic) jsx runtime.
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAOtC,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,yCAA6F;AAAxB,+FAAA,EAAE,OAAA;AAEvE,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAsC;AAItC,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,yDAAsD;AAA7C,oHAAA,eAAe,OAAA;AACxB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AACvB,qCAA8C;AAArC,kHAAA,OAAO,OAAU;AAC1B,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AASf,yCAA6F;AAAxB,+FAAA,EAAE,OAAA;AAEvE,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}
@@ -1,15 +1,15 @@
1
1
  import type * as CSS from 'csstype';
2
- import type { CSSPseudos, CSSProperties } from '../types';
2
+ import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
3
3
  type MarkAsRequired<T, K extends keyof T> = T & {
4
4
  [P in K]-?: T[P];
5
5
  };
6
- type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
7
- [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
6
+ type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
7
+ [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
8
8
  };
9
9
  type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
10
10
  requiredProperties: TAllowedProperties;
11
- }, TCompiledTypedPseudo> = {
12
- [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
11
+ }, TSchema> = {
12
+ [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
13
13
  };
14
14
  /**
15
15
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
39
39
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
40
40
  * your component.
41
41
  */
42
- export type XCSSAllProperties = keyof CSSProperties;
42
+ export type XCSSAllProperties = keyof StrictCSSProperties;
43
43
  /**
44
44
  * Please think twice before using this type, you're better off declaring explicitly
45
45
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
109
109
  export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
110
110
  requiredProperties: TAllowedProperties;
111
111
  requiredPseudos: TAllowedPseudos;
112
- } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
113
- export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
112
+ } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
113
+ export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
114
114
  requiredProperties: TAllowedProperties;
115
115
  requiredPseudos: TAllowedPseudos;
116
- }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
116
+ }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
117
117
  /**
118
118
  * ## CX
119
119
  *
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAEA,wCAAgC;AAwKhC;;;;;;;;;;;;;;;GAeG;AACI,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,IAAA,YAAE,EAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC;AAVW,QAAA,EAAE,MAUb"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":";;;AAEA,wCAAgC;AAoKhC;;;;;;;;;;;;;;;GAeG;AACI,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,IAAA,YAAE,EAAC,YAAY,CAAoB,CAAC;AAC7C,CAAC,CAAC;AAVW,QAAA,EAAE,MAUb"}
@@ -6,9 +6,6 @@ type PseudosDeclarations = {
6
6
  type EnforceSchema<TObject> = {
7
7
  [P in keyof TObject]?: P extends keyof CompiledSchema ? TObject[P] extends Record<string, unknown> ? EnforceSchema<TObject[P]> : TObject[P] : never;
8
8
  };
9
- type PickObjects<TObject> = {
10
- [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
11
- };
12
9
  type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties & PseudosDeclarations & EnforceSchema<TSchema>;
13
10
  type CSSMapStyles<TSchema extends CompiledSchema> = Record<string, CSSStyles<TSchema>>;
14
11
  interface CompiledAPI<TSchema extends CompiledSchema> {
@@ -128,7 +125,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
128
125
  XCSSProp<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
129
126
  requiredProperties: TAllowedProperties;
130
127
  requiredPseudos: TAllowedPseudos;
131
- } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, PickObjects<TSchema>, TRequiredProperties>;
128
+ } = never>(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
132
129
  }
133
130
  type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
134
131
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAiK/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/create-strict-api/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAuB,EAAE,EAA0B,MAAM,cAAc,CAAC;AAuJ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,GAAG;YACD,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,MAAM;YACJ,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;QACD,EAAE;QACF,QAAQ;YACN,MAAM,sBAAsB,EAAE,CAAC;QACjC,CAAC;KACF,CAAC;AACJ,CAAC"}
@@ -1,13 +1,12 @@
1
1
  import { createElement } from 'react';
2
2
  import type { CompiledJSX } from './jsx/jsx-local-namespace';
3
- import type { CssFunction, CSSProps, CssType } from './types';
4
- export type { CSSProps, CssFunction, CssType };
5
- export { keyframes } from './keyframes';
6
- export { styled } from './styled';
7
3
  export { ClassNames } from './class-names';
4
+ export { createStrictAPI } from './create-strict-api';
8
5
  export { default as css } from './css';
9
6
  export { default as cssMap } from './css-map';
10
- export { createStrictAPI } from './create-strict-api';
7
+ export { keyframes } from './keyframes';
8
+ export { styled } from './styled';
9
+ export type { CSSProperties, CSSProps, CSSPseudos, CssFunction, CssType, StrictCSSProperties, } from './types';
11
10
  export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
12
11
  export declare const jsx: typeof createElement;
13
12
  export declare namespace jsx {
package/dist/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { createElement } from 'react';
2
- export { keyframes } from './keyframes';
3
- export { styled } from './styled';
4
2
  export { ClassNames } from './class-names';
3
+ export { createStrictAPI } from './create-strict-api';
5
4
  export { default as css } from './css';
6
5
  export { default as cssMap } from './css-map';
7
- export { createStrictAPI } from './create-strict-api';
6
+ export { keyframes } from './keyframes';
7
+ export { styled } from './styled';
8
8
  export { cx } from './xcss-prop';
9
9
  // Pass through the (classic) jsx runtime.
10
10
  // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,OAAO,EAA8D,EAAE,EAAE,MAAM,aAAa,CAAC;AAE7F,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
@@ -1,15 +1,15 @@
1
1
  import type * as CSS from 'csstype';
2
- import type { CSSPseudos, CSSProperties } from '../types';
2
+ import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
3
3
  type MarkAsRequired<T, K extends keyof T> = T & {
4
4
  [P in K]-?: T[P];
5
5
  };
6
- type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
7
- [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q]) : never;
6
+ type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
7
+ [Q in keyof CSSProperties]: Q extends TStyleDecl ? CompiledPropertyDeclarationReference | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q]) : never;
8
8
  };
9
9
  type XCSSPseudos<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
10
10
  requiredProperties: TAllowedProperties;
11
- }, TCompiledTypedPseudo> = {
12
- [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object>, TRequiredProperties['requiredProperties']> : never;
11
+ }, TSchema> = {
12
+ [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>, TRequiredProperties['requiredProperties']> : never;
13
13
  };
14
14
  /**
15
15
  * These APIs we don't want to allow to be passed through the `xcss` prop but we also
@@ -39,7 +39,7 @@ export type CompiledStyles<TObject> = {
39
39
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
40
40
  * your component.
41
41
  */
42
- export type XCSSAllProperties = keyof CSSProperties;
42
+ export type XCSSAllProperties = keyof StrictCSSProperties;
43
43
  /**
44
44
  * Please think twice before using this type, you're better off declaring explicitly
45
45
  * what your API should be, for example not allowing any pseudos at all using the
@@ -109,11 +109,11 @@ export type XCSSAllPseudos = CSSPseudos;
109
109
  export type XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
110
110
  requiredProperties: TAllowedProperties;
111
111
  requiredPseudos: TAllowedPseudos;
112
- } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
113
- export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TCompiledTypedProperty, TCompiledTypedPseudo, TRequiredProperties extends {
112
+ } = never> = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
113
+ export type Internal$XCSSProp<TAllowedProperties extends keyof CSSProperties, TAllowedPseudos extends CSSPseudos, TSchema, TRequiredProperties extends {
114
114
  requiredProperties: TAllowedProperties;
115
115
  requiredPseudos: TAllowedPseudos;
116
- }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TCompiledTypedProperty>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
116
+ }> = (MarkAsRequired<XCSSItem<TAllowedProperties, TSchema>, TRequiredProperties['requiredProperties']> & MarkAsRequired<XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>, TRequiredProperties['requiredPseudos']> & BlockedRules) | false | null | undefined;
117
117
  /**
118
118
  * ## CX
119
119
  *
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/xcss-prop/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAoKhC;;;;;;;;;;;;;;;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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compiled/react",
3
- "version": "0.16.6",
3
+ "version": "0.16.7",
4
4
  "description": "A familiar and performant compile time CSS-in-JS library for React.",
5
5
  "keywords": [
6
6
  "compiled",
@@ -0,0 +1,34 @@
1
+ import { createStrictAPI } from '../../index';
2
+
3
+ type Color = 'var(--ds-text)';
4
+ type ColorHovered = 'var(--ds-text-hovered)';
5
+ type ColorPressed = 'var(--ds-text-pressed)';
6
+ type Background = 'var(--ds-bold)' | 'var(--ds-success)';
7
+ type BackgroundHovered = 'var(--ds-bold-hovered)' | 'var(--ds-success-hovered)';
8
+ type BackgroundPressed = 'var(--ds-bold-pressed)' | 'var(--ds-success-pressed)';
9
+
10
+ interface Properties {
11
+ color: Color;
12
+ backgroundColor: Background;
13
+ }
14
+
15
+ interface HoveredProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
16
+ color: ColorHovered;
17
+ backgroundColor: BackgroundHovered;
18
+ }
19
+
20
+ interface PressedProperties extends Omit<Properties, 'backgroundColor' | 'color'> {
21
+ color: ColorPressed;
22
+ backgroundColor: BackgroundPressed;
23
+ }
24
+
25
+ interface StrictAPI extends Properties {
26
+ '&:hover': HoveredProperties;
27
+ '&:active': PressedProperties;
28
+ '&::before': Properties;
29
+ '&::after': Properties;
30
+ }
31
+
32
+ const { css, XCSSProp, cssMap, cx } = createStrictAPI<StrictAPI>();
33
+
34
+ export { css, XCSSProp, cssMap, cx };
@@ -0,0 +1,235 @@
1
+ /** @jsxImportSource @compiled/react */
2
+ import { render } from '@testing-library/react';
3
+
4
+ import type { XCSSProp } from './__fixtures__/strict-api-recursive';
5
+ import { css, cssMap } from './__fixtures__/strict-api-recursive';
6
+
7
+ describe('createStrictAPI()', () => {
8
+ describe('type violations', () => {
9
+ it('should violate types for css()', () => {
10
+ const styles = css({
11
+ // @ts-expect-error — Type '""' is not assignable to type ...
12
+ color: '',
13
+ // @ts-expect-error — Type '""' is not assignable to type ...
14
+ backgroundColor: '',
15
+ '&:hover': {
16
+ // @ts-expect-error — Type '""' is not assignable to type ...
17
+ color: '',
18
+ // @ts-expect-error — Type '""' is not assignable to type ...
19
+ backgroundColor: '',
20
+ },
21
+ '&:active': {
22
+ // @ts-expect-error — Type '""' is not assignable to type ...
23
+ color: '',
24
+ // @ts-expect-error — Type '""' is not assignable to type ...
25
+ backgroundColor: '',
26
+ },
27
+ '&::before': {
28
+ // @ts-expect-error — Type '""' is not assignable to type ...
29
+ color: '',
30
+ // @ts-expect-error — Type '""' is not assignable to type ...
31
+ backgroundColor: '',
32
+ },
33
+ '&::after': {
34
+ // @ts-expect-error — Type '""' is not assignable to type ...
35
+ color: '',
36
+ // @ts-expect-error — Type '""' is not assignable to type ...
37
+ backgroundColor: '',
38
+ },
39
+ });
40
+
41
+ const { getByTestId } = render(<div css={styles} data-testid="div" />);
42
+
43
+ expect(getByTestId('div')).toBeDefined();
44
+ });
45
+
46
+ it('should violate types for cssMap()', () => {
47
+ const styles = cssMap({
48
+ primary: {
49
+ // @ts-expect-error — Type '""' is not assignable to type ...
50
+ color: 's',
51
+ // @ts-expect-error — Type '""' is not assignable to type ...
52
+ backgroundColor: '',
53
+ '&:hover': {
54
+ // @ts-expect-error — Type '""' is not assignable to type ...
55
+ color: '',
56
+ // @ts-expect-error — Type '""' is not assignable to type ...
57
+ backgroundColor: '',
58
+ },
59
+ '&:active': {
60
+ // @ts-expect-error — Type '""' is not assignable to type ...
61
+ color: '',
62
+ // @ts-expect-error — Type '""' is not assignable to type ...
63
+ backgroundColor: '',
64
+ },
65
+ '&::before': {
66
+ // @ts-expect-error — Type '""' is not assignable to type ...
67
+ color: '',
68
+ // @ts-expect-error — Type '""' is not assignable to type ...
69
+ backgroundColor: '',
70
+ },
71
+ '&::after': {
72
+ // @ts-expect-error — Type '""' is not assignable to type ...
73
+ color: '',
74
+ // @ts-expect-error — Type '""' is not assignable to type ...
75
+ backgroundColor: '',
76
+ },
77
+ },
78
+ });
79
+
80
+ const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
81
+
82
+ expect(getByTestId('div')).toBeDefined();
83
+ });
84
+
85
+ it('should violate types for xcss prop', () => {
86
+ function Component(_: {
87
+ xcss: ReturnType<
88
+ typeof XCSSProp<
89
+ 'backgroundColor' | 'color',
90
+ '&:hover' | '&:active' | '&::before' | '&::after'
91
+ >
92
+ >;
93
+ }) {
94
+ return <div data-testid="div" />;
95
+ }
96
+
97
+ const { getByTestId } = render(
98
+ <Component
99
+ xcss={{
100
+ // @ts-expect-error — Type '""' is not assignable to type ...
101
+ color: '',
102
+ // @ts-expect-error — Type '""' is not assignable to type ...
103
+ backgroundColor: '',
104
+ '&:hover': {
105
+ // @ts-expect-error — Type '""' is not assignable to type ...
106
+ color: '',
107
+ // @ts-expect-error — Type '""' is not assignable to type ...
108
+ backgroundColor: '',
109
+ },
110
+ '&:active': {
111
+ // @ts-expect-error — Type '""' is not assignable to type ...
112
+ color: '',
113
+ // @ts-expect-error — Type '""' is not assignable to type ...
114
+ backgroundColor: '',
115
+ },
116
+ '&::before': {
117
+ // @ts-expect-error — Type '""' is not assignable to type ...
118
+ color: '',
119
+ // @ts-expect-error — Type '""' is not assignable to type ...
120
+ backgroundColor: '',
121
+ },
122
+ '&::after': {
123
+ // @ts-expect-error — Type '""' is not assignable to type ...
124
+ color: '',
125
+ // @ts-expect-error — Type '""' is not assignable to type ...
126
+ backgroundColor: '',
127
+ },
128
+ }}
129
+ />
130
+ );
131
+
132
+ expect(getByTestId('div')).toBeDefined();
133
+ });
134
+ });
135
+
136
+ describe('type success', () => {
137
+ it('should pass type check for css()', () => {
138
+ const styles = css({
139
+ color: 'var(--ds-text)',
140
+ backgroundColor: 'var(--ds-bold)',
141
+ '&:hover': {
142
+ color: 'var(--ds-text-hovered)',
143
+ backgroundColor: 'var(--ds-bold-hovered)',
144
+ },
145
+ '&:active': {
146
+ color: 'var(--ds-text-pressed)',
147
+ backgroundColor: 'var(--ds-bold-pressed)',
148
+ },
149
+ '&::before': {
150
+ color: 'var(--ds-text)',
151
+ backgroundColor: 'var(--ds-bold)',
152
+ },
153
+ '&::after': {
154
+ color: 'var(--ds-text)',
155
+ backgroundColor: 'var(--ds-bold)',
156
+ },
157
+ });
158
+
159
+ const { getByTestId } = render(<div css={styles} data-testid="div" />);
160
+
161
+ expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
162
+ });
163
+
164
+ it('should pass type check for cssMap()', () => {
165
+ const styles = cssMap({
166
+ primary: {
167
+ color: 'var(--ds-text)',
168
+ backgroundColor: 'var(--ds-bold)',
169
+ '&:hover': {
170
+ color: 'var(--ds-text-hovered)',
171
+ backgroundColor: 'var(--ds-bold-hovered)',
172
+ },
173
+ '&:active': {
174
+ color: 'var(--ds-text-pressed)',
175
+ backgroundColor: 'var(--ds-bold-pressed)',
176
+ },
177
+ '&::before': {
178
+ color: 'var(--ds-text)',
179
+ backgroundColor: 'var(--ds-bold)',
180
+ },
181
+ '&::after': {
182
+ color: 'var(--ds-text)',
183
+ backgroundColor: 'var(--ds-bold)',
184
+ },
185
+ },
186
+ });
187
+
188
+ const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
189
+
190
+ expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
191
+ });
192
+
193
+ it('should pass type check for xcss prop', () => {
194
+ function Component({
195
+ xcss,
196
+ }: {
197
+ xcss: ReturnType<
198
+ typeof XCSSProp<
199
+ 'backgroundColor' | 'color',
200
+ '&:hover' | '&:active' | '&::before' | '&::after'
201
+ >
202
+ >;
203
+ }) {
204
+ return <div data-testid="div" className={xcss} />;
205
+ }
206
+
207
+ const { getByTestId } = render(
208
+ <Component
209
+ xcss={{
210
+ color: 'var(--ds-text)',
211
+ backgroundColor: 'var(--ds-bold)',
212
+ '&:hover': {
213
+ color: 'var(--ds-text-hovered)',
214
+ backgroundColor: 'var(--ds-bold-hovered)',
215
+ },
216
+ '&:active': {
217
+ color: 'var(--ds-text-pressed)',
218
+ backgroundColor: 'var(--ds-bold-pressed)',
219
+ },
220
+ '&::before': {
221
+ color: 'var(--ds-text)',
222
+ backgroundColor: 'var(--ds-bold)',
223
+ },
224
+ '&::after': {
225
+ color: 'var(--ds-text)',
226
+ backgroundColor: 'var(--ds-bold)',
227
+ },
228
+ }}
229
+ />
230
+ );
231
+
232
+ expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
233
+ });
234
+ });
235
+ });
@@ -14,10 +14,6 @@ type EnforceSchema<TObject> = {
14
14
  : never;
15
15
  };
16
16
 
17
- type PickObjects<TObject> = {
18
- [P in keyof TObject]: TObject[P] extends Record<string, unknown> ? TObject[P] : never;
19
- };
20
-
21
17
  type CSSStyles<TSchema extends CompiledSchema> = StrictCSSProperties &
22
18
  PseudosDeclarations &
23
19
  EnforceSchema<TSchema>;
@@ -150,13 +146,7 @@ interface CompiledAPI<TSchema extends CompiledSchema> {
150
146
  requiredProperties: TAllowedProperties;
151
147
  requiredPseudos: TAllowedPseudos;
152
148
  } = never
153
- >(): Internal$XCSSProp<
154
- TAllowedProperties,
155
- TAllowedPseudos,
156
- TSchema,
157
- PickObjects<TSchema>,
158
- TRequiredProperties
159
- >;
149
+ >(): Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, TSchema, TRequiredProperties>;
160
150
  }
161
151
 
162
152
  type CompiledSchema = StrictCSSProperties & PseudosDeclarations;
package/src/index.ts CHANGED
@@ -1,16 +1,21 @@
1
1
  import { createElement } from 'react';
2
2
 
3
3
  import type { CompiledJSX } from './jsx/jsx-local-namespace';
4
- import type { CssFunction, CSSProps, CssType } from './types';
5
4
 
6
- export type { CSSProps, CssFunction, CssType };
7
-
8
- export { keyframes } from './keyframes';
9
- export { styled } from './styled';
10
5
  export { ClassNames } from './class-names';
6
+ export { createStrictAPI } from './create-strict-api';
11
7
  export { default as css } from './css';
12
8
  export { default as cssMap } from './css-map';
13
- export { createStrictAPI } from './create-strict-api';
9
+ export { keyframes } from './keyframes';
10
+ export { styled } from './styled';
11
+ export type {
12
+ CSSProperties,
13
+ CSSProps,
14
+ CSSPseudos,
15
+ CssFunction,
16
+ CssType,
17
+ StrictCSSProperties,
18
+ } from './types';
14
19
  export { type XCSSAllProperties, type XCSSAllPseudos, type XCSSProp, cx } from './xcss-prop';
15
20
 
16
21
  // Pass through the (classic) jsx runtime.
@@ -1,15 +1,15 @@
1
1
  import type * as CSS from 'csstype';
2
2
 
3
3
  import { ac } from '../runtime';
4
- import type { CSSPseudos, CSSProperties } from '../types';
4
+ import type { CSSPseudos, CSSProperties, StrictCSSProperties } from '../types';
5
5
 
6
6
  type MarkAsRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
7
7
 
8
- type XCSSItem<TStyleDecl extends keyof CSSProperties, TCompiledTypedProperty> = {
8
+ type XCSSItem<TStyleDecl extends keyof CSSProperties, TSchema> = {
9
9
  [Q in keyof CSSProperties]: Q extends TStyleDecl
10
10
  ?
11
11
  | CompiledPropertyDeclarationReference
12
- | (Q extends keyof TCompiledTypedProperty ? TCompiledTypedProperty[Q] : CSSProperties[Q])
12
+ | (Q extends keyof TSchema ? TSchema[Q] : CSSProperties[Q])
13
13
  : never;
14
14
  };
15
15
 
@@ -17,14 +17,11 @@ type XCSSPseudos<
17
17
  TAllowedProperties extends keyof CSSProperties,
18
18
  TAllowedPseudos extends CSSPseudos,
19
19
  TRequiredProperties extends { requiredProperties: TAllowedProperties },
20
- TCompiledTypedPseudo
20
+ TSchema
21
21
  > = {
22
22
  [Q in CSSPseudos]?: Q extends TAllowedPseudos
23
23
  ? MarkAsRequired<
24
- XCSSItem<
25
- TAllowedProperties,
26
- Q extends keyof TCompiledTypedPseudo ? TCompiledTypedPseudo[Q] : object
27
- >,
24
+ XCSSItem<TAllowedProperties, Q extends keyof TSchema ? TSchema[Q] : object>,
28
25
  TRequiredProperties['requiredProperties']
29
26
  >
30
27
  : never;
@@ -67,7 +64,7 @@ export type CompiledStyles<TObject> = {
67
64
  * Use in conjunction with {@link XCSSProp} to allow all properties to be given to
68
65
  * your component.
69
66
  */
70
- export type XCSSAllProperties = keyof CSSProperties;
67
+ export type XCSSAllProperties = keyof StrictCSSProperties;
71
68
 
72
69
  /**
73
70
  * Please think twice before using this type, you're better off declaring explicitly
@@ -143,24 +140,23 @@ export type XCSSProp<
143
140
  requiredProperties: TAllowedProperties;
144
141
  requiredPseudos: TAllowedPseudos;
145
142
  } = never
146
- > = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, object, TRequiredProperties>;
143
+ > = Internal$XCSSProp<TAllowedProperties, TAllowedPseudos, object, TRequiredProperties>;
147
144
 
148
145
  export type Internal$XCSSProp<
149
146
  TAllowedProperties extends keyof CSSProperties,
150
147
  TAllowedPseudos extends CSSPseudos,
151
- TCompiledTypedProperty,
152
- TCompiledTypedPseudo,
148
+ TSchema,
153
149
  TRequiredProperties extends {
154
150
  requiredProperties: TAllowedProperties;
155
151
  requiredPseudos: TAllowedPseudos;
156
152
  }
157
153
  > =
158
154
  | (MarkAsRequired<
159
- XCSSItem<TAllowedProperties, TCompiledTypedProperty>,
155
+ XCSSItem<TAllowedProperties, TSchema>,
160
156
  TRequiredProperties['requiredProperties']
161
157
  > &
162
158
  MarkAsRequired<
163
- XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TCompiledTypedPseudo>,
159
+ XCSSPseudos<TAllowedProperties, TAllowedPseudos, TRequiredProperties, TSchema>,
164
160
  TRequiredProperties['requiredPseudos']
165
161
  > &
166
162
  BlockedRules)