Understanding @emotion/babel-plugin's cssPropOptimization

[CodeWitchBella]

Description:

I was trying to understand how to best take advantage of @emotion/babel-plugin's css prop optimization, how it works etc.

I create a simple playground on codesandbox (source) and discovered the following:

If you use css prop in its most simple form with object-style syntax you get a hoisted object (playground link)

function Test() {
  return <div css={{ color: 'blue' }} />
}
// Turns into (with dev-only code stripped for brevity)
var _ref = {
  name: "117wnve",
  styles: "color:blue"
};

function Test() {
  return <div css={_ref} />;
}

It gets more complicated if you pass (possibly) dynamic values (playground link)

function Test() {
  const background = 'white'
  return <div css={{ color: 'blue', background }} />
}
// turns into
import { css as _css } from "@emotion/react";

function Test() {
  const background = 'white';
  return <div css={/*#__PURE__*/_css({
    color: 'blue',
    background
  })} />;
}

and (playground link)

function Test() {
  const background = 'white'
  return <div css={[{ color: 'blue' }, {background}]} />
}
// turns into
function Test() {
  const background = 'white';
  return <div css={["color:blue;", {
    background
  }]} />;
}

My question is: which is better to use? Let's say this is in often-used component (like Button) and the static object contains many properties but we have a few dynamic ones (eg. color, borderColor and background from theme provided by react context). Is it better to split static values and dynamic values into separate objects so that static ones become strings, or should we keep that as one object and rely on _css function?

My gut feeling would be to split it, but I would want to measure that before jumping to conclusions and I figured I would ask first before doing that :-)

Also, if there is a noticeable difference would it make sense for the babel plugin to transform from one to the other automatically?

Thank you for awesome library

Documentation links:

• @emotion/babel-plugin's readme
• https://emotion.sh/docs/@emotion/babel-plugin

[srmagura]

Interesting question! I think <div css={{ color: 'blue', background }} /> is more natural than <div css={[{ color: 'blue' }, {background}]} />. I'm not sure which one will perform better — you would have to benchmark both cases.

In my experience, the css prop is unlikely to cause performance issues unless you have a lot of elements or very frequent renders. Usually there will be other things in your application that are more of a performance bottleneck than the css prop.