SolidJS Support

[thdxr]

I've been using Stitches with SolidJS using my own partial implementation of the styled function. Solid is extremely similar to React API wise so it is pretty easy.

I started to look into implementing it correctly using proper types and it might be faster for someone already familiar with the React typings to implement it.

A very naive implementation looks like this but doesn't support anything like variants

export function styled<T extends keyof JSX.IntrinsicElements, P>(
  tag: T | Component<P>,
  styles: CSS
) {
  const style = css(styles);
  type Props = typeof tag extends T
    ? JSX.IntrinsicElements[T]
    : PropsWithChildren<P>;
  return function(props: PropsWithStyle<Props>) {
    const classedProps = mergeProps(props, {
      className: style().className
    });
    if (typeof tag === "function") {
      return tag(classedProps as any);
    }
    const el = document.createElement(tag);
    spread(el, classedProps);
    return el;
  };
}

[thdxr]

Ended up digging through the types myself and getting it working. Should something like this be an external library or would you want it in core?

Working implementation here: https://github.com/thdxr/stitches/commit/8fff6e4126d3c97ae88880a2028f6d24d5f66490

[jonathantneal]

If you are interested in submitting a PR, it could be package that lives alongside core and react. I would certainly consider it.