styled, etc from createStitches are any (pnpm, esm, monorepo)

[a-type]

Bug report

Describe the bug

Using ESM / "Node next" module resolution, I'm encountering issues where TS knows how to type createStitches, but fails to get the typings of any of the produced tools.

I believe this is due to using moduleResolution: 'node16' in TypeScript and/or "type": "module" in my app's package.json. Might be related to how that works with other tsconfig options.

I have a minimal repro which produces the problem locally here: https://github.com/a-type/stitches-esm-repro.

If you click through to the definition of createStitches, then follow up to the referenced StitchesConfig defintion, VS Code's Typescript can't follow the module reference.

TS can't follow the import of ./config from @stitches/react/types/index.d.ts. Since it can't reach that file, it can't provide typings for any of my components using styled, etc.

I believe this could be because with ESM rules it expects ./config.js as the module path, since file extensions are now mandatory.

My tsconfig is roughly:

{
  "compilerOptions": {
    "target": "es2017",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ES2022",
    "moduleResolution": "Node16",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "rootDir": ".",
    "baseUrl": "."
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

In my main app it's more complex, but this seems to reproduce the problem.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone https://github.com/a-type/stitches-esm-repro
2. pnpm install
3. Open src/App.tsx
4. Check TS typing of Button or styled. My editor says any.

Expected behavior

styled, etc are typed correctly and produce fully typed components.

Screenshots

System information

• OS: Windows 11
• Browser (if applies) N/A
• Version of Stitches: 1.2.8
• Version of Node.js: 16.13.0
• Typescript: 4.8.2

Additional context

Add any other context about the problem here.

[a-type]

I believe this is the root cause: microsoft/TypeScript#50482

[a-type]

Noticed your code is using extensions for imports, so not that. I believe the actual cause is that the emitted type declaration files don't use extensions, possibly because they were generated from a non ESM build... can the declaration file build be updated to use ESM resolution?

Edit: just realized the dts are handrolled. I'll submit a PR to add extensions to fix this problem!