From 94483faf608e752883600557ed4ea06bad3d88d1 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jan 2024 17:46:36 +0700
Subject: [PATCH 1/9] support dynamic value

---
 packages/serialize/src/index.js                      |  3 +++
 .../styled/__tests__/__snapshots__/styled.js.snap    | 12 ++++++++++++
 packages/styled/__tests__/styled.js                  |  7 +++++++
 3 files changed, 22 insertions(+)

diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 8352ba935..042a3e1a0 100644
--- a/packages/serialize/src/index.js
+++ b/packages/serialize/src/index.js
@@ -239,6 +239,9 @@ function createStringFromObject(
   } else {
     for (let key in obj) {
       let value = obj[key]
+      if (typeof value === 'function') {
+        value = value(mergedProps)
+      }
       if (typeof value !== 'object') {
         if (registered != null && registered[value] !== undefined) {
           string += `${key}{${registered[value]}}`
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 79db82466..0a97a38e1 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -483,6 +483,18 @@ exports[`styled objects 1`] = `
 </h1>
 `;
 
+exports[`styled objects with dynamic value 1`] = `
+.emotion-0 {
+  padding: 0.5rem;
+}
+
+<h1
+  className="emotion-0"
+>
+  hello world
+</h1>
+`;
+
 exports[`styled objects with spread properties 1`] = `
 .emotion-0 {
   font-size: 20px;
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 853e79f61..462921dc1 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -437,6 +437,13 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('objects with dynamic value', () => {
+    const H1 = styled('h1')({ padding: props => props.padding || '1rem' })
+    const tree = renderer.create(<H1 padding="0.5rem">hello world</H1>).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('composing components', () => {
     const Button = styled.button`
       color: green;

From cde417556b1d7fa5dc0f1774da9fb7dfca9caa32 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 15:54:44 +0700
Subject: [PATCH 2/9] add types

---
 packages/serialize/types/index.d.ts | 33 +++++++++++++++++------------
 packages/serialize/types/tests.ts   | 11 ++++++++++
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 12482c98e..9c8eb55d6 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -7,18 +7,19 @@ import * as CSS from 'csstype'
 export { RegisteredCache, SerializedStyles }
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>
-export type CSSPropertiesWithMultiValues = {
+export type CSSPropertiesWithMultiValues<Props> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
     | ReadonlyArray<Extract<CSSProperties[K], string>>
+    | ((props: Props) => number | string)
 }
 
-export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
+export type CSSPseudos<Props> = { [K in CSS.Pseudos]?: CSSObject<Props> }
 
-export interface ArrayCSSInterpolation
-  extends ReadonlyArray<CSSInterpolation> {}
+export interface ArrayCSSInterpolation<Props>
+  extends ReadonlyArray<CSSInterpolation<Props>> {}
 
-export type InterpolationPrimitive =
+export type InterpolationPrimitive<Props> =
   | null
   | undefined
   | boolean
@@ -27,18 +28,22 @@ export type InterpolationPrimitive =
   | ComponentSelector
   | Keyframes
   | SerializedStyles
-  | CSSObject
+  | CSSObject<Props>
 
-export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
+export type CSSInterpolation<Props> =
+  | InterpolationPrimitive<Props>
+  | ArrayCSSInterpolation<Props>
 
-export interface CSSOthersObject {
-  [propertiesName: string]: CSSInterpolation
+export interface CSSOthersObject<Props> {
+  [propertiesName: string]:
+    | CSSInterpolation<Props>
+    | ((props: Props) => string | number)
 }
 
-export interface CSSObject
-  extends CSSPropertiesWithMultiValues,
-    CSSPseudos,
-    CSSOthersObject {}
+export interface CSSObject<Props = unknown>
+  extends CSSPropertiesWithMultiValues<Props>,
+    CSSPseudos<Props>,
+    CSSOthersObject<Props> {}
 
 export interface ComponentSelector {
   __emotion_styles: any
@@ -59,7 +64,7 @@ export interface FunctionInterpolation<Props> {
 }
 
 export type Interpolation<Props> =
-  | InterpolationPrimitive
+  | InterpolationPrimitive<Props>
   | ArrayInterpolation<Props>
   | FunctionInterpolation<Props>
 
diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts
index 74f58a2f9..d6a197918 100644
--- a/packages/serialize/types/tests.ts
+++ b/packages/serialize/types/tests.ts
@@ -37,6 +37,17 @@ serializeStyles(
   {}
 )
 // $ExpectType SerializedStyles
+serializeStyles<{ vars: { background: string; foreground: string } }>([
+  {
+    backgroundColor: ({ vars }) => vars.background,
+    color: ({ vars }) => vars.foreground,
+    '&:hover': {
+      backgroundColor: ({ vars }) => vars.foreground,
+      color: ({ vars }) => vars.background
+    }
+  }
+])
+// $ExpectType SerializedStyles
 serializeStyles([testTemplateStringsArray, 5, '4px'], {}, {})
 
 // $ExpectError

From bc31fed54e3d31a36e986bfded68ca315a2710af Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 17:14:24 +0700
Subject: [PATCH 3/9] skip if mergedProps is undefined

---
 packages/serialize/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/serialize/src/index.js b/packages/serialize/src/index.js
index 042a3e1a0..f2542316a 100644
--- a/packages/serialize/src/index.js
+++ b/packages/serialize/src/index.js
@@ -239,7 +239,7 @@ function createStringFromObject(
   } else {
     for (let key in obj) {
       let value = obj[key]
-      if (typeof value === 'function') {
+      if (typeof value === 'function' && mergedProps !== undefined) {
         value = value(mergedProps)
       }
       if (typeof value !== 'object') {

From 0d553be090938dcc88d760eb5e6dbd8b54bcd47b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 17:19:49 +0700
Subject: [PATCH 4/9] set default type to prevent breaking change

---
 packages/serialize/types/index.d.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 9c8eb55d6..b29416fb4 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -7,19 +7,21 @@ import * as CSS from 'csstype'
 export { RegisteredCache, SerializedStyles }
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>
-export type CSSPropertiesWithMultiValues<Props> = {
+export type CSSPropertiesWithMultiValues<Props = unknown> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
     | ReadonlyArray<Extract<CSSProperties[K], string>>
     | ((props: Props) => number | string)
 }
 
-export type CSSPseudos<Props> = { [K in CSS.Pseudos]?: CSSObject<Props> }
+export type CSSPseudos<Props = unknown> = {
+  [K in CSS.Pseudos]?: CSSObject<Props>
+}
 
-export interface ArrayCSSInterpolation<Props>
+export interface ArrayCSSInterpolation<Props = unknown>
   extends ReadonlyArray<CSSInterpolation<Props>> {}
 
-export type InterpolationPrimitive<Props> =
+export type InterpolationPrimitive<Props = unknown> =
   | null
   | undefined
   | boolean
@@ -30,11 +32,11 @@ export type InterpolationPrimitive<Props> =
   | SerializedStyles
   | CSSObject<Props>
 
-export type CSSInterpolation<Props> =
+export type CSSInterpolation<Props = unknown> =
   | InterpolationPrimitive<Props>
   | ArrayCSSInterpolation<Props>
 
-export interface CSSOthersObject<Props> {
+export interface CSSOthersObject<Props = unknown> {
   [propertiesName: string]:
     | CSSInterpolation<Props>
     | ((props: Props) => string | number)

From 2ab577fbf95d21b6dc26da3e986da23f51a42207 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 17:21:27 +0700
Subject: [PATCH 5/9] add test for number as a result from the callback

---
 packages/serialize/types/index.d.ts | 2 +-
 packages/serialize/types/tests.ts   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index b29416fb4..60b3b43f9 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -39,7 +39,7 @@ export type CSSInterpolation<Props = unknown> =
 export interface CSSOthersObject<Props = unknown> {
   [propertiesName: string]:
     | CSSInterpolation<Props>
-    | ((props: Props) => string | number)
+    | ((props: Props) => number | string)
 }
 
 export interface CSSObject<Props = unknown>
diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts
index d6a197918..c5b2b0d8b 100644
--- a/packages/serialize/types/tests.ts
+++ b/packages/serialize/types/tests.ts
@@ -41,6 +41,7 @@ serializeStyles<{ vars: { background: string; foreground: string } }>([
   {
     backgroundColor: ({ vars }) => vars.background,
     color: ({ vars }) => vars.foreground,
+    lineHeight: ({ vars }) => 1.2,
     '&:hover': {
       backgroundColor: ({ vars }) => vars.foreground,
       color: ({ vars }) => vars.background

From cc913db69c1405a915a982d9e86b80f44c50f9ee Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 17:55:34 +0700
Subject: [PATCH 6/9] fix types

---
 packages/serialize/types/index.d.ts | 6 ++++--
 packages/serialize/types/tests.ts   | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 60b3b43f9..24bcb270b 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -11,7 +11,9 @@ export type CSSPropertiesWithMultiValues<Props = unknown> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
     | ReadonlyArray<Extract<CSSProperties[K], string>>
-    | ((props: Props) => number | string)
+    | ((
+        props: Props
+      ) => CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>>)
 }
 
 export type CSSPseudos<Props = unknown> = {
@@ -39,7 +41,7 @@ export type CSSInterpolation<Props = unknown> =
 export interface CSSOthersObject<Props = unknown> {
   [propertiesName: string]:
     | CSSInterpolation<Props>
-    | ((props: Props) => number | string)
+    | ((props: Props) => CSSInterpolation<Props>)
 }
 
 export interface CSSObject<Props = unknown>
diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts
index c5b2b0d8b..21eb33496 100644
--- a/packages/serialize/types/tests.ts
+++ b/packages/serialize/types/tests.ts
@@ -39,9 +39,11 @@ serializeStyles(
 // $ExpectType SerializedStyles
 serializeStyles<{ vars: { background: string; foreground: string } }>([
   {
+    display: () => ['-webkit-flex', 'flex'],
     backgroundColor: ({ vars }) => vars.background,
     color: ({ vars }) => vars.foreground,
     lineHeight: ({ vars }) => 1.2,
+    '--css-var': ({ vars }) => vars.foreground,
     '&:hover': {
       backgroundColor: ({ vars }) => vars.foreground,
       color: ({ vars }) => vars.background

From 88690372210c925726138c02564f06950a941900 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 18:21:24 +0700
Subject: [PATCH 7/9] simplify types and add more tests

---
 packages/serialize/types/index.d.ts | 6 ++----
 packages/serialize/types/tests.ts   | 9 +++++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 24bcb270b..b9971baee 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -10,10 +10,8 @@ export type CSSProperties = CSS.PropertiesFallback<number | string>
 export type CSSPropertiesWithMultiValues<Props = unknown> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | ReadonlyArray<Extract<CSSProperties[K], string>>
-    | ((
-        props: Props
-      ) => CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>>)
+    | ReadonlyArray<CSSProperties[K]>
+    | ((props: Props) => CSSProperties[K] | ReadonlyArray<CSSProperties[K]>)
 }
 
 export type CSSPseudos<Props = unknown> = {
diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts
index 21eb33496..3a7ae79e0 100644
--- a/packages/serialize/types/tests.ts
+++ b/packages/serialize/types/tests.ts
@@ -37,13 +37,16 @@ serializeStyles(
   {}
 )
 // $ExpectType SerializedStyles
-serializeStyles<{ vars: { background: string; foreground: string } }>([
+serializeStyles<{
+  vars: { background: string; foreground: string; step: number }
+}>([
   {
     display: () => ['-webkit-flex', 'flex'],
     backgroundColor: ({ vars }) => vars.background,
     color: ({ vars }) => vars.foreground,
     lineHeight: ({ vars }) => 1.2,
-    '--css-var': ({ vars }) => vars.foreground,
+    '--spacing': () => 1,
+    '--step': ({ vars }) => `calc(${vars.step} * var(--spacing))`,
     '&:hover': {
       backgroundColor: ({ vars }) => vars.foreground,
       color: ({ vars }) => vars.background
@@ -58,6 +61,8 @@ serializeStyles()
 // $ExpectError
 serializeStyles({})
 // $ExpectError
+serializeStyles([{ borderCollapse: () => 'unknown' }])
+// $ExpectError
 serializeStyles({}, {})
 
 let cssObject: CSSObject = {

From 27b03d84d56a54f9689ebec5d64c3512f043ab30 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 21:15:26 +0700
Subject: [PATCH 8/9] apply review suggestion

---
 packages/serialize/types/index.d.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index b9971baee..19bd898da 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -10,8 +10,10 @@ export type CSSProperties = CSS.PropertiesFallback<number | string>
 export type CSSPropertiesWithMultiValues<Props = unknown> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | ReadonlyArray<CSSProperties[K]>
-    | ((props: Props) => CSSProperties[K] | ReadonlyArray<CSSProperties[K]>)
+    | ReadonlyArray<CSSProperties[K] & string>
+    | ((
+        props: Props
+      ) => CSSProperties[K] | ReadonlyArray<CSSProperties[K] & string>)
 }
 
 export type CSSPseudos<Props = unknown> = {

From 2fb22d4dc23a7bc7a81cbd88eacaaf02ea9d1077 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 9 Jan 2024 11:52:30 +0700
Subject: [PATCH 9/9] remove props arg from CSSInterpolation

---
 packages/serialize/types/index.d.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 19bd898da..96158c0f7 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -20,8 +20,8 @@ export type CSSPseudos<Props = unknown> = {
   [K in CSS.Pseudos]?: CSSObject<Props>
 }
 
-export interface ArrayCSSInterpolation<Props = unknown>
-  extends ReadonlyArray<CSSInterpolation<Props>> {}
+export interface ArrayCSSInterpolation
+  extends ReadonlyArray<CSSInterpolation> {}
 
 export type InterpolationPrimitive<Props = unknown> =
   | null
@@ -34,14 +34,17 @@ export type InterpolationPrimitive<Props = unknown> =
   | SerializedStyles
   | CSSObject<Props>
 
-export type CSSInterpolation<Props = unknown> =
-  | InterpolationPrimitive<Props>
-  | ArrayCSSInterpolation<Props>
+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
 
 export interface CSSOthersObject<Props = unknown> {
   [propertiesName: string]:
-    | CSSInterpolation<Props>
-    | ((props: Props) => CSSInterpolation<Props>)
+    | InterpolationPrimitive<Props>
+    | ReadonlyArray<InterpolationPrimitive<Props>>
+    | ((
+        props: Props
+      ) =>
+        | InterpolationPrimitive<Props>
+        | ReadonlyArray<InterpolationPrimitive<Props>>)
 }
 
 export interface CSSObject<Props = unknown>