Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix mismatch between CSSInterpolation and Interpolation<Props> #3164

Merged
merged 5 commits into from Mar 29, 2024
Merged

Fix mismatch between CSSInterpolation and Interpolation<Props> #3164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c44db7f
Add explicit test for uncovered regression; fix interpolation type to…
Cerber-Ursi Mar 5, 2024
adabfd2
Reorder overloads for styled component creator
Cerber-Ursi Mar 5, 2024
847668c
yarn changeset
Cerber-Ursi Mar 5, 2024
7096107
Apply suggestions from code review
Andarist Mar 29, 2024
2a76367
Create tiny-snails-watch.md
Andarist Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curly-planets-search.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
'@emotion/serialize': patch
---

Make `ArrayInterpolation` to extend `ReadonlyArray` to match a similar recent change to `ArrayCSSInterpolation`. It fixes some compatibility issues when those 2 get mixed together.
5 changes: 5 additions & 0 deletions .changeset/tiny-snails-watch.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
"@emotion/styled": patch
---

Reordered `styled` overloads to accommodate the recent change in `@emotion/serialize`'s types.
4 changes: 4 additions & 0 deletions packages/react/types/tests.tsx
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@ import {
withEmotionCache
} from '@emotion/react'
import { JSX as EmotionJSX } from '@emotion/react/jsx-runtime'
import { CSSInterpolation } from '@emotion/serialize'

declare module '@emotion/react' {
// tslint:disable-next-line: strict-export-declare-modifiers
Expand All @@ -23,6 +24,9 @@ declare module '@emotion/react' {
;<Global styles={[]} />
;<Global styles={theme => [theme.primaryColor]} />

declare const getStyles: () => CSSInterpolation
;<Global styles={getStyles()} />

declare const getRandomColor: () => string

const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/serialize/types/index.d.ts
View file
Open in desktop
Expand Up @@ -52,7 +52,7 @@ export type Keyframes = {
} & string

export interface ArrayInterpolation<Props>
extends Array<Interpolation<Props>> {}
extends ReadonlyArray<Interpolation<Props>> {}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this makes sense to me, it shouldnt hurt us anyhow


export interface FunctionInterpolation<Props> {
(props: Props): Interpolation<Props>
Expand Down
20 changes: 10 additions & 10 deletions packages/styled/types/base.d.ts
View file
Open in desktop
Expand Up @@ -63,10 +63,18 @@ export interface CreateStyledComponent<
SpecificComponentProps extends {} = {},
JSXProps extends {} = {}
> {
(
template: TemplateStringsArray,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see where you are going with this reordering and I think it makes sense. However, I'm really anxious about reordering those overloads. This change needs some extra coverage in our type tests.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I misunderstood this in part - this is actually a fix for existing tests (that became import after the change in @emotion/serialize)

...styles: Array<
Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
>
): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>

/**
* @typeparam AdditionalProps Additional props to add to your styled component
*/
<AdditionalProps extends {} = {}>(
<AdditionalProps extends {}>(
template: TemplateStringsArray,
...styles: Array<
Interpolation<
ComponentProps &
Expand All @@ -80,18 +88,10 @@ export interface CreateStyledComponent<
JSXProps
>

(
template: TemplateStringsArray,
...styles: Array<
Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
>
): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>

/**
* @typeparam AdditionalProps Additional props to add to your styled component
*/
<AdditionalProps extends {}>(
template: TemplateStringsArray,
<AdditionalProps extends {} = {}>(
...styles: Array<
Interpolation<
ComponentProps &
Expand Down