[@emotion/styled] styled() function props argument losing typing.

[enrique-ramirez]

Current behavior:
@emotion/styled is losing its typing on the props object.

import styled from "@emotion/styled";

import { theme } from "../../theme";
import type { Props, Variant } from "./Typography.types";

const getStyles = (variant: Variant | undefined) =>
  theme.typography[variant as Variant] || {};

const StyledTypography = styled("p")<Props>(
  {
    margin: "0 1px",
  },
  (props) => ({
    ...getStyles(props.variant),
    "text-align": props.align,
  })
);

export { StyledTypography };

This seems to be a rule in tsconfig's compilerOptions, but I have not been able to pinpoint the exact root. I've tried adding them one by one and it seems to happen at random rules (it doesn't always break at the same one). As far as I can tell, this happens when I use the extends option on tsconfig.

To reproduce:

Requirements: pnpm installed. I'm not entirely sure if it's relevant (it MIGHT be), but that's what the project uses.

1. Clone this github repo: https://github.com/enrique-ramirez/turborepo-starter
2. Run pnpm i to install dependencies.
3. cd packages/ui-tools & pnpm test:typescript. Alternatively, just open packages/ui-tools/src/components/Typography.styled.tsx on your TS configured editor and check the props object.

Expected behavior:

@emotion/styled passes all types to the props argument.

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.4
• @emotion/styled version: 11.10.4

Notes:
Some things that are particular to this repo that may be related:

• This is a monorepo managed by pnpm's workspaces. This means that, inside packages/ui-tools, there may be symlinks on packages.
• The packages/ui-tools/tsconfig.json file extends packages/tsconfig/react.json which, in turn, extends from packages/tsconfig/base.json. I've tried to not extend and it works. You'd think this means my configuration is wrong, and it may very well be. However, only styled breaks (at least from what I can tell) and even extending tsconfig.json files with an empty compilerOptions key breaks. So just using extends is enough to make this break.
• Sometimes, while tweaking the tsconfig.json files (be it the one inside ui-tools, or the ones inside packages/tsconfig folder), the error disappears. I've tried restoring each compilerOptions rule one by one and it randomly breaks on random rules (not been able to pinpoint the exact one). When this happens, even an empty compilerOptions object is not enough to restore it sometimes.

Sorry for the lengthy explanation! Hope I was clear enough.

[srmagura]

I commented out this line from packages/tsconfig/base.json and it started working:

    "preserveSymlinks": true,

tsc (in the ui-tools folder) now reports 2 errors which are both legit.

preserveSymlinks in the TypeScript docs

I'm not exactly sure why that option was causing the behavior you observed, but FWIW, I have never used this compiler option, and I would not recommend using it unless you have a compelling reason to do so.

[enrique-ramirez]

@srmagura Hi! Thanks for the prompt reply. You are right, removing it did fix my issue (though caused some others on some other areas of my project).

I was able to work around my issues, but it does seem that "preserveSymlinks": true, breaks the types on styled. Would this be something worth documenting for future reference?

[enrique-ramirez]

So after creating a quick vite project with pnpm and typescript react (both technologies/settings I had on my original setup), I tested the issue and it's working without problems with both preserveSymlinks set to true and false (or just out of the config altogether).

Seems this is an issue when symlinks are actually present one way or the other on the project, which is a common thing on monorepos. I believe that on my original reproduction repo (the monorepo), the @emotion/styled package was hoisted to the root of the project and symlinked inside ui-tools. This, plus the preserveSymlinks rule caused the issue. Quite a bizarre thing to happen.

Wether this may be worth investigating further or not I'll leave to you (and the community!) but since there doesn't seem to be much interest, I think this is as far as we go for now.

I'll be back here if I run into more issues without preserveSymlinks and try to update with why I need the rule and hopefully with a better understanding of this issue.

Thanks once more for your time (and the effort you put on emotion!), @srmagura ! Hope this is useful to others, too!

[enrique-ramirez]

Sorry for the spam. Scratch my above comment, I had a typo on my code and didn't see the issue.

It does seem to break.

Here's the minimal repo: https://github.com/enrique-ramirez/emotion-bug

Just do pnpm i && pnpm test. It'll break. Removing the preserveSymlinks option from tsconfig solves the issue.

[srmagura]

Thanks for that repro project. I simplified it even further here: https://github.com/srmagura/emotion-pnpm-repro. And disabled the skipLibCheck option so we can get more information.

If you run tsc, you will see errors such as

node_modules/@emotion/styled/types/base.d.ts:12:8 - error TS2307: Cannot find module '@emotion/serialize' or its corresponding type declarations.

And this is what my node_modules looks like: (the arrows indicate symbolic links)

Notice that @emotion/serialize is not there. Presumably it is in pnpm's global store. To find @emotion/serialize, TypeScript needs to resolve @emotion/serialize relative to the destination of the @emotion/styled symlink. That is why "preserveSymlinks": true causes the compilation to break.

[enrique-ramirez]

Hi @srmagura. Thanks for the investigation! I attempted to install @emotion/serialize as a devDependency and it seems to do the trick. Not sure if this is a proper solution or just a workaround, but seems to work.

Thanks!

[srmagura]

Definitely a workaround 😉. You're welcome!