[examples] Add material-ui-pigment-css for Next.js and Vite (#43065)

.eslintrc.js

@@ -184,6 +184,7 @@ module.exports = {
     // This rule is great for raising people awareness of what a key is and how it works.
     'react/no-array-index-key': 'off',
     'react/no-danger': 'error',
+    'react/no-unknown-property': ['error', { ignore: ['sx'] }],
     'react/no-direct-mutation-state': 'error',
     // Not always relevant
     'react/require-default-props': 'off',

examples/material-ui-pigment-css-nextjs-ts/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

examples/material-ui-pigment-css-nextjs-ts/README.md

@@ -0,0 +1,45 @@
+# Material UI x Pigment CSS - Next.js App Router example in TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/material-ui-pigment-css-nextjs-ts
+cd material-ui-pigment-css-nextjs-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-nextjs-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/next/examples/material-ui-pigment-css-nextjs-ts)
+
+## Learn more
+
+To learn more about this example:
+
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://next.mui.com/material-ui/getting-started/templates/) section.

examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/material-ui-pigment-css-nextjs-ts/next.config.mjs

@@ -0,0 +1,16 @@
+import { withPigment } from '@pigment-css/nextjs-plugin';
+import { createTheme } from '@mui/material';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withPigment(nextConfig, {
+  theme: createTheme({
+    cssVariables: true,
+    colorSchemes: { light: true, dark: true },
+    typography: {
+      fontFamily: 'var(--font-roboto)',
+    },
+  }),
+  transformLibraries: ['@mui/material'],
+});

examples/material-ui-pigment-css-nextjs-ts/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "material-ui-pigment-css-nextjs-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@mui/material": "next",
+    "@mui/material-pigment-css": "next",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@pigment-css/nextjs-plugin": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { Roboto } from 'next/font/google';
+import '@mui/material-pigment-css/styles.css';
+
+const roboto = Roboto({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  display: 'swap',
+  variable: '--font-roboto',
+});
+
+export const metadata: Metadata = {
+  title: 'Material UI x Pigment CSS',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={roboto.variable}>{children}</body>
+    </html>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import DefaultPropsProvider from '@mui/material/DefaultPropsProvider';
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material-pigment-css/Container';
+import Grid from '@mui/material-pigment-css/Grid';
+import Stack from '@mui/material-pigment-css/Stack';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/material-pigment-css';
+
+const Title = styled('div')(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  font: theme.vars.font.body1,
+  fontSize: '1.125rem',
+  lineHeight: 1.7,
+}));
+
+export default function Home() {
+  return (
+    <main sx={{ minHeight: '100lvh', display: 'grid', placeItems: 'center' }}>
+      <DefaultPropsProvider
+        value={{
+          MuiChip: {
+            label: 'Available in v6',
+          },
+        }}
+      >
+        <CssBaseline />
+        <Container>
+          <Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }} sx={{ pl: 4.5 }}>
+              <Chip
+                sx={(theme) => ({
+                  mb: 2,
+                  fontWeight: 600,
+                  bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                  color: 'primary.dark',
+                })}
+              />
+              <Typography
+                variant="h1"
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 'clamp(3rem, 2.354rem + 2.7562vw, 5rem)',
+                  textWrap: 'balance',
+                  letterSpacing: '-0.025em',
+                }}
+              >
+                <span
+                  sx={(theme) => ({
+                    display: 'block',
+                    background: `linear-gradient(145deg, ${
+                      (theme.vars || theme).palette.primary.light
+                    } 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
+                    // `Webkit` has to come later
+                    WebkitBackgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                  })}
+                >
+                  Material UI
+                </span>
+                Pigment CSS
+              </Typography>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Stack
+                component="ul"
+                spacing={3}
+                sx={{
+                  m: 0,
+                  pl: 3,
+                  color: 'text.secondary',
+                  '& li': {
+                    pl: 2,
+                    fontSize: '1.125rem',
+                    fontWeight: 500,
+                    '&::marker': {
+                      color: 'text.primary',
+                    },
+                  },
+                }}
+              >
+                <li
+                  sx={{
+                    '&::marker': { content: '"⚡️"' },
+                  }}
+                >
+                  <Title>Build-time CSS Extraction</Title>
+                  <Typography>
+                    Pigment CSS looks through Material UI components used in the project and
+                    extracts the styles into plain CSS.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    '&::marker': { content: '"🚀"' },
+                  }}
+                >
+                  <Title>React Server Components</Title>
+                  <Typography>
+                    Material UI provides a set of layout components that integrate with Pigment CSS
+                    to support React Server Components.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    '&::marker': { content: '"📦"' },
+                  }}
+                >
+                  <Title>Emotionless</Title>
+                  <Typography>
+                    Replacing Emotion with Pigment CSS eliminates ~15kB from the final bundle.
+                  </Typography>
+                </li>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Container>
+      </DefaultPropsProvider>
+    </main>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/material-ui-pigment-css.d.ts

@@ -0,0 +1,19 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material-pigment-css' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+
+declare global {
+  namespace React {
+    interface HTMLAttributes {
+      sx?: SxProps<Theme>;
+    }
+    interface SVGProps {
+      sx?: SxProps<Theme>;
+    }
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/material-ui-pigment-css.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

examples/material-ui-pigment-css-vite-ts/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?