From c44db7fb688db54a81c6e21102f140dd5bc1d0d8 Mon Sep 17 00:00:00 2001 From: Cerber Ursi Date: Tue, 5 Mar 2024 23:42:29 +0700 Subject: [PATCH 1/5] Add explicit test for uncovered regression; fix interpolation type to make it pass --- packages/react/types/tests.tsx | 4 ++++ packages/serialize/types/index.d.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx index 0a2d59143..332566a6b 100644 --- a/packages/react/types/tests.tsx +++ b/packages/react/types/tests.tsx @@ -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 @@ -23,6 +24,9 @@ declare module '@emotion/react' { ; ; [theme.primaryColor]} /> +declare const getStyles: () => CSSInterpolation +; + declare const getRandomColor: () => string const ComponentWithCache = withEmotionCache((_props: {}, cache) => { diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts index 12482c98e..1971b748b 100644 --- a/packages/serialize/types/index.d.ts +++ b/packages/serialize/types/index.d.ts @@ -52,7 +52,7 @@ export type Keyframes = { } & string export interface ArrayInterpolation - extends Array> {} + extends ReadonlyArray> {} export interface FunctionInterpolation { (props: Props): Interpolation From adabfd2845c81c87f3b0c55fdb505f9316483a1a Mon Sep 17 00:00:00 2001 From: Cerber Ursi Date: Tue, 5 Mar 2024 23:48:52 +0700 Subject: [PATCH 2/5] Reorder overloads for styled component creator Formerly, the first overload to be tried was not accepting template strings array as first argument. Therefore, it couldn't be used when `styled` was used as a tag for template string. So in this case TS skipped this overload and fell through to the next. Now, though, with `ArrayInterpolation` type changed, `TemplateStringsArray` matches the definition of `ArrayInterpolation`; therefore, this overload becomes used for template strings, confusing type inference. This change moves this overload to the end of the list, i.e. to be used as fallback when there's actually a direct function call, without template string. --- packages/styled/types/base.d.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts index 05efbaea4..c75842c6f 100644 --- a/packages/styled/types/base.d.ts +++ b/packages/styled/types/base.d.ts @@ -63,10 +63,18 @@ export interface CreateStyledComponent< SpecificComponentProps extends {} = {}, JSXProps extends {} = {} > { + ( + template: TemplateStringsArray, + ...styles: Array< + Interpolation + > + ): StyledComponent + /** * @typeparam AdditionalProps Additional props to add to your styled component */ - ( + ( + template: TemplateStringsArray, ...styles: Array< Interpolation< ComponentProps & @@ -80,18 +88,10 @@ export interface CreateStyledComponent< JSXProps > - ( - template: TemplateStringsArray, - ...styles: Array< - Interpolation - > - ): StyledComponent - /** * @typeparam AdditionalProps Additional props to add to your styled component */ - ( - template: TemplateStringsArray, + ( ...styles: Array< Interpolation< ComponentProps & From 847668ce55f1e54c00a521da37001073522fd491 Mon Sep 17 00:00:00 2001 From: Cerber Ursi Date: Wed, 6 Mar 2024 00:00:21 +0700 Subject: [PATCH 3/5] yarn changeset --- .changeset/curly-planets-search.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/curly-planets-search.md diff --git a/.changeset/curly-planets-search.md b/.changeset/curly-planets-search.md new file mode 100644 index 000000000..694219355 --- /dev/null +++ b/.changeset/curly-planets-search.md @@ -0,0 +1,7 @@ +--- +'@emotion/react': patch +'@emotion/serialize': patch +'@emotion/styled': patch +--- + +Fix types mismatch between CSS interpolations and styled component creator functions From 7096107169eb9d3582316af1694bbc2828b4f19a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 29 Mar 2024 19:30:54 +0100 Subject: [PATCH 4/5] Apply suggestions from code review --- .changeset/curly-planets-search.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/curly-planets-search.md b/.changeset/curly-planets-search.md index 694219355..e969fe573 100644 --- a/.changeset/curly-planets-search.md +++ b/.changeset/curly-planets-search.md @@ -1,7 +1,5 @@ --- -'@emotion/react': patch '@emotion/serialize': patch -'@emotion/styled': patch --- -Fix types mismatch between CSS interpolations and styled component creator functions +Make `ArrayInterpolation` to extend `ReadonlyArray` to match a similar recent change to `ArrayCSSInterpolation`. It fixes some compatibility issues when those 2 get mixed together. From 2a76367abf520f9c07092deb768f44eeaf9e54d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 29 Mar 2024 19:31:54 +0100 Subject: [PATCH 5/5] Create tiny-snails-watch.md --- .changeset/tiny-snails-watch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-snails-watch.md diff --git a/.changeset/tiny-snails-watch.md b/.changeset/tiny-snails-watch.md new file mode 100644 index 000000000..80b95fb7e --- /dev/null +++ b/.changeset/tiny-snails-watch.md @@ -0,0 +1,5 @@ +--- +"@emotion/styled": patch +--- + +Reordered `styled` overloads to accommodate the recent change in `@emotion/serialize`'s types.