From 4f7196f18a17d020da9202ba3a0ab8288b53bdfc Mon Sep 17 00:00:00 2001 From: Pearce Ropion Date: Sun, 8 Mar 2026 23:41:48 -0700 Subject: [PATCH] Remove nested media types --- packages/core/types/css-util.d.ts | 9 ++---- packages/core/types/index.d.ts | 4 +-- packages/core/types/stitches.d.ts | 14 ++++----- packages/core/types/styled-component.d.ts | 23 --------------- packages/react/types/css-util.d.ts | 9 ++---- packages/react/types/index.d.ts | 4 +-- packages/react/types/stitches.d.ts | 26 ++++++++--------- packages/react/types/styled-component.d.ts | 33 +++------------------- 8 files changed, 30 insertions(+), 92 deletions(-) diff --git a/packages/core/types/css-util.d.ts b/packages/core/types/css-util.d.ts index 5452ca4a..8dd9294c 100644 --- a/packages/core/types/css-util.d.ts +++ b/packages/core/types/css-util.d.ts @@ -14,17 +14,12 @@ type TokenByPropertyName = PropertyName extends k type TokenByScaleName = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never -/** Returns a Style interface, leveraging the given media and style map. */ +/** Returns a Style interface, leveraging the given style map. */ export type CSS< - Media = {}, Theme = {}, ThemeMap = Config.DefaultThemeMap, Utils = {}, > = ( - // nested at-rule css styles - & { - [K in Util.Prefixed<'@', keyof Media>]?: CSS - } // known property styles & { [K in keyof CSSProperties as K extends keyof Utils ? never : K]?: ( @@ -95,7 +90,7 @@ export type CSS< [K: string]: ( | number | string - | CSS + | CSS | {} | undefined ) diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index 3945a2f7..ec4c0a9b 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -24,7 +24,6 @@ export type CSS< utils: {} } > = CSSUtil.CSS< - Config['media'], Config['theme'], Config['themeMap'], Config['utils'] @@ -39,7 +38,6 @@ export type PropertyValue : Config extends { [K: string]: any } ? CSSUtil.CSS< - Config['media'], Config['theme'], Config['themeMap'], Config['utils'] @@ -59,7 +57,7 @@ export type ScaleValue = ( ) /** Returns a type that suggests variants from a component as possible prop values. */ -export type VariantProps = StyledComponent.TransformProps +export type VariantProps = Component[StyledComponent.$$StyledComponentProps] /** Map of CSS properties to token scales. */ export declare const defaultThemeMap: DefaultThemeMap diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/stitches.d.ts index fa8d4d51..e09d2ebf 100644 --- a/packages/core/types/stitches.d.ts +++ b/packages/core/types/stitches.d.ts @@ -9,7 +9,7 @@ export type RemoveIndex = {[k in keyof T as string extends k ? never : number export interface CssFunctionType { >(...composers: { + })[], CSS = CSSUtil.CSS>(...composers: { [K in keyof Composers]: ( // Strings and Functions can be skipped over string extends Composers[K] ? Composers[K] : Composers[K] extends string | Util.Function ? Composers[K] : RemoveIndex & { @@ -41,7 +41,7 @@ export interface CssFunctionType, StyledComponent.StyledComponentProps, Media, CSS> + }): StyledComponent.CssComponent, StyledComponent.StyledComponentProps, CSS> } /** Stitches interface. */ @@ -82,11 +82,11 @@ export default interface Stitches< ? CSSUtil.Native.AtRule.FontFace | Array : K extends `@keyframes ${string}` ? { - [KeyFrame in string]: CSSUtil.CSS + [KeyFrame in string]: CSSUtil.CSS } : K extends `@property ${string}` ? CSSUtil.Native.AtRule.Property - : CSSUtil.CSS + : CSSUtil.CSS ) } )[] @@ -96,7 +96,7 @@ export default interface Stitches< }, keyframes: { (style: { - [offset: string]: CSSUtil.CSS + [offset: string]: CSSUtil.CSS }): { (): string name: string @@ -174,8 +174,8 @@ export default interface Stitches< componentId?: string displayName?: string shouldForwardStitchesProp?: (prop: 'css' | (string & {})) => boolean | void - }) => CssFunctionType - } & CssFunctionType + }) => CssFunctionType + } & CssFunctionType } type ThemeTokens = { diff --git a/packages/core/types/styled-component.d.ts b/packages/core/types/styled-component.d.ts index b909280e..3991b9bc 100644 --- a/packages/core/types/styled-component.d.ts +++ b/packages/core/types/styled-component.d.ts @@ -4,12 +4,10 @@ import type * as Util from './util.js' export interface CssComponent< Type = 'span', Props = {}, - Media = {}, CSS = {} > { ( props?: - & TransformProps & { css?: CSS } @@ -27,21 +25,6 @@ export interface CssComponent< [$$StyledComponentType]: Type [$$StyledComponentProps]: Props - [$$StyledComponentMedia]: Media -} - -export type TransformProps = { - [K in keyof Props]: ( - | Props[K] - | ( - & { - [KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K] - } - & { - [KMedia in string]: Props[K] - } - ) - ) } /** Unique symbol used to reference the type of a Styled Component. */ @@ -56,12 +39,6 @@ export declare const $$StyledComponentProps: unique symbol /** Unique symbol used to reference the props of a Styled Component. */ export type $$StyledComponentProps = typeof $$StyledComponentProps -/** Unique symbol used to reference the media passed into a Styled Component. */ -export declare const $$StyledComponentMedia: unique symbol - -/** Unique symbol used to reference the media passed into a Styled Component. */ -export type $$StyledComponentMedia = typeof $$StyledComponentMedia - /** Returns the first Styled Component type from the given array of compositions. */ export type StyledComponentType = ( T[0] extends never diff --git a/packages/react/types/css-util.d.ts b/packages/react/types/css-util.d.ts index 5452ca4a..8dd9294c 100644 --- a/packages/react/types/css-util.d.ts +++ b/packages/react/types/css-util.d.ts @@ -14,17 +14,12 @@ type TokenByPropertyName = PropertyName extends k type TokenByScaleName = ScaleName extends keyof Theme ? Util.Prefixed<'$', keyof Theme[ScaleName]> : never -/** Returns a Style interface, leveraging the given media and style map. */ +/** Returns a Style interface, leveraging the given style map. */ export type CSS< - Media = {}, Theme = {}, ThemeMap = Config.DefaultThemeMap, Utils = {}, > = ( - // nested at-rule css styles - & { - [K in Util.Prefixed<'@', keyof Media>]?: CSS - } // known property styles & { [K in keyof CSSProperties as K extends keyof Utils ? never : K]?: ( @@ -95,7 +90,7 @@ export type CSS< [K: string]: ( | number | string - | CSS + | CSS | {} | undefined ) diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts index a8cc8ccd..6fa76e7c 100644 --- a/packages/react/types/index.d.ts +++ b/packages/react/types/index.d.ts @@ -24,7 +24,6 @@ export type CSS< utils: {} } > = CSSUtil.CSS< - Config['media'], Config['theme'], Config['themeMap'], Config['utils'] @@ -39,7 +38,6 @@ export type PropertyValue : Config extends { [K: string]: any } ? CSSUtil.CSS< - Config['media'], Config['theme'], Config['themeMap'], Config['utils'] @@ -59,7 +57,7 @@ export type ScaleValue = ( ) /** Returns a type that suggests variants from a component as possible prop values. */ -export type VariantProps = StyledComponent.TransformProps +export type VariantProps = Component[StyledComponent.$$StyledComponentProps]; /** Map of CSS properties to token scales. */ export declare const defaultThemeMap: DefaultThemeMap diff --git a/packages/react/types/stitches.d.ts b/packages/react/types/stitches.d.ts index 5aedb89f..c546c8eb 100644 --- a/packages/react/types/stitches.d.ts +++ b/packages/react/types/stitches.d.ts @@ -6,10 +6,10 @@ import type * as Util from './util' /** Remove an index signature from a type */ export type RemoveIndex = {[k in keyof T as string extends k ? never : number extends k ? never : k]: T[k]} -export interface CssFunctionType { +export interface CssFunctionType { >(...composers: { + })[], CSS = CSSUtil.CSS>(...composers: { [K in keyof Composers]: ( // Strings and Functions can be skipped over string extends Composers[K] ? Composers[K] : Composers[K] extends string | Util.Function ? Composers[K] : RemoveIndex & { @@ -41,13 +41,13 @@ export interface CssFunctionType, StyledComponent.StyledComponentProps, Media, CSS> + }): StyledComponent.CssComponent, StyledComponent.StyledComponentProps, CSS> } -export interface StyledFunctionType { +export interface StyledFunctionType { | Util.Function, Composers extends (string | React.ComponentType | Util.Function | { [name: string]: unknown - })[], CSS = CSSUtil.CSS>(type: Type, ...composers: { + })[], CSS = CSSUtil.CSS>(type: Type, ...composers: { [K in keyof Composers]: ( // Strings, React Components, and Functions can be skipped over string extends Composers[K] ? Composers[K] : Composers[K] extends string | React.ComponentType | Util.Function ? Composers[K] : RemoveIndex & { @@ -79,7 +79,7 @@ export interface StyledFunctionType, Media, CSSUtil.CSS> + }): StyledComponent.StyledComponent, CSSUtil.CSS> } /** Stitches interface. */ @@ -120,11 +120,11 @@ export default interface Stitches< ? CSSUtil.Native.AtRule.FontFace | Array : K extends `@keyframes ${string}` ? { - [KeyFrame in string]: CSSUtil.CSS + [KeyFrame in string]: CSSUtil.CSS } : K extends `@property ${string}` ? CSSUtil.Native.AtRule.Property - : CSSUtil.CSS + : CSSUtil.CSS ) } )[] @@ -134,7 +134,7 @@ export default interface Stitches< }, keyframes: { (style: { - [offset: string]: CSSUtil.CSS + [offset: string]: CSSUtil.CSS }): { (): string name: string @@ -212,15 +212,15 @@ export default interface Stitches< componentId?: string displayName?: string shouldForwardStitchesProp?: (prop: 'css' | (string & {})) => boolean | void - }) => CssFunctionType - } & CssFunctionType + }) => CssFunctionType + } & CssFunctionType styled: { withConfig: (config: { componentId?: string displayName?: string shouldForwardStitchesProp?: (prop: 'css' | (string & {})) => boolean | void - }) => StyledFunctionType - } & StyledFunctionType + }) => StyledFunctionType + } & StyledFunctionType } type ThemeTokens = { diff --git a/packages/react/types/styled-component.d.ts b/packages/react/types/styled-component.d.ts index 415c73eb..0e772844 100644 --- a/packages/react/types/styled-component.d.ts +++ b/packages/react/types/styled-component.d.ts @@ -8,14 +8,13 @@ export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements; export interface StyledComponent< Type = 'span', Props = {}, - Media = {}, CSS = {} > extends React.ForwardRefExoticComponent< Util.Assign< Type extends IntrinsicElementsKeys | React.ComponentType ? React.ComponentPropsWithRef : never, - TransformProps & { css?: CSS } + Props & { css?: CSS } > > { ( @@ -23,7 +22,7 @@ export interface StyledComponent< Type extends IntrinsicElementsKeys | React.ComponentType ? React.ComponentPropsWithRef : {}, - TransformProps & { + Props & { as?: never, css?: CSS } @@ -33,11 +32,11 @@ export interface StyledComponent< < C extends CSS, As extends string | React.ComponentType = Type extends string | React.ComponentType ? Type : any, - InnerProps = Type extends StyledComponent ? IP : {}, + InnerProps = Type extends StyledComponent ? IP : {}, >( props: Util.Assign< React.ComponentPropsWithRef ? As : never>, - TransformProps, Media> & { + Util.Assign & { as?: As, css?: { [K in keyof C]: K extends keyof CSS ? CSS[K] : never @@ -51,19 +50,16 @@ export interface StyledComponent< [$$StyledComponentType]: Type [$$StyledComponentProps]: Props - [$$StyledComponentMedia]: Media } /** Returns a new CSS Component. */ export interface CssComponent< Type = 'span', Props = {}, - Media = {}, CSS = {} > { ( props?: - & TransformProps & { css?: CSS } @@ -81,21 +77,6 @@ export interface CssComponent< [$$StyledComponentType]: Type [$$StyledComponentProps]: Props - [$$StyledComponentMedia]: Media -} - -export type TransformProps = { - [K in keyof Props]: ( - | Props[K] - | ( - & { - [KMedia in Util.Prefixed<'@', 'initial' | keyof Media>]?: Props[K] - } - & { - [KMedia in string]: Props[K] - } - ) - ) } /** Unique symbol used to reference the type of a Styled Component. */ @@ -110,12 +91,6 @@ export declare const $$StyledComponentProps: unique symbol /** Unique symbol used to reference the props of a Styled Component. */ export type $$StyledComponentProps = typeof $$StyledComponentProps -/** Unique symbol used to reference the media passed into a Styled Component. */ -export declare const $$StyledComponentMedia: unique symbol - -/** Unique symbol used to reference the media passed into a Styled Component. */ -export type $$StyledComponentMedia = typeof $$StyledComponentMedia - /** Returns a narrowed JSX element from the given tag name. */ type IntrinsicElement = TagName extends IntrinsicElementsKeys ? TagName : never