loose-envify doesn't play nice with prettier

[dgoldstein0]

we have been using loose-envify for a while, and are pretty happy with it. We are now trying to add prettier to our toolchain, to run on all of our typescript files. We compile our typescript to ES5, and then run loose-envify on the result of that.

In testing this, we've discovered that we have a few lines of code like

preview_url: `https://${process.env.WEBSERVER}/scl/fo/hk7w48fbgw9j6ikfl4202/AAC_QACHIcZPuKOX9C9L8g6Ea`,

which works fine.

However, prettier converts this code to

preview_url: `https://${process.env
    .WEBSERVER}/scl/fo/hk7w48fbgw9j6ikfl4202/AAC_QACHIcZPuKOX9C9L8g6Ea`,

which compiles to

preview_url: "https://" + process.env
    .WEBSERVER + "/scl/fo/hk7w48fbgw9j6ikfl4202/AAC_QACHIcZPuKOX9C9L8g6Ea",

loose-envify cannot handle the whitespace between process.env and .WEBSERVER; at the moment the only workaround is to add // prettier-ignore to these cases, and I'd rather not have to educate my teammates about that. Is there any chance we could get this limitation fixed? Would upstream be amenable to a pull request?

[lydell]

Prettier 1.18+ does not break this anymore.

https://prettier.io/blog/2019/06/06/1.18.0.html#stop-breaking-simple-template-literals-5979-by-jwbay

Prettier 2.0.4
Playground link

--parser babel

Input:

({
  preview_url: `https://${process.env.WEBSERVER}/scl/fo/hk7w48fbgw9j6ikfl4202/AAC_QACHIcZPuKOX9C9L8g6Ea`,
})

Output:

({
  preview_url: `https://${process.env.WEBSERVER}/scl/fo/hk7w48fbgw9j6ikfl4202/AAC_QACHIcZPuKOX9C9L8g6Ea`,
});

(Also, #12 adds support for template interpolations natively!)

[dgoldstein0]

awesome. we are on prettier 2.0+ now so happy to hear that. (though it would make sense to me if loose-envify ignored the whitespace too... but that's less important if prettier does the right thing).

Also, definitely stoked for #12 - I was thinking of forking and adding our own support for this eventually; though we currently compile to target=ES5 anyway.