TS compile time $token substitution

cssvalue.ts

const theme = {
    color: 'blue',
    padding: '1px 2px',
    margin: '2px $padding $size',
    size: '3rem'
} as const

type CSSSingleVarToken<S extends string> = S extends `$${infer _} ${infer _}` 
    ? never 
    : S extends `$${infer K}`
        ? K extends keyof typeof theme
            ? CSSValue<typeof theme[K]>
            : S
        : never

type CSSValue<S extends string> = 
    S extends CSSSingleVarToken<S>
        ? CSSSingleVarToken<S>
        : S extends `${infer L}$${infer M} ${infer R}`
            ? `${L}${CSSSingleVarToken<`$${M}`>} ${CSSValue<R>}`
            : S extends `${infer L}$${infer R}` 
                ? `${L}${CSSSingleVarToken<`$${R}`>}`
                : S

// TEST CSSSingleVarToken
'$foo$bar' satisfies CSSSingleVarToken<'$foo$bar'>      // PASS
'$foo $bar' satisfies CSSSingleVarToken<'$foo $bar'>    // FAIL
'blue' satisfies CSSSingleVarToken<'$color'>            // PASS
'red' satisfies CSSSingleVarToken<'$color'>             // FAIL

// TEST CSSValue
'blue $2$color 1px 2px' satisfies CSSValue<'$color $2$color $padding'>  // PASS
'1px 2px 2px 1px 2px 3rem' satisfies CSSValue<'$padding $margin'>       // PASS
'red' satisfies CSSValue<'$color'>                                      // FAIL
'no vars' satisfies CSSValue<'no vars'>                                 // PASS