diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4d885bf9..31f9e459 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -46,3 +46,10 @@ jobs:
run: |
git remote -v
pnpm release:tag --dryRun
+ - name: Setup upterm session
+ uses: lhotari/action-upterm@v1
+ with:
+ ## limits ssh access and adds the ssh public key for the user which triggered the workflow
+ limit-access-to-actor: true
+ ## limits ssh access and adds the ssh public keys of the listed GitHub users
+ limit-access-to-users: brijeshb42
diff --git a/apps/test-vite-app/.gitignore b/apps/test-vite-app/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/apps/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/apps/test-vite-app/README.md b/apps/test-vite-app/README.md
new file mode 100644
index 00000000..a685e472
--- /dev/null
+++ b/apps/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:
+
+
+
+[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-vite-ts)
+
+[](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/apps/test-vite-app/index.html b/apps/test-vite-app/index.html
new file mode 100644
index 00000000..1b14d642
--- /dev/null
+++ b/apps/test-vite-app/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/apps/test-vite-app/package.json b/apps/test-vite-app/package.json
new file mode 100644
index 00000000..cd6302e3
--- /dev/null
+++ b/apps/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": "workspace:^",
+ "@types/react": "latest",
+ "@types/react-dom": "latest",
+ "@vitejs/plugin-react": "latest",
+ "typescript": "latest",
+ "vite": "latest"
+ }
+}
diff --git a/apps/test-vite-app/public/vite.svg b/apps/test-vite-app/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/apps/test-vite-app/public/vite.svg
@@ -0,0 +1 @@
+
+
+
+
+
+ ({
+ 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/apps/test-vite-app/src/main.tsx b/apps/test-vite-app/src/main.tsx
new file mode 100644
index 00000000..cb51206b
--- /dev/null
+++ b/apps/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/apps/test-vite-app/src/material-ui-pigment-css.d.ts b/apps/test-vite-app/src/material-ui-pigment-css.d.ts
new file mode 100644
index 00000000..dcaf18de
--- /dev/null
+++ b/apps/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/apps/test-vite-app/src/vite-env.d.ts b/apps/test-vite-app/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/apps/test-vite-app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// 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 @@
+
+
+
+
+
+ ({
+ 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 @@
+///