Styled-jsx: Document using styled-jsx with TypeScript

[rgbkrk]

How should typescript users be working with styled-jsx? There are a bunch of closed issues, all which point to #90 (which is also closed). I'd love to see some documentation in the README that outlines what TypeScript developers should be using.

Questions I'd love to have answered:

• Are we required to use typescript through babel (so the styled-jsx transform happens)?
• If we're in a full tsc setup, are there explicit calls we should use with styled-jsx directly (all the stylesheet creation steps, etc.)?

[rgbkrk]

@DanielRosenwasser -- would you see a way ahead for using styled-jsx in typescript? It uses a babel transform, comes as a built in within next.js. Ideally, we'd like to be on tsc proper without using the typescript babel setup, though we'd still need some sort of hook to happen here.

[giuseppeg]

if you can skip jsx transpilation probably you can run tsc first and then Babel with styled-jsx. Would that work? I’ve never used TypeScript so I am afraid I can’t be of much help here

[rgbkrk]

I guess that means we'd be having babel do both the react and styled-jsx portions at that point. I'm unsure we want to do that as an extra build process, especially since we have multiple components in different packages across a monorepo.

[DanielRosenwasser]

Hey all, I'm not familiar with the exact workflow here but Babel is definitely an option if there's a custom build step involved. Alternatively one could build a transform for TypeScript as well, but that's not usable from plain tsc right now. It would, however, usable from ts-loader. Not sure if that helps.

[DanielRosenwasser]

CC @weswigham for exposing transforms in tsc.

[giuseppeg]

@rgbkrk afaik there are some types for styled-jsx in definitely typed. Are the runtime pieces the problematic ones? By that I mean the following:

https://github.com/zeit/styled-jsx/tree/master/src/lib
https://github.com/zeit/styled-jsx/blob/master/src/style.js
https://github.com/zeit/styled-jsx/blob/master/src/server.js

If so somebody should just write external type definitions for them.

[rgbkrk]

We're not running into type definition issues with styled-jsx. The main issue is figuring out how we should rewrite our current suite of styled-jsx backed components and apps (ref: https://github.com/nteract/nteract/issues/3849) when we're relying on tsc.

Would there be a way for us to use the JSXStyle element directly, computing our styleId:

import Style from "styled-jsx/style";

export const Cell = props => {
  const children = props.children;
  const styleId = generateIdFromSomewhere();

  const jsxClassName = `.jsx-${styleId}`;

  return (
    <div
      className={`${jsxClassName} cell ${props.isSelected ? "focused" : ""} ${
        props._hovered ? "overrideHover" : ""
      }`}
    >
      <Style
        styleId={styleId}
        // Somehow we'd need to create this css using styled-jsx directly
        css={`
          .cell${jsxClassName} {
            position: relative;
            background: var(--theme-cell-bg, white);
            transition: all 0.1s ease-in-out;
          }
          ...more
        `}
      />
      {children}
    </div>
  );
};

[giuseppeg]

yes you could do that. styleId is an hash of the css string. In production you should pass an array of rules to css to get all the optimizations. You can use styled-jsx/lib/style-transform to rewrite the selectors, obviously this would happen at runtime (we instead do that at compile time with Babel). If you are brave and willing to write a small library you could steal this idea of mine https://twitter.com/giuseppegurgone/status/1059009092709167104 even

[rgbkrk]

It turned out to be much easier for us to switch over to styled-components, so we've done just that. Thanks for styled-jsx over the last couple years!