Support dynamic value

[siriwatknp]

What:

Add callback support for the value when serializing styles. For example:

styled('div')({
  background: (props) => props.color || '#fff',
  '&:hover': {
    background: (props) => props.color || 'red',
  }
})

Why:

1. We (MUI) need emotion to have a consistent API with our new static CSS-in-JS library to let developers switch between engines.
2. styled-components already support the callback for the values so it's not new.

How:

The change is mainly in emotion's serialize function. When the value is a function, just call it with the props and continue serializing the result the same as before.

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2fb22d4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2fb22d4:

Sandbox	Source
Emotion	Configuration

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b0014b4) 95.07% compared to head (2fb22d4) 95.08%.

Additional details and impacted files

Files	Coverage Δ
packages/serialize/src/index.js	100.00% <100.00%> (ø)

[Andarist]

This one actually shouldn't end up including functions in CSSObject. We have 2 flavors of those interpolations:

• the ones that u can pass to css
• and the ones that you can pass to styled and similar

The difference is that css is a context-less call. We don't get access to any props there (and we don't defer css resolution) so this should be an error:

css({
  display: () => 'flex'
})

That's why we have both ArrayInterpolation and ArrayCSSInterpolation here. A similar distinction should be introduced for those object styles.

But now... I'm not sure if this would satisfy your original goal.

[siriwatknp]

I see, I will revert this. I think it should be fine since we focus only for styled.

[siriwatknp]

Done! see 2fb22d4

[Andarist]

I think it should be fine since we focus only for styled.

Cool! ❤️

Done! see 2fb22d4

Thanks. I'm soft-approving this PR now. I think we still need to tweak types a little bit but honestly - I need to give it more thought to determine how to do it in the least disruptive way. So I think, it's best for me to do it soon-ish since I don't have concrete advice right now on how this should be done.

I'll also give @emmatown a couple of days to give their opinion about this. If we don't merge it this week - please ping me later.

[siriwatknp]

@Andarist Would you mind taking a look at this again?

[Andarist]

I think we can consider this to be approved but I still have to figure out how types should be structured and I have some other things on my plate right now (including figuring out how to integrate Emotion with the upcoming React 19). How urgent/blocking this one is for you? it might help me to prioritize this PR.

[siriwatknp]

I think we can consider this to be approved but I still have to figure out how types should be structured and I have some other things on my plate right now (including figuring out how to integrate Emotion with the upcoming React 19). How urgent/blocking this one is for you? it might help me to prioritize this PR.

I'd say the urgency is medium. We are in the process of migrating components to support both emotion and zero-runtime engine, some need dynamic callback support so those are blocked by this PR.