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;