mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
693 stars 36 forks source link

When using use client with the @pigment-css/nextjs-plugin, an error occurs #29

Closed tsingksan closed 5 months ago

tsingksan commented 5 months ago

Steps to reproduce

  1. npx create-next-app@latest
  2. install @pigment-css/react @pigment-css/nextjs-plugin
  3. next.conifg.js
    
    import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';

const nextConfig = { output: "export", };

export default withPigment(nextConfig, { theme: extendTheme({ colors: { primary: 'tomato', secondary: 'cyan', }, spacing: { unit: 8, }, typography: { fontFamily: 'Inter, sans-serif', }, }), });


4. page.tsx

```tsx
'use client'
import styles from "./page.module.css";
import { css } from "@pigment-css/react";

const description = css`
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
  font-size: 0.85rem;
  max-width: var(--max-width);
  width: 100%;
  z-index: 1;
  font-family: var(--font-mono);
`;
......
export default function Home() {
 return (
    ......
      <div className={description}>Test</div>
    ......
 }
}

Current behavior

image

Expected behavior

No response

Context

No response

Your environment

System: OS: macOS 14.3 Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm pnpm: 8.9.0 - ~/.nvm/versions/node/v20.12.2/bin/pnpm Browsers: Chrome: 124.0.6367.60 Edge: Not Found Safari: 17.3 npmPackages: @types/react: ^18 => 18.2.61 react: ^18 => 18.2.0 react-dom: ^18 => 18.2.0 typescript: ^5 => 5.3.3

Search keywords: @pigment-css/nextjs-plugin use client

oliviertassinari commented 4 weeks ago

I have tried to reproduce the error, but couldn't. It looks like we are good.