[pigmentcss] Rename zero-runtime to pigmentcss (#41317)

.codesandbox/ci.json

@@ -23,10 +23,10 @@
     "packages/mui-types",
     "packages/mui-utils",
     "packages-internal/scripts",
-    "packages/zero-runtime",
-    "packages/zero-unplugin",
-    "packages/zero-vite-plugin",
-    "packages/zero-next-plugin"
+    "packages/pigment-react",
+    "packages/pigment-unplugin",
+    "packages/pigment-vite-plugin",
+    "packages/pigment-nextjs-plugin"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
@@ -49,10 +49,10 @@
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
     "@mui-internal/docs-utils": "packages/docs-utils",
-    "@mui/zero-runtime": "packages/zero-runtime",
-    "@mui/zero-unplugin": "packages/zero-unplugin",
-    "@mui/zero-vite-plugin": "packages/zero-vite-plugin",
-    "@mui/zero-next-plugin": "packages/zero-next-plugin"
+    "@pigmentcss/react": "packages/pigment-react",
+    "@pigmentcss/unplugin": "packages/pigment-unplugin",
+    "@pigmentcss/vite-plugin": "packages/pigment-vite-plugin",
+    "@pigmentcss/nextjs-plugin": "packages/pigment-nextjs-plugin"
   },
   "sandboxes": [
     "/examples/material-ui-cra-ts",

.eslintignore

@@ -19,12 +19,12 @@
 /packages/mui-icons-material/src/*.js
 /packages/mui-icons-material/templateSvgIcon.js
 /packages/mui-utils/macros/__fixtures__/
-/packages/zero-runtime/utils/
-/packages/zero-runtime/processors/
-/packages/zero-runtime/exports/
-/packages/zero-runtime/theme/
-/packages/zero-runtime/tests/fixtures/
-/packages/zero-next-plugin/loader.js
+/packages/pigment-react/utils/
+/packages/pigment-react/processors/
+/packages/pigment-react/exports/
+/packages/pigment-react/theme/
+/packages/pigment-react/tests/fixtures/
+/packages/pigment-nextjs-plugin/loader.js
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*
 /test/bundling/fixtures/**/*.fixture.js

CHANGELOG.md

@@ -1193,7 +1193,7 @@ A big thanks to the 17 contributors who made this release possible.
 
 - &#8203;<!-- 09 -->Update peer dep of @mui/material (#39398) @brijeshb42
 
-### `@mui/zero-runtime@0.0.1-alpha.0`
+### `@pigmentcss/react@0.0.1-alpha.0`
 
 - &#8203;<!-- 06 -->Implement typings for public runtime API (#39215) @brijeshb42
 
@@ -1794,7 +1794,7 @@ A big thanks to the 11 contributors who made this release possible. This release
 
 - [useButton][base-ui] Accept arbitrary props in getRootProps and forward them (#38475) @DiegoAndai
 
-### `@mui/zero-runtime@0.0.1-alpha.1`
+### `@pigmentcss/react@0.0.1-alpha.1`
 
 - [system][zero][tag] Add support for sx prop (#38535) @brijeshb42
 
@@ -1857,7 +1857,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
 - [ButtonBase] Add ButtonBase component (#38319) @DiegoAndai
 - [Input] Add InputBase component (#38392) @mj12albert
 
-### `@mui/zero-runtime@0.0.1-alpha.0`
+### `@pigmentcss/react@0.0.1-alpha.0`
 
 - Implementation of styled tag processor for linaria (#38378) @brijeshb42
 

apps/local-ui-lib/index.js

@@ -1,4 +1,4 @@
-import { keyframes, styled } from '@mui/zero-runtime';
+import { keyframes, styled } from '@pigmentcss/react';
 
 export const bounceAnim = keyframes({
   'from, 20%, 53%, 80%, to': {

apps/local-ui-lib/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@mui/zero-runtime": "file:../../packages/zero-runtime/build"
+    "@pigmentcss/react": "file:../../packages/pigment-react"
   }
 }

apps/local-ui-lib/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "references": [
     {
-      "path": "../../packages/zero-runtime"
+      "path": "../../packages/pigment-react"
     }
   ]
 }

apps/zero-runtime-next-app/README.md → apps/pigment-next-app/README.md

@@ -20,11 +20,11 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-If you see and error like package `@mui/zero-runtime` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
+If you see and error like package `@pigmentcss/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
 
 ### Note
 
-If you are testing changes in zero-runtime packages itself while also running this demo app, start the watch command in a separate terminal to watch and build zero-runtime package files as they change -
+If you are testing changes in pigmentcss packages itself while also running this demo app, start the watch command in a separate terminal to watch and build pigmentcss package files as they change -
 
 ```bash
 pnpm watch:zero

apps/zero-runtime-next-app/next.config.js → apps/pigment-next-app/next.config.js

@@ -1,10 +1,10 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
-const { withZeroPlugin } = require('@mui/zero-next-plugin');
+const { withPigment } = require('@pigmentcss/nextjs-plugin');
 const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
 
 /**
- * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig
+ * @typedef {import('@pigmentcss/nextjs-plugin').PigmentOptions} PigmentOptions
  */
 
 const theme = extendTheme({
@@ -109,9 +109,9 @@ theme.generateCssVars = (colorScheme) => {
 };
 
 /**
- * @type {ZeroPluginConfig}
+ * @type {PigmentOptions}
  */
-const zeroPluginOptions = {
+const pigmentOptions = {
   theme,
   transformLibraries: ['local-ui-lib'],
   sourceMap: true,
@@ -129,4 +129,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withZeroPlugin(nextConfig, zeroPluginOptions);
+module.exports = withPigment(nextConfig, pigmentOptions);

apps/zero-runtime-next-app/package.json → apps/pigment-next-app/package.json

@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@mui/zero-runtime": "file:../../packages/zero-runtime",
+    "@pigmentcss/react": "file:../../packages/pigment-react",
     "@mui/utils": "file:../../packages/mui-utils/build",
     "@mui/base": "file:../../packages/mui-base/build",
     "@mui/material": "file:../../packages/mui-material/build",
@@ -23,8 +23,8 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@mui/zero-unplugin": "file:../../packages/zero-unplugin",
-    "@mui/zero-next-plugin": "file:../../packages/zero-next-plugin",
+    "@pigmentcss/unplugin": "file:../../packages/pigment-unplugin",
+    "@pigmentcss/nextjs-plugin": "file:../../packages/pigment-nextjs-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

apps/zero-runtime-next-app/src/app/box/page.tsx → apps/pigment-next-app/src/app/box/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable material-ui/no-empty-box */
 
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 import * as React from 'react';
 import { Box as MuiBox } from '../../components/Box';
 

apps/zero-runtime-next-app/src/app/layout.tsx → apps/pigment-next-app/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import '@mui/zero-runtime/styles.css';
+import '@pigmentcss/react/styles.css';
 import theme from './theme';
 
 import './globals.css';

apps/zero-runtime-next-app/src/app/material-ui/layout.tsx → apps/pigment-next-app/src/app/material-ui/layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

apps/zero-runtime-next-app/src/app/page.tsx → apps/pigment-next-app/src/app/page.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { styled, css } from '@mui/zero-runtime';
+import { styled, css } from '@pigmentcss/react';
 import styles from './page.module.css';
 
 const visuallyHidden = css({

apps/zero-runtime-next-app/src/app/slider/page.tsx → apps/pigment-next-app/src/app/slider/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 import { Button } from 'local-ui-lib';
 import Slider from '@/components/Slider/ZeroSlider';
 

apps/zero-runtime-next-app/src/augment.d.ts → apps/pigment-next-app/src/augment.d.ts

@@ -1,6 +1,6 @@
-import type { ExtendTheme } from '@mui/zero-runtime';
+import type { ExtendTheme } from '@pigmentcss/react';
 
-declare module '@mui/zero-runtime/theme' {
+declare module '@pigmentcss/react/theme' {
   interface ThemeTokens {
     'max-width': string;
     'border-radius': string;

apps/zero-runtime-vite-app/src/Box.jsx → apps/pigment-next-app/src/components/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@mui/zero-runtime';
+import { generateAtomics } from '@pigmentcss/react';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/zero-runtime-next-app/src/components/Slider/ZeroSlider.tsx → apps/pigment-next-app/src/components/Slider/ZeroSlider.tsx

@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 import { capitalize } from '@mui/material/utils';
 import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';

apps/zero-runtime-next-app/tsconfig.json → apps/pigment-next-app/tsconfig.json

@@ -35,7 +35,7 @@
       "path": "../../packages/mui-material/tsconfig.build.json"
     },
     {
-      "path": "../../packages/zero-runtime/tsconfig.json"
+      "path": "../../packages/pigment-react/tsconfig.json"
     }
   ]
 }

apps/zero-runtime-vite-app/README.md → apps/pigment-vite-app/README.md

@@ -7,8 +7,8 @@ This project is not part of the workspace yet.
 
 You can either run `pnpm build` command to build all the packages, or you need to build, the the minimum -
 
-1. `@mui/zero-runtime`
-2. `@mui/zero-vite-plugin`
+1. `@pigmentcss/react`
+2. `@pigmentcss/vite-plugin`
 
 Make sure you have also run `pnpm release:build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using -
 
@@ -24,4 +24,4 @@ After building, you can run the project by changing into the directory and then
 
 Optionally, before running the dev server, you can run `pnpm vite optimize --force` if it logged some error during `pnpm vite`.
 
-If you see and error like package `@mui/zero-runtime` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.
+If you see and error like package `@pigmentcss/react` not found, add it as a peer-dependency in `@mui/material`'s `package.json` file and run `pnpm build` and `pnpm install` again. Make sure to not push this change to git.

apps/zero-runtime-vite-app/package.json → apps/pigment-vite-app/package.json

@@ -9,7 +9,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@mui/zero-runtime": "file:../../packages/zero-runtime",
+    "@pigmentcss/react": "file:../../packages/pigment-react",
     "@mui/utils": "file:../../packages/mui-utils/build",
     "@mui/base": "file:../../packages/mui-base/build",
     "@mui/material": "file:../../packages/mui-material/build",
@@ -27,7 +27,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@mui/zero-vite-plugin": "file:../../packages/zero-vite-plugin",
+    "@pigmentcss/vite-plugin": "file:../../packages/pigment-vite-plugin",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.2.1",

apps/zero-runtime-vite-app/src/App.tsx → apps/pigment-vite-app/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled, generateAtomics } from '@mui/zero-runtime';
+import { styled, generateAtomics } from '@pigmentcss/react';
 import type { Breakpoint } from '@mui/system';
 import { Button, bounceAnim } from 'local-ui-lib';
 import Slider from './Slider/ZeroSlider';

apps/zero-runtime-next-app/src/components/Box.jsx → apps/pigment-vite-app/src/Box.jsx

@@ -1,4 +1,4 @@
-import { generateAtomics } from '@mui/zero-runtime';
+import { generateAtomics } from '@pigmentcss/react';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {

apps/zero-runtime-vite-app/src/Layout.tsx → apps/pigment-vite-app/src/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',

apps/zero-runtime-vite-app/src/Slider/ZeroSlider.tsx → apps/pigment-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 '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 import { capitalize } from '@mui/material/utils';
 import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';

apps/zero-runtime-vite-app/src/augment.ts → apps/pigment-vite-app/src/augment.ts

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

apps/zero-runtime-vite-app/src/component.tsx → apps/pigment-vite-app/src/component.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/zero-runtime';
+import { styled } from '@pigmentcss/react';
 
 export function Component() {
   return null;

apps/zero-runtime-vite-app/src/extend-zero.ts → apps/pigment-vite-app/src/extend-zero.ts

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

apps/zero-runtime-vite-app/src/main.tsx → apps/pigment-vite-app/src/main.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import routes from '~react-pages';
-import '@mui/zero-runtime/styles.css';
+import '@pigmentcss/react/styles.css';
 
 function App() {
   return <React.Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</React.Suspense>;

apps/zero-runtime-vite-app/tsconfig.json → apps/pigment-vite-app/tsconfig.json

@@ -15,7 +15,7 @@
       "path": "../../packages/mui-material/tsconfig.build.json"
     },
     {
-      "path": "../../packages/zero-runtime/tsconfig.json"
+      "path": "../../packages/pigment-react/tsconfig.json"
     }
   ]
 }

apps/zero-runtime-vite-app/vite.config.ts → apps/pigment-vite-app/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
-import { zeroVitePlugin as zeroPlugin } from '@mui/zero-vite-plugin';
+import { pigment } from '@pigmentcss/vite-plugin';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme();
@@ -34,7 +34,7 @@ theme.generateCssVars = (colorScheme) => {
 export default defineConfig({
   plugins: [
     reactPlugin({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
-    zeroPlugin({
+    pigment({
       theme,
       transformLibraries: ['local-ui-lib', '@mui/material'],
       sourceMap: true,