update types, improve composition

implydata · Jul 22, 2021 · 7537ebc · 7537ebc
1 parent ba17840
commit 7537ebc
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts
@@ -73,6 +73,14 @@ global({
 
 const PotatoButton = css({
 	variants: {
+		peace: {
+			mercy: {
+				color: 'MediumOrchid',
+			},
+			trust: {
+				color: 'Turquoise',
+			},
+		},
 		variant: {
 			blue: {
 				backgroundColor: '$gray100',
@@ -92,7 +100,11 @@ const PotatoButton = css({
 	],
 })
 
-const two = css({
+PotatoButton({
+	peace: 'mercy',
+})
+
+const two = css(PotatoButton, {
 	$$max: '2px',
 	width: '$$max',
 	variants: {
@@ -119,8 +131,14 @@ const two = css({
 	],
 })
 
-two({ variant: 'green' })
-two({ variant: 'red' })
+two({
+
+})
+
+// two({
+// 	variant: 'red'
+// })
+
 // two({ variant: 'blue' })
 
 // type test = StitchesVariants<typeof PotatoButton>

diff --git a/packages/core/types/core.d.ts b/packages/core/types/core.d.ts
@@ -196,17 +196,17 @@ export interface CreatedCss<
 	/** Returns a function that applies styles and variants for a specific class. */
 	css: {
 		<
-			Variant extends {
+			Variants extends {
 				[name in string]: {
 					[pair in index]: Style<C>
 				}
 			},
-			Args extends Variant[]
+			Args extends Variants[]
 		>(
 			...composers: {
 				[K in keyof Args]:
 				| {
-					[IS_COMPONENT]: true
+					[$$VARIANTS]: Args[K]
 				}
 				| (
 					& OmitKey<Style<C>, 'variants'>
@@ -216,7 +216,7 @@ export interface CreatedCss<
 						 *
 						 * @see https://stitches.dev/docs/variants
 						 */
-						variants?: Args[K] | Variant,
+						variants?: Args[K] | Variants,
 						compoundVariants?: (
 							& {
 								[Name in Exclude<keyof Args[K], 'css'>]?: Widen<keyof Args[K][Name]>
@@ -262,7 +262,7 @@ export interface CreatedCss<
 			className: string
 			selector: string
 
-			[IS_COMPONENT]: true
+			[$$VARIANTS]: Variants
 		}
 	}
 
@@ -271,9 +271,9 @@ export interface CreatedCss<
 	}
 }
 
-declare const IS_COMPONENT: unique symbol
+declare const $$VARIANTS: unique symbol
 
-type IS_COMPONENT = typeof PrivatePropertyValue
+type $$VARIANTS = typeof PrivatePropertyValue
 
 /* ========================================================================== */
 

diff --git a/packages/react/types/styled.d.ts b/packages/react/types/styled.d.ts
@@ -196,23 +196,27 @@ export interface CreatedCss<
 	/** Returns a function that applies styles and variants for a specific class. */
 	css: {
 		<
-			Variant extends {
+			Variants extends {
 				[name in string]: {
 					[pair in index]: Style<C>
 				}
 			},
-			Args extends Variant[]
+			Args extends Variants[]
 		>(
 			...composers: {
-				[K in keyof Args]: (
+				[K in keyof Args]:
+				| {
+					[$$VARIANTS]: Args[K]
+				}
+				| (
 					& OmitKey<Style<C>, 'variants'>
 					& {
 						/**
 						 * Variants configure conditional styles of the component.
 						 *
 						 * @see https://stitches.dev/docs/variants
 						 */
-						variants?: Args[K] | Variant,
+						variants?: Args[K] | Variants,
 						compoundVariants?: (
 							& {
 								[Name in Exclude<keyof Args[K], 'css'>]?: Widen<keyof Args[K][Name]>
@@ -257,23 +261,25 @@ export interface CreatedCss<
 		) & {
 			className: string
 			selector: string
+
+			[$$VARIANTS]: Variants
 		}
 	}
 
 	/** Returns a function that applies styles and variants for a specific class. */
 	styled: {
 		<
-			Variant extends {
+			Variants extends {
 				[name in string]: {
 					[pair in index]: Style<C>
 				}
 			},
-			Args extends Variant[]
+			Args extends Variants[]
 		>(
 			...composers: {
 				[K in keyof Args]:
 				| {
-					[IS_COMPONENT]: true
+					[$$VARIANTS]: Args[K]
 				}
 				| (
 					& OmitKey<Style<C>, 'variants'>
@@ -283,7 +289,7 @@ export interface CreatedCss<
 						 *
 						 * @see https://stitches.dev/docs/variants
 						 */
-						variants?: Args[K] | Variant,
+						variants?: Args[K] | Variants,
 						compoundVariants?: (
 							& {
 								[Name in Exclude<keyof Args[K], 'css'>]?: Widen<keyof Args[K][Name]>
@@ -329,7 +335,7 @@ export interface CreatedCss<
 			className: string
 			selector: string
 
-			[IS_COMPONENT]: true
+			[$$VARIANTS]: Variants
 		}
 	}
 
@@ -338,9 +344,9 @@ export interface CreatedCss<
 	}
 }
 
-declare const IS_COMPONENT: unique symbol
+declare const $$VARIANTS: unique symbol
 
-type IS_COMPONENT = typeof PrivatePropertyValue
+type $$VARIANTS = typeof PrivatePropertyValue
 
 /* ========================================================================== */