callstack / callstack/react-theme-provider

TS doesn't see props after «styled()» of «withTheme(styled.button`...`)»

Open
#130 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
467
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Linking with https://github.com/callstack/linaria/issues/893

## Environment

* macOS Monterrey
* yarn 3 (PnP)
* TS 4.5.2
* "@linaria/core": "^3.0.0-beta.15",
* "@linaria/react": "^3.0.0-beta.15",
* "@linaria/babel-preset": "^3.0.0-beta.15",
* "@linaria/shaker": "^3.0.0-beta.15",
* "@linaria/webpack-loader": "^3.0.0-beta.16",
* "@callstack/react-theme-provider": "^3.0.7",
* bundler - storybook@6
* node 14.17.6

## Description

```ts
export const Select = () => (

);

const Button = withTheme(styled.button`
width: 100%;
`);

export const OptionButton = styled(Button)`
width: 50%;
`;
```
![image](https://user-images.githubusercontent.com/14236476/147383113-585a732c-c430-457d-ab9e-1887d8d3836b.png)

![image](https://user-images.githubusercontent.com/14236476/147383138-1f1174a0-703f-40e8-b648-d2fc0fec343a.png)

If I add Button directly - no error
![image](https://user-images.githubusercontent.com/14236476/147383131-b47c084e-e3f2-41b7-b542-62f6f029881d.png)

If I remove `withTheme` - no error too
![image](https://user-images.githubusercontent.com/14236476/147383160-57b5fdb7-da88-481e-a422-e39773c13036.png)

## Reproducible Demo

https://codesandbox.io/s/wild-grass-g4e0u?file=/src/App.tsx

Contributor guide

Open the contributing guide

Research direction

Start with the reproducible CodeSandbox and compare the cases where Button is used directly or withTheme is removed. Trace how TypeScript infers props through styled() and withTheme(); done means OptionButton accepts the demonstrated props without an error while preserving the existing themed composition.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.