[pigment-css] Create a wrapper package over Pigment CSS (mui#42819)

apps/pigment-css-next-app/.eslintrc

@@ -3,6 +3,7 @@
   "rules": {
     "import/prefer-default-export": "off",
     "import/extensions": "off",
-    "import/no-unresolved": "off"
-  }
+    "import/no-unresolved": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }

apps/pigment-css-next-app/next.config.js

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { extendTheme, stringifyTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -95,46 +95,17 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-theme.toRuntimeSource = stringifyTheme;
-
-function innerNoop() {
-  return null;
-}
-function outerNoop() {
-  return innerNoop;
-}
 
 /**
  * @type {PigmentOptions}
  */
 const pigmentOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
-  overrideContext: (context) => {
-    if (!context.$RefreshSig$) {
-      context.$RefreshSig$ = outerNoop;
-    }
-    return {
-      ...context,
-      require: (id) => {
-        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
-          return {
-            __esModule: true,
-            default: () => () => () => null,
-            internal_processStyles: () => {},
-            keyframes: () => '',
-            css: () => '',
-          };
-        }
-        return context.require(id);
-      },
-    };
-  },
 };
 
-/** @type {import('next').NextConfig} */
+/** @type {import('@pigment-css/nextjs-plugin').NextConfig} */
 const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,

apps/pigment-css-next-app/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
@@ -18,13 +18,12 @@
     "@mui/material-nextjs": "workspace:^",
     "@mui/system": "workspace:^",
     "@emotion/cache": "latest",
-    "local-ui-lib": "workspace:^",
     "next": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.16",
+    "@pigment-css/nextjs-plugin": "0.0.17",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

apps/pigment-css-next-app/src/app/box/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable material-ui/no-empty-box */
 
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import * as React from 'react';
 import { Box as MuiBox } from '../../components/Box';
 

apps/pigment-css-next-app/src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import theme from './theme';
 
 import './globals.css';

apps/pigment-css-next-app/src/app/material-ui/layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

apps/pigment-css-next-app/src/app/material-ui/page.tsx

@@ -3,17 +3,17 @@ import * as React from 'react';
 import Link from 'next/link';
 import fs from 'fs/promises';
 import path from 'path';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 
 export default async function MaterialUIPage() {
-  const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`));
+  const rootPaths = (await fs.readdir(path.join(process.cwd(), `src/app/material-ui`))).filter(
+    (p) => !p.startsWith('.'),
+  );
   return (
     <div>
       <h1>Material UI Components</h1>
       <nav>
-        <Box
-          as="ul"
+        <ul
           sx={{
             margin: 0,
             marginBlock: '1rem',
@@ -39,7 +39,7 @@ export default async function MaterialUIPage() {
                 </Link>
               </li>
             ))}
-        </Box>
+        </ul>
       </nav>
     </div>
   );

apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/PigmentGrid';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/PigmentStack';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

apps/pigment-css-next-app/src/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { styled, css } from '@pigment-css/react';
+import { styled, css } from '@mui/material-pigment-css';
 import PigmentStack from '@mui/material/PigmentStack';
 import PigmentContainer from '@mui/material/PigmentContainer';
 import PigmentHidden from '@mui/material/PigmentHidden';

apps/pigment-css-next-app/src/augment.d.ts

@@ -1,34 +1,48 @@
-import type { ExtendTheme } from '@pigment-css/react';
+import type { ExtendTheme } from '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
-  interface ThemeTokens {
-    'max-width': string;
-    'border-radius': string;
-    'font-mono': string;
-    'foreground-rgb': string;
-    'background-start-rgb': string;
-    'background-end-rgb': string;
-    'primary-glow': string;
-    'secondary-glow': string;
-    title: {
-      'start-rgb': string;
-      'end-rgb': string;
-      border: string;
-    };
-    callout: {
-      rgb: string;
-      'border-rgb': string;
-    };
-    card: {
-      rgb: string;
-      'border-rgb': string;
-    };
-  }
+interface ThemeTokens {
+  'max-width': string;
+  'border-radius': string;
+  'font-mono': string;
+  'foreground-rgb': string;
+  'background-start-rgb': string;
+  'background-end-rgb': string;
+  'primary-glow': string;
+  'secondary-glow': string;
+  title: {
+    'start-rgb': string;
+    'end-rgb': string;
+    border: string;
+  };
+  callout: {
+    rgb: string;
+    'border-rgb': string;
+  };
+  card: {
+    rgb: string;
+    'border-rgb': string;
+  };
+}
+
+type CustomTheme = ExtendTheme<{
+  colorScheme: 'light' | 'dark';
+  tokens: ThemeTokens;
+}>;
 
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeArgs {
-    theme: ExtendTheme<{
-      colorScheme: 'light' | 'dark';
-      tokens: ThemeTokens;
-    }>;
+    theme: CustomTheme;
+  }
+}
+
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      sx?:
+        | React.CSSProperties
+        | ((theme: CustomTheme) => React.CSSProperties)
+        | ReadonlyArray<React.CSSProperties | ((theme: CustomTheme) => React.CSSProperties)>;
+    }
   }
 }

apps/pigment-css-next-app/src/components/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/pigment-css-vite-app/.eslintrc

@@ -1,6 +1,7 @@
 {
   "rules": {
     "import/prefer-default-export": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }

apps/pigment-css-vite-app/package.json

@@ -9,15 +9,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
     "@mui/lab": "workspace:^",
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "clsx": "^2.1.1",
-    "local-ui-lib": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -27,7 +26,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "^0.0.16",
+    "@pigment-css/vite-plugin": "0.0.17",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

apps/pigment-css-vite-app/src/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/pigment-css-vite-app/src/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled.main(({ theme }) => ({
   display: 'flex',

apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx

@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import { capitalize } from '@mui/material/utils';
 import { SliderValueLabel } from '@mui/material/Slider';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';