Theme issue in a Typescript Monorepo

[sleepyArpan]

I faced an issue with a typescript monorepo and theming using styled components, where if the project has a root tsconfig and we declare individual themes in each package, typescript expects all the themes to be exactly the same i.e. you cannot have multiple different themes in different packages. I have created a minimal reproduction using CRA and Yarn workspaces here. When you clone the repository and install all the dependencies locally and open the project in an editor, you would see that the theme from one app expects the keys from the theme of the other app. Is there any way to solve this?

[benoitdeziel]

Have you tried using a tsconfig file in each package? If you define the rootDir in each package it could fix your problem.

[benoitdeziel]

You can try the code in this PR sleepyArpan/styled-components-monorepo-react-ts-repro#1

[sleepyArpan]

Thanks for this @benoitdeziel , I merged your pull request. The typecheck command still fails in the root after adding individual tsconfigs for each package although VSCode does not complain anymore. Any clue why this is happening?

[benoitdeziel]

I think the best way to handle this would be to add the typecheck script to each package.json. In your your package.json you could then call each of the packages typecheck script. I would recommend a tool for monorepos such as Lerna and/or NX

[quantizor]

In a TypeScript monorepo, DefaultTheme module augmentation is global — all packages share the same augmented type. This is a TypeScript limitation, not a styled-components one.

Solutions:

1. Shared theme type: Define one DefaultTheme augmentation in a shared package that all apps use. Each app can then provide different values conforming to the same shape.

2. Per-package tsconfig: Ensure each package has its own tsconfig.json with a distinct rootDir and doesn't include declaration files from sibling packages.

3. Generic wrapper: Instead of augmenting DefaultTheme, use a generic wrapper that types the theme per-component:

const themed = <T extends object>(fn: (theme: T) => string) => fn;

Option 1 (shared theme shape, different values) is the recommended approach.