css-in-tsx.tsx

/* eslint-disable */

// https://github.com/Chronstruct/display-primitives/issues/1#issuecomment-1518496207

// declare global {
//   namespace JSX {
//     interface IntrinsicElements<T extends string> {
//       input: React.DetailedHTMLProps<
//         React.InputHTMLAttributes<HTMLInputElement>,
//         HTMLInputElement
//       > &
//         CSSProps<T>;
//     }
//   }
// }

// declare global {
//   namespace JSX {
//     interface IntrinsicElements<T extends string> {
//       [
//         name: keyof JSXReact.IntrinsicElements<T>
//       ]: JSXReact.IntrinsicElements<T>[name] & CSSProps<T>;
//     }
//   }
// }

// declare global {
//   namespace JSX {
//     type ElementType<
//       P = any,
//       Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
//     > =
//       | ({ [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag] & CSSProps<P['css']>)
//       | ComponentType<P>;
//   }
// }

// type Vars<
//   T extends string,
//   Acc extends string = never,
// > = T extends `${string}var(--${infer Var})${infer Rest}`
//   ? Vars<Rest, Acc | Var>
//   : Acc;

// type CSSProp<T extends string> = { css?: T } & {
//   [K in `css:${Vars<T>}`]: string;
// };

// type CSSProps<T extends CSSProp<any>> = Omit<T, 'css'> & CSSProp<T extends {css: infer T extends string} ? T : never>

// function Test<T extends CSSProp<any>>(props: CSSProps<T>) {
//   return <></>;
// }

type Vars<
  T extends string,
  Acc extends string = never,
> = T extends `${string}var(--${infer Var})${infer Rest}`
  ? Vars<Rest, Acc | Var>
  : Acc;

type CSSProps<T extends string> = { css?: T } & {
  [K in `css:${Vars<T>}`]: string;
};

function Test<T extends string>(props: CSSProps<T>) {
  return <></>;
}

export default () => (
  <>
    <Test
      css={`
        color: var(--my-super-color);
      `}
      c
    />
    <input
      css={`
        color: var(--my-super-color);
      `}
      css:my-super-color="red"
    />
  </>
);