When using an object literal the plugin correctly appends the displayName and componentId properties to it.
Example with object literal (works correctly):
Input:
styled.div.withConfig({ shouldForwardProp: () => true })
Output:
styled.div.withConfig({
shouldForwardProp: () => true,
displayName: "FooStyled",
componentId: "sc-1t5leix-0"
})
Example with function call (does not add the properties):
Input:
const getConfig = () => ({ shouldForwardProp: () => true });
styled.div.withConfig(getConfig())
Output:
const getConfig = () => ({ shouldForwardProp: () => true });
styled.div.withConfig(getConfig())
As you can see the displayName and componentId were not added in the last example, because it is using a function call to return the argument value.
It would be good to merge the result of function calls like this:
styled.div.withConfig({
...getConfig(),
displayName: "FooStyled",
componentId: "sc-1t5leix-0"
});
Or if that is too complex, at least print a warning, that some code could not be transformed.