diff --git a/examples/test-vite-app/.gitignore b/examples/test-vite-app/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/test-vite-app/.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? diff --git a/examples/test-vite-app/README.md b/examples/test-vite-app/README.md new file mode 100644 index 00000000..a685e472 --- /dev/null +++ b/examples/test-vite-app/README.md @@ -0,0 +1,39 @@ +# Material UI x Pigment CSS - Vite example + +## How to use + +Download the example [or clone the repo](https://github.com/mui/material-ui): + + + +```bash +curl https://codeload.github.com/mui/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/material-ui-pigment-css-vite-ts +cd material-ui-pigment-css-vite-ts +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +or: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-vite-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-vite-ts) + +## The idea behind the example + +This example uses [Vite](https://github.com/vitejs/vite). +It includes `@mui/material` and [Pigment CSS](https://github.com/mui/pigment-css) as the style engine. + +## What's next? + + + +You now have a working example project. +You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section. diff --git a/examples/test-vite-app/index.html b/examples/test-vite-app/index.html new file mode 100644 index 00000000..1b14d642 --- /dev/null +++ b/examples/test-vite-app/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + Vite + React + TS + + +
+ + + diff --git a/examples/test-vite-app/package.json b/examples/test-vite-app/package.json new file mode 100644 index 00000000..a44124f0 --- /dev/null +++ b/examples/test-vite-app/package.json @@ -0,0 +1,26 @@ +{ + "name": "material-ui-pigment-css-vite", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@mui/material": "latest", + "@mui/material-pigment-css": "latest", + "react": "latest", + "react-dom": "latest" + }, + "devDependencies": { + "@pigment-css/vite-plugin": "latest", + "@types/react": "latest", + "@types/react-dom": "latest", + "@vitejs/plugin-react": "latest", + "typescript": "latest", + "vite": "latest" + } +} diff --git a/examples/test-vite-app/public/vite.svg b/examples/test-vite-app/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/test-vite-app/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/test-vite-app/src/App.tsx b/examples/test-vite-app/src/App.tsx new file mode 100644 index 00000000..03a5265e --- /dev/null +++ b/examples/test-vite-app/src/App.tsx @@ -0,0 +1,123 @@ +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 ( +
+ + + + + + ({ + mb: 2, + fontWeight: 600, + bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`, + color: "primary.dark", + })} + /> + + ({ + 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 + + Pigment CSS + + + + +
  • + Build-time CSS Extraction + + Pigment CSS looks through Material UI components used in the + project and extracts the styles into plain CSS. + +
    • +
  • + React Server Components + + Material UI provides a set of layout components that + integrates with Pigment CSS to support React Server + Components. + +
    • +
  • + Emotionless + + Replacing Emotion with Pigment CSS eliminates ~15kB from the + final bundle. + +
    • +     +     +     +     +     +
    + ); +} diff --git a/examples/test-vite-app/src/main.tsx b/examples/test-vite-app/src/main.tsx new file mode 100644 index 00000000..cb51206b --- /dev/null +++ b/examples/test-vite-app/src/main.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import '@mui/material-pigment-css/styles.css'; +import App from './App.tsx'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/test-vite-app/src/material-ui-pigment-css.d.ts b/examples/test-vite-app/src/material-ui-pigment-css.d.ts new file mode 100644 index 00000000..dcaf18de --- /dev/null +++ b/examples/test-vite-app/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; + } + interface SVGProps { + sx?: SxProps; + } + } +} diff --git a/examples/test-vite-app/src/vite-env.d.ts b/examples/test-vite-app/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/test-vite-app/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/test-vite-app/tsconfig.app.json b/examples/test-vite-app/tsconfig.app.json new file mode 100644 index 00000000..d739292a --- /dev/null +++ b/examples/test-vite-app/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/examples/test-vite-app/tsconfig.json b/examples/test-vite-app/tsconfig.json new file mode 100644 index 00000000..ea9d0cd8 --- /dev/null +++ b/examples/test-vite-app/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/examples/test-vite-app/tsconfig.node.json b/examples/test-vite-app/tsconfig.node.json new file mode 100644 index 00000000..3afdd6e3 --- /dev/null +++ b/examples/test-vite-app/tsconfig.node.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/test-vite-app/vite.config.ts b/examples/test-vite-app/vite.config.ts new file mode 100644 index 00000000..ebdb1f0d --- /dev/null +++ b/examples/test-vite-app/vite.config.ts @@ -0,0 +1,17 @@ +import { defineConfig, Plugin } from 'vite'; +import react from '@vitejs/plugin-react'; +import { pigment, PigmentOptions } from '@pigment-css/vite-plugin'; +import { createTheme } from '@mui/material/styles'; + +const pigmentConfig: PigmentOptions = { + theme: createTheme({ + cssVariables: true, + colorSchemes: { light: true, dark: true }, + }), + transformLibraries: ['@mui/material'], +}; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react(), pigment(pigmentConfig) as unknown as Plugin], +}); diff --git a/package.json b/package.json index 11adc93d..543d7930 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "proptypes": "echo \"tsx ./scripts/generateProptypes.ts\"", "deduplicate": "pnpm dedupe", "build": "lerna run --no-private build", - "build:ci": "lerna run build --concurrency 8 --skip-nx-cache", + "build:ci": "lerna run build --concurrency 8 --skip-nx-cache && cd examples/test-vite-app && npm install && npm run build", "build:codesandbox": "NODE_OPTIONS=\"--max_old_space_size=4096\" lerna run --concurrency 8 --no-private build", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private", "release:build": "lerna run --concurrency 8 --no-private build --skip-nx-cache",