[pigment-css][demo] Improve sx prop support

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

@@ -104,7 +104,6 @@ const pigmentOptions = {
   transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
-  transformSx: false,
 };
 
 /** @type {import('next').NextConfig} */
@@ -115,6 +114,10 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  devIndicators: {
+    buildActivity: true,
+    buildActivityPosition: 'bottom-right',
+  },
 };
 
 module.exports = withPigment(nextConfig, pigmentOptions);

apps/pigment-css-next-app/src/app/globals.css

@@ -17,10 +17,4 @@
     color: inherit;
     text-decoration: none;
   }
-
-  @media (prefers-color-scheme: dark) {
-    html {
-      color-scheme: dark;
-    }
-  }
 }

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

@@ -24,16 +24,15 @@
     "react-router-dom": "^6.22.1"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@pigment-css/vite-plugin": "workspace:^",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.0.12",
+    "vite": "5.2.2",
     "vite-plugin-pages": "^0.32.0"
   },
   "nx": {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled } from '@pigment-css/react';
 
-const Main = styled('div')(({ theme }) => ({
+const Main = styled.main(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: '32px',

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

@@ -0,0 +1,21 @@
+import { css } from '@pigment-css/react';
+import Alert from '@mui/material/Alert';
+import { FallbackProps } from 'react-error-boundary';
+
+export function ErrorBoundaryFallback({ error }: FallbackProps) {
+  const err = error as Error;
+  return (
+    <Alert severity="error" variant="outlined">
+      Error while rendering.
+      <pre
+        className={css({
+          border: '1px dotted #ccc',
+          padding: 4,
+          whiteSpace: 'pre-wrap',
+        })}
+      >
+        {err.message}
+      </pre>
+    </Alert>
+  );
+}

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

@@ -1,13 +1,40 @@
 import * as ReactDOMClient from 'react-dom/client';
 import * as React from 'react';
-import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
+import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-dom';
 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 { ErrorBoundary } from 'react-error-boundary';
 import routes from '~react-pages';
 import '@pigment-css/react/styles.css';
+import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback';
 
 function App() {
-  return <React.Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</React.Suspense>;
+  const location = useLocation();
+  return (
+    <ErrorBoundary key={location.pathname} FallbackComponent={ErrorBoundaryFallback}>
+      <React.Suspense
+        fallback={
+          <Box
+            as="div"
+            className={css`
+              width: 100vw;
+              height: 100vh;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            `}
+          >
+            <CircularProgress size={100} variant="indeterminate" />
+          </Box>
+        }
+      >
+        {useRoutes(routes)}
+      </React.Suspense>
+    </ErrorBoundary>
+  );
 }
 
 const theme = createTheme({

apps/pigment-css-vite-app/src/pages/index.tsx

@@ -1 +1,11 @@
-export { App as default } from '../App';
+import { Link } from 'react-router-dom';
+
+export default function App() {
+  return (
+    <div>
+      <p>
+        See Material UI components in <Link to="/material-ui">action</Link>!
+      </p>
+    </div>
+  );
+}

apps/pigment-css-vite-app/src/pages/material-ui/react-avatar.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import MaterialUILayout from '../../Layout';
 import BackgroundLetterAvatars from '../../../../../docs/data/material/components/avatars/BackgroundLetterAvatars.tsx';
 import BadgeAvatars from '../../../../../docs/data/material/components/avatars/BadgeAvatars.tsx';

apps/pigment-css-vite-app/src/pages/material-ui/react-breadcrumbs.tsx

@@ -1,34 +1,14 @@
-import * as React from 'react';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import { css } from '@pigment-css/react';
-import Alert from '@mui/material/Alert';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import MaterialUILayout from '../../Layout';
-import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx';
-import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx';
-import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx';
-import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator.tsx';
-import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx';
-import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx';
-import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx';
-
-function ErrorBoundaryFallback({ error }: FallbackProps) {
-  const err = error as Error;
-  return (
-    <Alert severity="error" variant="outlined">
-      Error while rendering.
-      <pre
-        className={css({
-          border: '1px dotted #ccc',
-          padding: 4,
-          whiteSpace: 'pre-wrap',
-        })}
-      >
-        {err.message}
-      </pre>
-    </Alert>
-  );
-}
+import ActiveLastBreadcrumb from '../../../../../docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb';
+import BasicBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/BasicBreadcrumbs';
+import CollapsedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs';
+import CustomSeparator from '../../../../../docs/data/material/components/breadcrumbs/CustomSeparator';
+import CustomizedBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs';
+import IconBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/IconBreadcrumbs';
+import RouterBreadcrumbs from '../../../../../docs/data/material/components/breadcrumbs/RouterBreadcrumbs';
+import { ErrorBoundaryFallback } from '../../components/ErrorBoundaryFallback';
 
 export default function Breadcrumbs() {
   return (

apps/pigment-css-vite-app/vite.config.ts

@@ -23,13 +23,25 @@ theme.getColorSchemeSelector = (colorScheme) => {
 
 export default defineConfig({
   plugins: [
-    reactPlugin({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
+    reactPlugin({
+      include: /\.(mdx|js|jsx|ts|tsx)$/,
+      babel: {
+        presets: [
+          [
+            '@babel/preset-react',
+            {
+              runtime: 'automatic',
+            },
+          ],
+          '@babel/preset-typescript',
+        ],
+      },
+    }),
     pigment({
       theme,
       transformLibraries: ['local-ui-lib', '@mui/material'],
       sourceMap: true,
       displayName: true,
-      transformSx: false,
     }),
     Pages(),
     splitVendorChunkPlugin(),