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' && mergedProps !== undefined) {
+        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,23 @@ import * as CSS from 'csstype'
 export { RegisteredCache, SerializedStyles }
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>
-export type CSSPropertiesWithMultiValues = {
+export type CSSPropertiesWithMultiValues<Props = unknown> = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
-    | ReadonlyArray<Extract<CSSProperties[K], string>>
+    | ReadonlyArray<CSSProperties[K] & string>
+    | ((
+        props: Props
+      ) => CSSProperties[K] | ReadonlyArray<CSSProperties[K] & string>)
 }
 
-export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
+export type CSSPseudos<Props = unknown> = {
+  [K in CSS.Pseudos]?: CSSObject<Props>
+}
 
 export interface ArrayCSSInterpolation
   extends ReadonlyArray<CSSInterpolation> {}
 
-export type InterpolationPrimitive =
+export type InterpolationPrimitive<Props = unknown> =
   | null
   | undefined
   | boolean
@@ -27,18 +32,25 @@ export type InterpolationPrimitive =
   | ComponentSelector
   | Keyframes
   | SerializedStyles
-  | CSSObject
+  | CSSObject<Props>
 
 export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation
 
-export interface CSSOthersObject {
-  [propertiesName: string]: CSSInterpolation
+export interface CSSOthersObject<Props = unknown> {
+  [propertiesName: string]:
+    | InterpolationPrimitive<Props>
+    | ReadonlyArray<InterpolationPrimitive<Props>>
+    | ((
+        props: Props
+      ) =>
+        | InterpolationPrimitive<Props>
+        | ReadonlyArray<InterpolationPrimitive<Props>>)
 }
 
-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 +71,7 @@ export interface FunctionInterpolation<Props> {
 }
 
 export type Interpolation<Props> =
-  | InterpolationPrimitive
+  | InterpolationPrimitive<Props>
   | ArrayInterpolation<Props>
   | FunctionInterpolation<Props>
 

packages/serialize/types/tests.ts

@@ -37,13 +37,32 @@ serializeStyles(
   {}
 )
 // $ExpectType SerializedStyles
+serializeStyles<{
+  vars: { background: string; foreground: string; step: number }
+}>([
+  {
+    display: () => ['-webkit-flex', 'flex'],
+    backgroundColor: ({ vars }) => vars.background,
+    color: ({ vars }) => vars.foreground,
+    lineHeight: ({ vars }) => 1.2,
+    '--spacing': () => 1,
+    '--step': ({ vars }) => `calc(${vars.step} * var(--spacing))`,
+    '&:hover': {
+      backgroundColor: ({ vars }) => vars.foreground,
+      color: ({ vars }) => vars.background
+    }
+  }
+])
+// $ExpectType SerializedStyles
 serializeStyles([testTemplateStringsArray, 5, '4px'], {}, {})
 
 // $ExpectError
 serializeStyles()
 // $ExpectError
 serializeStyles({})
 // $ExpectError
+serializeStyles([{ borderCollapse: () => 'unknown' }])
+// $ExpectError
 serializeStyles({}, {})
 
 let cssObject: CSSObject = {

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;