Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Failed to build Pigment CSS when both colorSchemes are provided #43183

Closed
vysaghthambi opened this issue Aug 5, 2024 · 5 comments · Fixed by #43237
Closed

Failed to build Pigment CSS when both colorSchemes are provided #43183

vysaghthambi opened this issue Aug 5, 2024 · 5 comments · Fixed by #43237
Assignees
@siriwatknp
Labels
bug 🐛 Something doesn't work package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/*

Comments

@vysaghthambi
Copy link

vysaghthambi commented Aug 5, 2024 •
edited
Loading

Steps to reproduce

Link to live example: (required)

Steps:

  1. Setup NextJS 15 with react-compiler
  2. Setup material v6 with pigment CSS
  3. use extendTheme from @mui/material and configure custom theme with light and dark palettes
  4. 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@18.2.74_react@19.0_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
@vysaghthambi vysaghthambi added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 5, 2024
@vysaghthambi vysaghthambi changed the title Failed to build Pigment CSS Failed to build Pigment CSS when both colorSchemes are provided Aug 5, 2024
@zannager zannager added the package: system Specific to @mui/system label Aug 5, 2024
@mnajdova
Copy link
Member

mnajdova commented Aug 6, 2024

Please create example repository with a reproduction that we can look into. Thanks!

@brijeshb42 brijeshb42 added status: waiting for author Issue with insufficient information status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer status: waiting for author Issue with insufficient information labels Aug 6, 2024
@brijeshb42
Copy link
Contributor

@siriwatknp I have tracked down this issue to the createGetSelector module in @mui/material. The actual error is due to imbalance in the closing curly braces originating from this line

@media (prefers-color-scheme: dark) { :root': excludedVariables

In a nutshell -

e = require('@emotion/serialize');
e.serializeStyles([{
  '@media (prefers-color-scheme: dark) { :root': {
    color: 'red'
  }
}])

outputs

@media (prefers-color-scheme: dark) { :root{color:red;}

which is not a valid css.

Instead, the selector should be broken down into nested objects like -

e.serializeStyles([{
  '@media (prefers-color-scheme: dark)': {
    ':root': {
      color: 'red'
    }
  }
}])

which outputs the correct css -

@media (prefers-color-scheme: dark){:root{color:red;}}

@brijeshb42 brijeshb42 assigned siriwatknp and unassigned brijeshb42 Aug 6, 2024
@siriwatknp siriwatknp mentioned this issue Aug 9, 2024
Merged
1 task
@siriwatknp
Copy link
Member

@brijeshb42 here is the fix #43237.

Note: @media (prefers-color-scheme: dark) { :root' works with Emotion as a style-engine. May be due to stylis?

@siriwatknp siriwatknp added bug 🐛 Something doesn't work package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/* and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer package: system Specific to @mui/system labels Aug 9, 2024
@brijeshb42
Copy link
Contributor

Or it could be because stylis is not involved here. We are directly using serializeStyles which does not do any css processing.

@siriwatknp
Copy link
Member

siriwatknp commented Aug 9, 2024 •
edited
Loading

@brijeshb42 I'd keep Pigment CSS like that until there is a strong reason to add stylis. For now, I think it should be fixed from Material UI side because @media (prefers-color-scheme: dark) { :root is not a standard #43237.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
bug 🐛 Something doesn't work package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/*
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[material-ui][pigment-css] Fix getSelector prefers-color-scheme to be object siriwatknp/material-ui
5 participants
@brijeshb42 @mnajdova @siriwatknp @vysaghthambi @zannager