Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[TypeScript] Leverage declaration merging for themes
See original GitHub issueThe problem
Currently, a custom styled object should be created and exported from a file to be used in components.
- The given path may be far up inside the directory hierarchy, resulting in statements similar to
import styled from ‘../../../utils/styled’ - External libraries (e.g. Chakra UI) can only use built-in type definitions of
@emotion/styled, unless hacky workarounds are used for tricking compilers and editors
Proposed solution
Based on the docs of styled-components, declaration merging could be used for defining theme types. I am not aware of any drawbacks concerning this technique, especially if the old method of defining theme types remains available.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Merging Declarations in TypeScript | by John Au-Yeung
Many things can be merged together in TypeScript. Merging interfaces is the simplest and most common operations types of declaration merging.
Read more >Documentation - Declaration Merging - TypeScript
To do so, the namespace declaration must follow the declaration it will merge with. The resulting declaration has properties of both declaration types....
Read more >TypeScript Declaration Merging (declaration merge)
For the purposes of this article, declaration merging refers to the work of the compiler to merge two identically named declarations into a...
Read more >Declaration merging in TypeScript for regular devs - Merixstudio
Summing it up, declaration merging means merging two separate declarations declared with the same name into a single definition. It pays off to ......
Read more >r/node - I am having a lot of trouble with Typescript Declaration ...
I am having a lot of trouble with Typescript Declaration Merging in ... for TypeScript, tsc, and any other related tools which leverage...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This has been implemented in https://github.com/emotion-js/emotion/pull/1609 and will be released in the upcoming v11.
I understand that styled-components and emotion have both different DefaultTheme - I’m rather concerned about 2 component libraries, both based on the same css-in-js library. Like if e.g. material ui were emotion-based and rebass would also be emotion-based, both would support theming and both would be augmenting the DefaulTheme. Or is this use case unrealistic? How both of those libraries should provide their themes? The problem kinda is not even that tied to TS, because they would potentially also clash in runtime, but still.
CSS prop is kinda a preferred way now of using emotion, so it would be great if we could support this correctly without the need to introduce extra config for a user - but if that’s the only option to support this correctly, then I guess we should require it from our users.
What would be your recommendation? What do you believe we should do?