Support dynamic value

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]}}`

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>
 

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

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;

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;