-
Notifications
You must be signed in to change notification settings - Fork 265
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Document using styled-jsx with TypeScript #532
Comments
@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 |
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 |
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. |
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 |
CC @weswigham for exposing transforms in tsc. |
@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 If so somebody should just write external type definitions for them. |
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: nteract/nteract#3849) when we're relying on Would there be a way for us to use the 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>
);
}; |
yes you could do that. |
It turned out to be much easier for us to switch over to |
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:
tsc
setup, are there explicit calls we should use with styled-jsx directly (all the stylesheet creation steps, etc.)?The text was updated successfully, but these errors were encountered: