Incorrect generated cssText when using Next.js and "use client" and css with interpolation syntax

[konowrockis]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/devbox/stoic-chaum-87v53l
2. Try to run the app in development mode

Basically it always generates incorrect syntax when using Next.js inside "use client" components when using css` display: none;` syntax.

Current behavior

The app fails with

./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@pigment-css/nextjs-plugin/zero-virtual.css?JTI1N0IlMjUyMmZpbGVuYW1lJTI1MjIlMjUzQSUyNTIyc3R5bGVzLmNzcy50cyUyNTIyJTI1MkMlMjUyMnNvdXJjZSUyNTIyJTI1M0ElMjUyMiUyNTVDbiUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTQwbGF5ZXIlMjUyMHBpZ21lbnQuX2E3cDN5YyUyNTIwJTI1N0IlMjU1Q24lMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwLmsxeTVobWd3JTI1N0IwJTI1M0FkaXNwbGF5JTI1M0Fub25lJTI1M0IlMjU3RCUyNTVDbiUyNTVDbiUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTdEJTI1NUNuJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMCUyNTIwJTI1MjAlMjUyMiUyNTdE:3:34
Syntax error: /project/workspace/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@pigment-css/nextjs-plugin/zero-virtual.css Missed semicolon

  1 | 
  2 |             @layer pigment._a7p3yc {
> 3 |               .k1y5hmgw{0:display:none;}
    |                                  ^
  4 | 
  5 |             }
 GET / 500 in 21536ms

Expected behavior

Generated source should be correctly generated without additional 0:, 1:.

Context

I did some digging around and the cssText which we get from here already contains invalid syntax. However the source code in each compilation gets transformed twice - I assume once for the server and once for the client. And one source code is vastly different from the other. I'm no expert in build tools but I'm guessing it's getting transformed by the swc and then the css is generated again from the transformed output. I'm not sure whether that is pigment or WyW-in-JS problem specifically.
I was also able to generate 1: when doing media queries. I might provide repro for that if necessary.

Your environment

npx @mui/envinfo

    System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.69
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.0 
    @mui/private-theming:  6.4.3 
    @mui/styled-engine:  6.4.3 
    @mui/system:  6.4.3 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.3 
    @pigment-css/nextjs-plugin: 0.0.30 => 0.0.30 
    @pigment-css/react: 0.0.30 => 0.0.30 
    @pigment-css/unplugin:  0.0.30 
    @types/react: ^19 => 19.0.10 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5 => 5.7.3

Search keywords: next nextjs client components server side rendering missed semicolon 0: swc interpolation