[pigment-css] Create a wrapper package over Pigment CSS

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

@@ -97,44 +97,16 @@ theme.getColorSchemeSelector = (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": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin",
     "@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,6 +1,6 @@
-import type { ExtendTheme } from '@pigment-css/react';
+import type { ExtendTheme } from '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeTokens {
     'max-width': string;
     'border-radius': string;

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,16 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@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 +28,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": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin",
     "@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';

apps/pigment-css-vite-app/src/augment.ts

@@ -1,7 +1,7 @@
 import type { extendTheme } from '@mui/material/styles';
-import '@pigment-css/react/theme';
+import '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   export interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

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

@@ -1,4 +1,4 @@
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 export function Component() {
   return null;

apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx

@@ -1,4 +1,4 @@
-import { css } from '@pigment-css/react';
+import { css } from '@mui/material-pigment-css';
 import Alert from '@mui/material/Alert';
 import { FallbackProps } from 'react-error-boundary';
 

apps/pigment-css-vite-app/src/extend-zero.ts

@@ -1,6 +1,6 @@
 import type { extendTheme } from '@mui/material/styles';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;

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

@@ -4,11 +4,10 @@ import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-do
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CircularProgress from '@mui/material/CircularProgress';
 import CssBaseline from '@mui/material/CssBaseline';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 import { ErrorBoundary } from 'react-error-boundary';
 import routes from '~react-pages';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback';
 
 function App() {
@@ -17,8 +16,7 @@ function App() {
     <ErrorBoundary key={location.pathname} FallbackComponent={ErrorBoundaryFallback}>
       <React.Suspense
         fallback={
-          <Box
-            as="div"
+          <div
             className={css`
               width: 100vw;
               height: 100vh;
@@ -28,7 +26,7 @@ function App() {
             `}
           >
             <CircularProgress size={100} variant="indeterminate" />
-          </Box>
+          </div>
         }
       >
         {useRoutes(routes)}