Is it ok call css method directly inside each element?

[junheep-dev]

Hi, I wonder that it is ok to call css method directly inside component(i.e. call css method for every rendering), not from global scope.

For example, like below code.

const Component = () => {
  return <div className={css({ color: 'black', height: 400, ... })()}></div>;
}

I noticed that version 0.1.x have a performance issue if I call css inside each className and render lots of elements(e.g. large array).

const LargeComponent = () => {
  return Array.from({ length: 10000 })
    .map(() => <div className={css({ color: 'black', height: 400, ... })()}></div>);
}

As it have been fixed now with version 0.2.0. (related issue: #535), I think there is no performance issue with my code.

The reason why I tried write code like this, I think it is quite useful sometimes when I want put html with style together.(like using inline style prop). It's easy to check which element have which style directly.
So I just wondered this code is encouraged or not.
Thanks.

[peduarte]

Since 0.2.0 this should be fine. As in, you'll get all the same caching benefits.