Feature request: Functions as values for object literals

Hopefully this isn’t something that’s been raised before, I couldn’t find a related issue.

I love the new object support in styled-components, and while I know that this isn’t something that aligned with the project’s original goals, I wonder if this could be improved to support functions as values? There may also be some good technical reasons why this shouldn’t happen, so if that’s the case, please share those too.

As an example:

var A = styled.a(({ big }) => ({
  fontSize: big ? 24 : 16,
}));

Would become:

var A = styled.a({
  fontSize: ({ big }) => big ? 24 : 16,
});

[mrmckeb]

@d7my11 I don’t disagree, but this is not the behaviour that you see with an object.

This is also the standard behaviour whenever you set any style in JavaScript. Unit-less values default to pixels (where appropriate).

const Spinner = styled.div({
  width: 40,
});

// width: 40px

A real-life example here: VSCode: Chrome:

And thanks on the TypeScript side!

[probablyup]

Hmm I don’t see why not, I’d accept a PR for it. You’d need to make the change in flatten to pass executionContext into objToCss and invoke the function with it (but only if confirmed that it’s a function and not a SFC.)