Warning using assignInlineVars in RSC (Next.js)

[atabel]

Describe the bug

When using assignInlineVars function:

<div className={styles.example} style={assignInlineVars({[styles.vars.backgroundColor]: color})}>Example</div>

React warns you about not being able to pass non plain objects between Server and Client components.

The problem is the object created by assignInlineVars has a .toString() method

Reproduction

https://github.com/atabel/next-vanilla-extract

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 25.68 GB / 31.28 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.18.2 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.npm-packages/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 81.1.7.98
    Chrome: 119.0.6045.159
  npmPackages:
    @vanilla-extract/css: ^1.14.0 => 1.14.0 
    @vanilla-extract/dynamic: ^2.1.0 => 2.1.0 
    @vanilla-extract/next-plugin: ^2.3.2 => 2.3.2

Used Package Manager

yarn

Logs

$ next dev
   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000

 ✓ Ready in 2.5s
 ○ Compiling / ...
 ✓ Compiled / in 2.3s (484 modules)
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  <div className=... style={{--backgroundColor__1x1n9v70: "blue"}} children=...>
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1864ms (476 modules)

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.

[selena-groh]

Just bumping this and adding another example. Running following code in Next.js 14 produces a React 418 error

<div style={assignInlineVars({[styles.blockContainerTextAlign]: children.length === 1 ? 'center' : ''})}>

However, updating it to the following fixes it. It seems that the empty string '' is the problem, and adding unset fixes it

<div style={assignInlineVars({[styles.blockContainerTextAlign]: children.length === 1 ? 'center' : 'unset'})}>

[hamidrezahanafi]

This can be fixed by using method below
style={JSON.parse(JSON.stringify(assignInlineVars(inlineVars)))}