4.8.2: Type serialization error with unique symbol

Bug Report

Original issue: https://github.com/stitchesjs/stitches/issues/1078

When two types refer to the same unique symbol and they are combined via inference, exporting the inferred type results in a 4118 serialization error.

🔎 Search Terms

Unique symbol, serialized, error, 4118

🕗 Version & Regression Information

• This changed between versions 4.7.4 and 4.8.2

⏯ Playground Link

// @filename: node_modules/@types/foo/symbols.d.ts
/** Unique symbol used to reference a property value. */
export declare const $$Sym: unique symbol;

/** Unique symbol used to reference a property value. */
export type $$Sym = typeof $$Sym;

// @filename: node_modules/@types/foo/properties.d.ts
export interface CSSProperties {
    a?: 'a';
    b?: 'b';
    c?: 'c';
}

// @filename: node_modules/@types/foo/stitches.d.ts
import type { $$Sym } from './symbols';
import type { CSSProperties } from './properties';

type ValueByPropertyName<PropertyName> = PropertyName extends keyof CSSProperties ? CSSProperties[PropertyName] : never

export type CSS<Utils = {}> =
    {
        [K in keyof Utils as K extends keyof CSSProperties ? never : K]?: Utils[K] extends (arg: infer P) => any
        ? (
            $$Sym extends keyof P
            ? (ValueByPropertyName<P[$$Sym]> | undefined)
            : never
        )
        : never
    }
    & {
        [K in keyof CSSProperties]: CSSProperties[K]
    }


export interface Stitches<Utils extends {} = {}> {
    css<
        Composers extends (string | { [name: string]: unknown })[],
        C = CSS<Utils>
    >(...composers: { [K in keyof Composers]: C }): unknown
}

export declare function createStitches<Utils extends {} = {}>(config?: { utils?: Utils }): Stitches<Utils>;

// @filename: node_modules/@types/foo/index.d.ts
import type { CSS } from './stitches';
export { createStitches } from './stitches';

import type { $$Sym } from './symbols';
import type { CSSProperties } from './properties';

export type PropertyValue<Property extends keyof CSSProperties, Config = null> = (
    Config extends null
    ? { readonly [K in $$Sym]: Property }
    : Config extends { [K: string]: any }
    ? CSS<Config['utils']>[Property]
    : never
)

// @filename: test.ts
// @showEmit: true
// @showEmittedFile: test.js
// @declaration: true
// @errors: 4118

import { createStitches } from 'foo';
import type * as Foo from 'foo';

export const { css } = createStitches({ // <- Error in 4.8.2 and above
    utils: {
        d: (value: Foo.PropertyValue<'c'>) => ({
            d: value
        }),
    }
})

const foo = css({
    c: 'c',
    d: 'c'
})

Workbench Repro

🙁 Actual behavior

Error: The type of this node cannot be serialized because its property ‘[$$Sym]’ cannot be serialized.(4118)

🙂 Expected behavior

No error.

[testavenger]

When will this issue be fixed

[jgoz]

Thanks @jakebailey that looks directly related.

This is the workaround I used to solve the linked issue.

type WithPropertyValue<P> = {
  readonly [K in $$Sym]: P
}

export type PropertyValue<Property extends keyof CSSProperties, Config = null> = (
    Config extends null
    ? WithPropertyValue<Property>
    : Config extends { [K: string]: any }
    ? CSS<Config['utils']>[Property]
    : never
)

This avoids serializing the late-bound name ($$Sym) altogether because WithPropertyValue is rewritten as import('./path/to').WithPropertyValue<Property>.

If this is the only path forward, it seems like an acceptable tradeoff, especially given the complexity of the types in this library. I mostly wanted to validate that this was a deliberate change and not a regression.