Failed to build Pigment CSS when both colorSchemes are provided #43183
Description
Steps to reproduce
Link to live example: (required)
Steps:
- Setup NextJS 15 with react-compiler
- Setup material v6 with pigment CSS
- use extendTheme from @mui/material and configure custom theme with light and dark palettes
- run build / dev
//next.config.mjs
import { withPigment } from "@pigment-css/nextjs-plugin";
import { extendTheme } from "@mui/material";
const lightPalette = {
primary: { main: "#000" },
secondary: { main: "#3d3d3d" },
info: { main: "#8a8a8a" },
background: { default: "#fafafa", paper: "#efefef" },
};
const darkPalette = {
primary: { main: "#8cb0d9" },
secondary: { main: "#f7fafc" },
info: { main: "#4383cb" },
background: { default: "#0d1926", paper: "#1a324c" },
};
const breakpoints = {
values: {
xs: 576,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
},
};
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
reactCompiler: true,
},
};
/**
* @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
*/
const pigmentConfig = {
theme: extendTheme(
{
colorSchemes: {
light: {
palette: lightPalette
},
dark: {
palette: darkPalette
}
},
breakpoints
}
),
};
export default withPigment(nextConfig, pigmentConfig);//app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import '@mui/material-pigment-css/styles.css';
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
{children}
</body>
</html>
);
}//package.json
{
"name": "code-by-vysagh",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/material": "6.0.0-beta.4",
"@mui/material-pigment-css": "6.0.0-beta.0",
"babel-plugin-react-compiler": "^0.0.0-experimental-334f00b-20240725",
"next": "^15.0.0-rc.0",
"react": "19.0.0-rc-f994737d14-20240522",
"react-dom": "19.0.0-rc-f994737d14-20240522"
},
"devDependencies": {
"@pigment-css/nextjs-plugin": "^0.0.18",
"@types/node": "^20",
"@types/react": "18.2.74",
"@types/react-dom": "18.2.23",
"eslint": "^8",
"eslint-config-next": "14.2.5",
"typescript": "^5"
}
}Current behavior
The error only occurs when both colorSchemes are provided. If only one is defined, the project builds successfully.
Syntax error: [projectFolder]\node_modules.pnpm@mui+material-pigment-css@6.0.0-beta.0_@emotion+react@11.13.0_@types+react@[email protected]_jt4ujl3p5dkqkj3rnjygiu6ujm\node_modules@mui\material-pigment-css\styles.css Unclosed block
Expected behavior
Build without Failure
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.74)
npmPackages:
@emotion/react: ^11.13.0 => 11.13.0
@emotion/styled: ^11.13.0 => 11.13.0
@mui/material: 6.0.0-beta.4 => 6.0.0-beta.4
@mui/material-pigment-css: 6.0.0-beta.0 => 6.0.0-beta.0
@types/react: 18.2.74 => 18.2.74
react: 19.0.0-rc-f994737d14-20240522 => 19.0.0-rc-f994737d14-20240522
react-dom: 19.0.0-rc-f994737d14-20240522 => 19.0.0-rc-f994737d14-20240522
typescript: ^5 => 5.5.4
Search keywords: Pigment-CSS, NextJS-15, react-compiler