Unexpected space character between function call and tagged literal

[zikaari]

Assume the following code being compiled with target es6 or esnext:

const StyledDiv = styled.div`
    background: red
`

Expected behavior:

const StyledDiv = styled_components_1.default('div')`
    background: red
`

Actual behavior:

const StyledDiv = styled_components_1.default('div') `
    background: red
`

Because of the space character between function and template literal ...('div')█`... StyledComponents don't work

[DanielRosenwasser]

What do you mean by "StyledComponents don't work"? Are you running a transform that doesn't understand this code?

[zikaari]

My apologies! there was an error in my own setup. Probably a styled-components <-> react version incompatibility. Maybe I wasn't using the latest version for either of them and thus tagged literals weren't behaving as expected.

[typescript-bot]

This issue has been marked as external or unactionable and has seen no activity in the last day. It has been closed automatic house-keeping purposes.

[cedeber]

It looks like this is definitely a bug with the version 3.3.3333 while exporting to es2017

function test(...args) {}

const t = test`template literals`;

compiles to

function test(...args) { }
const t = test `template literals`;

[DanielRosenwasser]

That's just how our compiler formats its output, and that's not semantically different either, so it's not a bug.

[cedeber]

There is a space between test and template literals in the output. It won't work as tagged template literal.

[DanielRosenwasser]

Can you open a separate issue and show it not working in a JavaScript runtime?

[cedeber]

Ok, you're right, it works. I didn't know a space is allowed here. At least I learned something 😅. I was fighting with a bug related to that this morning - even this simple exemple didn't work - and after reopening the site to see the bug again, no more bug 🧐⁉️ Sorry for the waste of time.