Inconsistent debug identifiers for createTheme between client and server on Next.js dev server

[zbauman3]

Describe the bug

@vanilla-extract/babel-plugin-debug-ids fails to generate consistent debug identifiers for createTheme between server and client environments when run in next dev. The code generated for the server will correctly generate the debug id as theme_createThemeClass__XXXXXXXX. The code generated on for client however will generate a debug id of theme_ref__XXXXXXXX. This means that the generated style sheet has a different class than the class that is applied to the element, causing styles to fail and a Next.js client/server mismatch.

The issue involves this section in @vanilla-extract/babel-plugin-debug-ids that is responsible for handling a specific export format of createTheme. This code only handles one scenario:

export const [themeClass, vars] = createTheme({});

when it's compiled to:

var _createTheme = createTheme({}),
  _createTheme2 = _slicedToArray(_createTheme, 2),
  themeClass = _createTheme2[0],
  vars = _createTheme2[1];

But if you look at the generated code output by Next.js' SWC, it is actually:

var ref = _slicedToArray(createTheme({}), 2);
export var themeClass = ref[0],
  vars = ref[1];

And if the consumer instead uses:

const [themeClass, vars] = createTheme({});
export { themeClass, vars };

then there is yet another compiled permutation:

var ref = _slicedToArray(createTheme({}), 2),
  themeClass = ref[0],
  vars = ref[1];
export { themeClass, vars };

---

I believe this issue arrose in @vanilla-extract/integration@6.0.0 as part of the removal of @vanilla-extract/babel-plugin in #827. I'm not exactly sure what is causing the compiled code to change structure though, potentially something in Next.js' SWC compilation process?

TL;DR: @vanilla-extract/babel-plugin-debug-ids needs to be updated to handle a wider range of scenarios for createTheme.

Reproduction

https://github.com/zbauman3/demos/tree/vanilla-extract-next-dev

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.58 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node
    Yarn: 3.2.0 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 107.0.5304.121
    Firefox: 107.0
    Safari: 16.0

Used Package Manager

yarn

Logs

next-dev.js?3515:24 Warning: Prop `className` did not match. Server: "theme_systemStylesClass__1kzsoa60" Client: "theme_ref__1kzsoa60"

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.