addFileScope: Don't mangle non-template strings that contain newlines

[askoufis]

Fixes #1405.

TL;DR: multi-line strings with literal newlines were being manged by dedent (ultimately because of SWC, see extra notes below).

These used to be correctly dedented by outdent in @vanilla-extract/integration@7.1.2, but since swapping to dedent, it was no longer being handled correctly.

The fix is simple though: call dedent as a function, rather than a string tag. This was actually a bug in dedent that was fixed relatively recently, hence the version bump.

Extra notes

I was stumped for a while trying to reproduce this within VE's test suite. I was seeing identical output between dedent and outdent. I then realised that there are actually two loaders being used in the reproduction: Vanilla Extract's, and the swc loader.

It turns out that swc targets ES3 syntax by default. This results in all template strings being converted to regular strings, because template strings were only added in ES6. In the case of multi-line strings, you end up with something like:

// input
const multiLineString = `
    foo
`;

// SWC ES3 output (eventually mangled by dedent)
var multiLineString = "\n   foo\n";

So an alternative way to fix this is to configure storybook to either not use SWC, or configure SWC to target ES6 or greater:

// .storybook/main.js
const config = {
  swc: (config) => {
    return {
      ...config,
      jsc: {
        ...config.jsc,
        target: "es6",
      },
    };
  },
}

Obviously fixing the issue within VE is the best option, but I'm glad I'm at least aware of potential Storybook + SWC issues going forward.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4d5f348

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vanilla-extract/integration	Patch
@vanilla-extract-private/tests	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR