Multline strings + webpack + storybook gives syntax error

[SimenB]

Describe the bug

For some reason, backticks are replaced by " which gives a syntax error.

Regression is in @vanilla-extract/integration@7.1.3 - 7.1.2 (like overrides in the reproduction forces) works correctly.

Reproduction

https://github.com/SimenB/vanilla-multiline-storybook-bug

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.72 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/75802_1714721318966/bin/node
    npm: 10.7.0 - ~/Library/Caches/fnm_multishells/75802_1714721318966/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Edge: 124.0.2478.67
    Safari: 17.4.1
  npmPackages:
    @vanilla-extract/css: ^1.15.1 => 1.15.1 
    @vanilla-extract/webpack-plugin: ^2.3.8 => 2.3.8 

Used Package Manager

npm

Logs

ModuleParseError: Module parse failed: Unterminated string constant (6:24)
File was processed with these loaders:
 * ./node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js
 * ./node_modules/swc-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
| var vars = createGlobalTheme(":root", {
| focusWithin: {
>     highlightBoxShadow: "
|       0px 0px 0px 4px #DEEFFF
|     "
    at handleParseError (./node_modules/webpack/lib/NormalModule.js:1102:19)
    at ./node_modules/webpack/lib/NormalModule.js:1243:5
    at processResult (./node_modules/webpack/lib/NormalModule.js:883:11)
    at ./node_modules/webpack/lib/NormalModule.js:966:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (./node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at ./node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at ./node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.prod.js:41:5

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[SimenB]

@askoufis I was wrong in my original report - @vanilla-extract/integration is the package with the regression, not @vanilla-extract/css.

I've updated the reproduction to properly demonstrate one version working, and one being broken.

[GeeWizWow]

This is affecting quite a few of my projects. Unless anyone is looking at this already, will submit a PR tomorrow.

[askoufis]

What a rabbit hole.

TL;DR, the multi-line string in the reproduction ends up as roughly (because of SWC, see extra notes below):

"\n      0px 0px 0px 4px #DEEFFF\n    "

This used to be correctly dedented by outdent in @vanilla-extract/integration@7.1.2, but since swapping to dedent, it is 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.

I'll get a fix out for this soon.

Extra notes

I was stumped for a while trying to reproduce it 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 the code snippet above.

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 the issue within VE is the best option, but I'm glad I'm at least aware of potential Storybook + SWC issues going forward.

[askoufis]

Fix released in https://github.com/vanilla-extract-css/vanilla-extract/releases/tag/%40vanilla-extract%2Fintegration%407.1.4.

[GeeWizWow]

⭐ , Thanks @askoufis!