diff --git a/apps/local-ui-lib/.eslintrc b/apps/local-ui-lib/.eslintrc deleted file mode 100644 index 9a6f8e3481197e..00000000000000 --- a/apps/local-ui-lib/.eslintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "rules": { - "import/prefer-default-export": "off", - "import/no-unresolved": "off" - } -} diff --git a/apps/local-ui-lib/index.d.ts b/apps/local-ui-lib/index.d.ts deleted file mode 100644 index 3f926bfe3bb446..00000000000000 --- a/apps/local-ui-lib/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react'; - -export const bounceAnim: string; -export const Button: React.ComponentType< - React.JSX.IntrinsicElements['button'] & { - isRed?: boolean; - sx?: unknown; - } ->; diff --git a/apps/local-ui-lib/index.js b/apps/local-ui-lib/index.js deleted file mode 100644 index 21893b8348b4ac..00000000000000 --- a/apps/local-ui-lib/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import { keyframes, styled } from '@pigment-css/react'; - -export const bounceAnim = keyframes({ - 'from, 20%, 53%, 80%, to': { - transform: 'translate3d(0,0,0)', - }, - '40%, 43%': { - transform: 'translate3d(0, -30px, 0)', - }, - '70%': { - transform: 'translate3d(0, -15px, 0)', - }, - '90%': { - transform: 'translate3d(0,-4px,0)', - }, -}); - -export const Button = styled('button', { - name: 'MuiButton', - slot: 'Root', -})( - () => ({ - fontFamily: 'sans-serif', - }), - { - fontFamily: 'sans-serif', - color: (props) => (props.isRed ? 'primary.main' : 'secondary.main'), - '--css-variable': (props) => (props.isRed ? 'palette.primary.main' : 'palette.secondary.main'), - }, -); diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json deleted file mode 100644 index 66f3077adca4dc..00000000000000 --- a/apps/local-ui-lib/package.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "local-ui-lib", - "version": "0.0.1", - "private": true, - "dependencies": { - "@pigment-css/react": "^0.0.16" - } -} diff --git a/apps/local-ui-lib/tsconfig.json b/apps/local-ui-lib/tsconfig.json deleted file mode 100644 index 4082f16a5d91ce..00000000000000 --- a/apps/local-ui-lib/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../tsconfig.json" -} diff --git a/apps/pigment-css-next-app/.eslintrc b/apps/pigment-css-next-app/.eslintrc index 327cf67d7ce21a..73d03ea1064762 100644 --- a/apps/pigment-css-next-app/.eslintrc +++ b/apps/pigment-css-next-app/.eslintrc @@ -3,6 +3,7 @@ "rules": { "import/prefer-default-export": "off", "import/extensions": "off", - "import/no-unresolved": "off" - } + "import/no-unresolved": "off", + "react/no-unknown-property": ["error", { "ignore": ["sx"] }], + }, } diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js index f60594696977b2..6f71bd85cbf8fe 100644 --- a/apps/pigment-css-next-app/next.config.js +++ b/apps/pigment-css-next-app/next.config.js @@ -1,7 +1,7 @@ /* eslint-env node */ // eslint-ignore-next-line import/no-unresolved const { withPigment } = require('@pigment-css/nextjs-plugin'); -const { extendTheme, stringifyTheme } = require('@mui/material/styles'); +const { extendTheme } = require('@mui/material/styles'); /** * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions @@ -95,46 +95,17 @@ const theme = extendTheme({ theme.getColorSchemeSelector = (colorScheme) => { return `@media (prefers-color-scheme: ${colorScheme})`; }; -theme.toRuntimeSource = stringifyTheme; - -function innerNoop() { - return null; -} -function outerNoop() { - return innerNoop; -} /** * @type {PigmentOptions} */ const pigmentOptions = { theme, - transformLibraries: ['local-ui-lib'], sourceMap: true, displayName: true, - overrideContext: (context) => { - if (!context.$RefreshSig$) { - context.$RefreshSig$ = outerNoop; - } - return { - ...context, - require: (id) => { - if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') { - return { - __esModule: true, - default: () => () => () => null, - internal_processStyles: () => {}, - keyframes: () => '', - css: () => '', - }; - } - return context.require(id); - }, - }; - }, }; -/** @type {import('next').NextConfig} */ +/** @type {import('@pigment-css/nextjs-plugin').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 0a1813697500fc..369d3e801853d0 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -9,7 +9,7 @@ "clean": "rimraf .next" }, "dependencies": { - "@pigment-css/react": "^0.0.16", + "@mui/material-pigment-css": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/icons-material": "workspace:^", @@ -18,13 +18,12 @@ "@mui/material-nextjs": "workspace:^", "@mui/system": "workspace:^", "@emotion/cache": "latest", - "local-ui-lib": "workspace:^", "next": "latest", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "^0.0.16", + "@pigment-css/nextjs-plugin": "0.0.17", "@types/node": "^20.5.7", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", diff --git a/apps/pigment-css-next-app/src/app/box/page.tsx b/apps/pigment-css-next-app/src/app/box/page.tsx index 877b36e5a39275..a24e0ae14f19b9 100644 --- a/apps/pigment-css-next-app/src/app/box/page.tsx +++ b/apps/pigment-css-next-app/src/app/box/page.tsx @@ -1,6 +1,6 @@ /* eslint-disable material-ui/no-empty-box */ -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; import * as React from 'react'; import { Box as MuiBox } from '../../components/Box'; diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx index b232ba291a9f28..5176558a488967 100644 --- a/apps/pigment-css-next-app/src/app/layout.tsx +++ b/apps/pigment-css-next-app/src/app/layout.tsx @@ -2,7 +2,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import { ThemeProvider } from '@mui/material/styles'; -import '@pigment-css/react/styles.css'; +import '@mui/material-pigment-css/styles.css'; import theme from './theme'; import './globals.css'; diff --git a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx index 0ee7bd13e9ec99..27ed6e7bf7faa2 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; const Main = styled('div')(({ theme }) => ({ display: 'flex', diff --git a/apps/pigment-css-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx index bcea6b4568eaef..8d346b5bd4d800 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/page.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/page.tsx @@ -3,17 +3,17 @@ import * as React from 'react'; import Link from 'next/link'; import fs from 'fs/promises'; import path from 'path'; -import { css } from '@pigment-css/react'; -import Box from '@pigment-css/react/Box'; +import { css } from '@mui/material-pigment-css'; export default async function MaterialUIPage() { - const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`)); + const rootPaths = (await fs.readdir(path.join(process.cwd(), `src/app/material-ui`))).filter( + (p) => !p.startsWith('.'), + ); return (

Material UI Components

); diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx index 95d73163427a61..682738ce066e60 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import Grid from '@mui/material/PigmentGrid'; -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx index 4c541461688a3f..5f8510e05c4ac8 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Divider from '@mui/material/Divider'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/PigmentStack'; -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx index 9b5daea6b2749e..12dbb97694bd55 100644 --- a/apps/pigment-css-next-app/src/app/page.tsx +++ b/apps/pigment-css-next-app/src/app/page.tsx @@ -1,5 +1,5 @@ import Image from 'next/image'; -import { styled, css } from '@pigment-css/react'; +import { styled, css } from '@mui/material-pigment-css'; import PigmentStack from '@mui/material/PigmentStack'; import PigmentContainer from '@mui/material/PigmentContainer'; import PigmentHidden from '@mui/material/PigmentHidden'; diff --git a/apps/pigment-css-next-app/src/augment.d.ts b/apps/pigment-css-next-app/src/augment.d.ts index 6e98d66132560d..62e7bf8f80960c 100644 --- a/apps/pigment-css-next-app/src/augment.d.ts +++ b/apps/pigment-css-next-app/src/augment.d.ts @@ -1,34 +1,48 @@ -import type { ExtendTheme } from '@pigment-css/react'; +import type { ExtendTheme } from '@mui/material-pigment-css'; -declare module '@pigment-css/react/theme' { - interface ThemeTokens { - 'max-width': string; - 'border-radius': string; - 'font-mono': string; - 'foreground-rgb': string; - 'background-start-rgb': string; - 'background-end-rgb': string; - 'primary-glow': string; - 'secondary-glow': string; - title: { - 'start-rgb': string; - 'end-rgb': string; - border: string; - }; - callout: { - rgb: string; - 'border-rgb': string; - }; - card: { - rgb: string; - 'border-rgb': string; - }; - } +interface ThemeTokens { + 'max-width': string; + 'border-radius': string; + 'font-mono': string; + 'foreground-rgb': string; + 'background-start-rgb': string; + 'background-end-rgb': string; + 'primary-glow': string; + 'secondary-glow': string; + title: { + 'start-rgb': string; + 'end-rgb': string; + border: string; + }; + callout: { + rgb: string; + 'border-rgb': string; + }; + card: { + rgb: string; + 'border-rgb': string; + }; +} + +type CustomTheme = ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: ThemeTokens; +}>; +declare module '@mui/material-pigment-css/theme' { interface ThemeArgs { - theme: ExtendTheme<{ - colorScheme: 'light' | 'dark'; - tokens: ThemeTokens; - }>; + theme: CustomTheme; + } +} + +declare global { + namespace React { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes { + sx?: + | React.CSSProperties + | ((theme: CustomTheme) => React.CSSProperties) + | ReadonlyArray React.CSSProperties)>; + } } } diff --git a/apps/pigment-css-next-app/src/components/Box.jsx b/apps/pigment-css-next-app/src/components/Box.jsx index 930ee1bdf985ed..53342471939563 100644 --- a/apps/pigment-css-next-app/src/components/Box.jsx +++ b/apps/pigment-css-next-app/src/components/Box.jsx @@ -1,4 +1,4 @@ -import { generateAtomics } from '@pigment-css/react'; +import { generateAtomics } from '@mui/material-pigment-css'; const atomics = generateAtomics(({ theme }) => ({ conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => { diff --git a/apps/pigment-css-vite-app/.eslintrc b/apps/pigment-css-vite-app/.eslintrc index 6a8ae0c6d72517..00755ca39b075b 100644 --- a/apps/pigment-css-vite-app/.eslintrc +++ b/apps/pigment-css-vite-app/.eslintrc @@ -1,6 +1,7 @@ { "rules": { "import/prefer-default-export": "off", - "react/react-in-jsx-scope": "off" - } + "react/react-in-jsx-scope": "off", + "react/no-unknown-property": ["error", { "ignore": ["sx"] }], + }, } diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 84e39df71db8ed..0bbfc9d7a5956e 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -9,7 +9,7 @@ "build": "vite build" }, "dependencies": { - "@pigment-css/react": "^0.0.16", + "@mui/material-pigment-css": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/icons-material": "workspace:^", @@ -17,7 +17,6 @@ "@mui/material": "workspace:^", "@mui/system": "workspace:^", "clsx": "^2.1.1", - "local-ui-lib": "workspace:^", "react": "^18.3.1", "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", @@ -27,7 +26,7 @@ "devDependencies": { "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", - "@pigment-css/vite-plugin": "^0.0.16", + "@pigment-css/vite-plugin": "0.0.17", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", diff --git a/apps/pigment-css-vite-app/src/Box.jsx b/apps/pigment-css-vite-app/src/Box.jsx index 930ee1bdf985ed..53342471939563 100644 --- a/apps/pigment-css-vite-app/src/Box.jsx +++ b/apps/pigment-css-vite-app/src/Box.jsx @@ -1,4 +1,4 @@ -import { generateAtomics } from '@pigment-css/react'; +import { generateAtomics } from '@mui/material-pigment-css'; const atomics = generateAtomics(({ theme }) => ({ conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => { diff --git a/apps/pigment-css-vite-app/src/Layout.tsx b/apps/pigment-css-vite-app/src/Layout.tsx index 321dcacf08c933..164e90e4c59420 100644 --- a/apps/pigment-css-vite-app/src/Layout.tsx +++ b/apps/pigment-css-vite-app/src/Layout.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; const Main = styled.main(({ theme }) => ({ display: 'flex', diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx index 9d05cf3a262d24..e7f8b23b07411a 100644 --- a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx +++ b/apps/pigment-css-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 '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; import { capitalize } from '@mui/material/utils'; import { SliderValueLabel } from '@mui/material/Slider'; import { useSlider, valueToPercent } from '@mui/base/useSlider'; diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts index b1de2899db0e28..6b26bb3b5bd5d9 100644 --- a/apps/pigment-css-vite-app/src/augment.ts +++ b/apps/pigment-css-vite-app/src/augment.ts @@ -1,11 +1,12 @@ import type { extendTheme } from '@mui/material/styles'; import '@pigment-css/react/theme'; +type CustomTheme = ReturnType & { + applyDarkStyles(obj: T): Record; +}; declare module '@pigment-css/react/theme' { - export interface ThemeArgs { - theme: ReturnType & { - applyDarkStyles(obj: T): Record; - }; + interface ThemeArgs { + theme: CustomTheme; } } @@ -17,3 +18,15 @@ declare module '@mui/material' { mainChannel: string; } } + +declare global { + namespace React { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes { + sx?: + | React.CSSProperties + | ((theme: CustomTheme) => React.CSSProperties) + | ReadonlyArray React.CSSProperties)>; + } + } +} diff --git a/apps/pigment-css-vite-app/src/component.tsx b/apps/pigment-css-vite-app/src/component.tsx index a6c1861c3c115f..9fc708e543b784 100644 --- a/apps/pigment-css-vite-app/src/component.tsx +++ b/apps/pigment-css-vite-app/src/component.tsx @@ -1,4 +1,4 @@ -import { styled } from '@pigment-css/react'; +import { styled } from '@mui/material-pigment-css'; export function Component() { return null; diff --git a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx index 74a73000ed37bc..ad853f31d9945b 100644 --- a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx +++ b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx @@ -1,4 +1,4 @@ -import { css } from '@pigment-css/react'; +import { css } from '@mui/material-pigment-css'; import Alert from '@mui/material/Alert'; import { FallbackProps } from 'react-error-boundary'; diff --git a/apps/pigment-css-vite-app/src/extend-zero.ts b/apps/pigment-css-vite-app/src/extend-zero.ts index ea1689cc1f65af..dd830327f2696c 100644 --- a/apps/pigment-css-vite-app/src/extend-zero.ts +++ b/apps/pigment-css-vite-app/src/extend-zero.ts @@ -1,6 +1,6 @@ import type { extendTheme } from '@mui/material/styles'; -declare module '@pigment-css/react/theme' { +declare module '@mui/material-pigment-css/theme' { interface ThemeArgs { theme: ReturnType & { applyDarkStyles(obj: T): Record; diff --git a/apps/pigment-css-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx index 15e708be89b719..3bb21302e7a0cd 100644 --- a/apps/pigment-css-vite-app/src/main.tsx +++ b/apps/pigment-css-vite-app/src/main.tsx @@ -4,11 +4,10 @@ import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-do 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 { css } from '@mui/material-pigment-css'; import { ErrorBoundary } from 'react-error-boundary'; import routes from '~react-pages'; -import '@pigment-css/react/styles.css'; +import '@mui/material-pigment-css/styles.css'; import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback'; function App() { @@ -17,8 +16,7 @@ function App() { - + } > {useRoutes(routes)} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx index 9e7fadd4922b39..148a484483c5a5 100644 --- a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx +++ b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { useLocation, matchRoutes, Link } from 'react-router-dom'; -import Box from '@pigment-css/react/Box'; import routes from '~react-pages'; import Layout from '../../Layout'; @@ -17,8 +16,7 @@ export default function MaterialIndex() {

Material UI Components

diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts index c58f13101e834f..4b00635a94362b 100644 --- a/apps/pigment-css-vite-app/vite.config.ts +++ b/apps/pigment-css-vite-app/vite.config.ts @@ -1,4 +1,3 @@ -import * as path from 'node:path'; import { defineConfig, splitVendorChunkPlugin } from 'vite'; import reactPlugin from '@vitejs/plugin-react'; import Pages from 'vite-plugin-pages'; @@ -39,7 +38,7 @@ export default defineConfig({ }), pigment({ theme, - transformLibraries: ['local-ui-lib', '@mui/material'], + transformLibraries: ['@mui/material'], sourceMap: true, displayName: true, }), @@ -52,15 +51,6 @@ export default defineConfig({ find: /^@mui\/icons-material\/(.*)/, replacement: '@mui/icons-material/esm/$1', }, - { - find: /^@pigment-css\/react$/, - // There is a weird issue on the CI where Vite/Rollup isn't able to resolve - // the path for pigment-css/react in this monodrep. This is a temporary workaround. It does not - // affect local development or end-user projects. - replacement: path.resolve( - path.join(process.cwd(), 'node_modules/@pigment-css/react/build/index.mjs'), - ), - }, ], }, }); diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md new file mode 100644 index 00000000000000..2386e677fa7482 --- /dev/null +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -0,0 +1,652 @@ +# Migrating to Pigment CSS + +

This guide helps you integrate Pigment CSS with Material UI v6.

+ +Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/). + +## Introduction + +The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client-side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server. + +Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion. +It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end. + +## Supported frameworks + +Pigment CSS can be used with one of the following frameworks: + +- [Next.js App Router](https://nextjs.org/docs/app/) with Webpack 5 (Turbo is not supported yet) +- [Vite](https://vitejs.dev/) + +## Installation + +First, install the Material UI wrapper package for Pigment CSS: + + + +```bash npm +npm install @mui/material-pigment-css +``` + +```bash yarn +yarn add @mui/material-pigment-css +``` + +```bash pnpm +pnpm add @mui/material-pigment-css +``` + + + +Then, follow the instructions based on your framework: + +### Next.js + +Install the Next.js plugin as a dev dependency: + + + +```bash npm +npm install --save-dev @pigment-css/nextjs-plugin +``` + +```bash yarn +yarn add -D @pigment-css/nextjs-plugin +``` + +```bash pnpm +pnpm add -D @pigment-css/nextjs-plugin +``` + + + +Then, open Next.js config file and add the plugin: + + + +```js next.config.mjs +import { withPigment } from '@pigment-css/nextjs-plugin'; + +const nextConfig = { + // ...Your nextjs config. +}; + +/** + * @type {import('@pigment-css/nextjs-plugin').PigmentOptions} + */ +const pigmentConfig = {}; // we will refer to this later + +export default withPigment(nextConfig, pigmentConfig); +``` + +```js next.config.js +const { withPigment } = require('@pigment-css/nextjs-plugin'); + +const nextConfig = { + // ...Your nextjs config. +}; + +/** + * @type {import('@pigment-css/nextjs-plugin').PigmentOptions} + */ +const pigmentConfig = {}; // we will refer to this later + +module.exports = withPigment(nextConfig, pigmentConfig); +``` + + + +Finally, import the stylesheet at the top of the layout file. + +```diff title="app/layout.(js|tsx)" + import type { Metadata } from 'next'; + import { Inter } from 'next/font/google'; + ++ import '@mui/material-pigment-css/styles.css'; + + export default function RootLayout(props) { + return ( + + + {props.children} + + + ); + } +``` + +### Vite + +Install the Vite plugin as a dev dependency: + + + +```bash npm +npm install --save-dev @pigment-css/vite-plugin +``` + +```bash yarn +yarn add -D @pigment-css/vite-plugin +``` + +```bash pnpm +pnpm add -D @pigment-css/vite-plugin +``` + + + +Next, open vite config file, usually named `vite.config.js`, and add the plugin: + +```js +import { defineConfig } from 'vite'; +import { pigment } from '@pigment-css/vite-plugin'; + +const pigmentConfig = {}; // we will refer to this later + +export default defineConfig({ + plugins: [ + pigment(pigmentConfig), + // ... Your other plugins. + ], +}); +``` + +Finally, add the Pigment CSS stylesheet to the top of the main file. + +```diff title="src/main.(js|tsx)" + import * as React from 'react'; ++ import '@mui/material-pigment-css/styles.css'; + import App from './App'; + + ReactDOM.createRoot(document.getElementById('root')).render( + + + , + ); +``` + +## Configuring the theme + +Integrating Pigment CSS with Material UI requires you to configure the theme to the plugin. +Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file: + +```diff ++ import { extendTheme, stringifyTheme } from '@mui/material'; + ++ const pigmentConfig = { ++ theme: extendTheme(), ++ }; +``` + +If you don't have a custom theme, you are ready to go. Start a development server by running: + + + +```bash npm +npm run dev +``` + +```bash yarn +yarn dev +``` + +```bash pnpm +pnpm dev +``` + + + +Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS. + +## How it works + +When a Pigment CSS plugin is configured through a framework bundler, it intercepts the styling APIs that Material UI uses and replaces them with those from Pigment CSS instead. Pigment CSS then extracts the styles at build time and injects them into the stylesheet. + +If you come from Material UI v5, using Pigment CSS will be a paradigm shift in terms of writing styles. +Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables. +For example, Pigment CSS will throw an error for styles that depend on a state like the one below: + +```js +import Card from '@mui/material/Card'; + +function App() { + const [color, setColor] = useState('#000000'); + return ( + + ); +} +``` + +We recommend reading the rest of the guide below to learn about the new styling paradigm and patterns for creating dynamic styles. + +## Migrating custom theme + +### Removing owner state + +Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time: + +```js +const theme = extendTheme({ + components: { + MuiCard: { + styleOverrides: { + root: { + color: ({ ownerState }) => ({ + // ❌ Pigment CSS cannot extract this style. + ...(ownerState.variant === 'outlined' && { + borderWidth: 3, + }), + }), + }, + }, + }, + }, +}); +``` + +Run the following codemod to remove the owner state from the theme: + +```bash +npx @mui/codemod@next v6.0.0/theme-v6 next.config.mjs +``` + +There are cases where the codemod is not able to remove the owner state. In such cases, you have to manually replace the owner state with `variants`. + +#### Dynamic color based on palette + +If you have a dynamic color based on the theme palette, you can use the `variants` property to define the styles for each palette. + + + +```js before +const theme = extendTheme({ + components: { + MuiCard: { + styleOverrides: { + root: ({ theme, ownerState }) => ({ + color: theme.palette[ownerState.palette]?.main, + }), + }, + }, + }, +}); +``` + +```js after +const theme = extendTheme({ + components: { + MuiCard: { + styleOverrides: { + root: ({ theme }) => ({ + variants: [ + ...Object.entries(theme.palette) + .filter(([, palette]) => palette && palette.main) + .map(([palette, { main }]) => ({ + props: { palette }, + style: { + color: main, + }, + })), + ], + }), + }, + }, + }, +}); +``` + + + +### Default props provider + +Use `DefaultPropsProvider` in your main application file and move all the component default props to it: + + + +```diff next.config|vite.config + import { extendTheme } from '@mui/material'; + + const customTheme = extendTheme({ + // ...other tokens. + components: { + MuiButtonBase: { +- defaultProps: { +- disableRipple: true, +- }, + }, + MuiSelect: { +- defaultProps: { +- IconComponent: DropdownIcon, +- }, + } + } + }); +``` + +```diff App.tsx ++ import DefaultPropsProvider from '@mui/material/DefaultPropsProvider'; + + function App() { + return ( ++ + {/* Your app */} ++ + ); + } +``` + + + +## Migrating dynamic styles + +### sx prop + +Run the following codemod: + +```bash +npx @mui/codemod@next v6.0.0/sx-prop path/to/folder +``` + +The scenarios below are not covered by the codemod, so you have to manually update them: + + + +#### Dynamic values + +If a value depends on a variable, you need to move it to a CSS variable inside inline styles. + + + +```js before +
+ {items.map((item, index) => ( + + ))} +
+``` + +```js after +
+ {items.map((item, index) => ( + + ))} +
+``` + + + +#### Custom components + +With Pigment CSS, any JSX element can accept the `sx` prop so it is **no** longer needed to pass down the `sx` prop to Material UI components. + +```diff + import ButtonBase from '@mui/material/ButtonBase'; + + function ActiveButton({ sx, ...props }) { + return ( + + ); + } +``` + +### styled + +If you have custom components that are using `styled` from `@mui/material/styles`, change the import source to `@mui/material-pigment-css`: + +```diff +- import { styled } from '@mui/material/styles'; ++ import { styled } from '@mui/material-pigment-css'; +``` + +Then, run the following codemod: + +```bash +npx @mui/codemod@next v6.0.0/styled path/to/folder +``` + +The scenarios below are not covered by the codemod, so you have to manually update them: + +#### Dynamic styles based on props + +If you have dynamic styles based on props, you need to move them to CSS variables. You will need to create a wrapper component to set the inline style with the CSS variables. + + + +```js before +const FlashCode = styled('div')( + ({ theme, startLine = 0, endLine = startLine, lineHeight = '0.75rem' }) => ({ + top: `calc(${lineHeight} * 1.5 * ${startLine})`, + height: `calc(${lineHeight} * 1.5 * ${endLine - startLine + 1})`, + ...theme.typography.caption, + }), +); + +export default FlashCode; +``` + +```js after +const FlashCodeRoot = styled('div')(({ theme }) => ({ + top: `calc(var(--Flashcode-lineHeight) * 1.5 * var(--Flashcode-startLine))`, + height: `calc(var(--Flashcode-lineHeight) * 1.5 * (var(--Flashcode-endLine) - var(--Flashcode-startLine) + 1))`, + ...theme.typography.caption, +})); + +const FlashCode = React.forwardRef(function FlashCode(props, ref) { + const { + children, + startLine = 0, + endLine = startLine, + lineHeight = '0.75rem', + ...other + } = props; + + return ( + + {children} + + ); +}); + +export default FlashCode; +``` + + + +## Migrating layout components + +To use layout components that are compatible with Pigment CSS, replace the following components with those from the adapter package: + +```diff +- import Container from '@mui/material/Container'; ++ import Container from '@mui/material-pigment-css/Container'; + +- import Grid from '@mui/material/Grid'; ++ import Grid from '@mui/material-pigment-css/Grid'; + +- import Stack from '@mui/material/Stack'; ++ import Stack from '@mui/material-pigment-css/Stack'; + +- import Hidden from '@mui/material/Hidden'; ++ import Hidden from '@mui/material-pigment-css/Hidden'; +``` + +:::info +`Grid` component from `@mui/material-pigment-css/Grid` has a different behavior compared to the default `Grid` component. +It uses CSS `gap` instead of `margin` for spacing between items. +::: + +## Migrating Box component + +Choose one of the following approaches: + +### Continue using Box + +Replace the `Box` component with the one from the adapter package: + +```diff +- import Box from '@mui/material/Box'; ++ import Box from '@mui/material-pigment-css/Box'; +``` + +### Use HTML element + +Pigment CSS can extract the `sx` prop from any JSX element, so there is no need to use the Box component. + +```diff +- import Box from '@mui/material/Box'; + + function CustomCard() { + return ( +- +- +- ... +- ++
++ ++ ... ++
+ ) + } +``` + +For **TypeScript** users, you need to extend the `HTMLAttributes` interface to support the `sx` prop. Add the following code to a file that is included in your `tsconfig.json`: + +```ts +import type { Theme, SxProps } from '@mui/material/styles'; + +declare global { + namespace React { + interface HTMLAttributes { + sx?: SxProps; + } + } +} +``` + +## Migrate useTheme hook + +If you are using the `useTheme` hook, replace the import source: + +```diff +- import { useTheme } from '@mui/material/styles'; ++ import { useTheme } from '@mui/material-pigment-css'; +``` + +:::info +For Next.js App Router, `useTheme` hook only works with React Client Components. +You need to add `'use client'` directive to the component that uses the hook. +::: + +## Right-to-left support + +Update the config file with the following code to enable right-to-left support: + +```diff + const pigmentConfig = { + theme: extendTheme(), ++ css: { ++ // Specify your default CSS authoring direction ++ defaultDirection: 'ltr', ++ // Generate CSS for the opposite of the `defaultDirection` ++ // This is set to `false` by default ++ generateForBothDir: true, ++ }, + } +``` + +### Migrating from theme direction + +If you are using the `theme.direction` in your component, wrap your application with `RtlProvider` and use the `useRtl` hook to get the direction instead: + + + +```diff app.tsx ++ import RtlProvider from '@mui/material-pigment-css/RtlProvider'; + + function App() { ++ const [rtl, setRtl] = React.useState(false); + return ( ++ + {/* Your app */} ++ + ) + } +``` + +```diff component.tsx +- import { useTheme } from '@mui/material/styles'; ++ import { useRtl } from '@mui/material-pigment-css/RtlProvider'; + + function App() { +- const theme = useTheme(); ++ const isRtl = useRtl(); + + return ( + + +- {theme.direction === 'rtl' ? : } ++ {isRtl ? : } + + + + + +- {theme.direction === 'rtl' ? : } ++ {isRtl ? : } + + + ); + } + +``` + + diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index de404b9a6cbcee..afbbdd0571e9a5 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -347,6 +347,4 @@ This reduces the API surface and lets you define variants in other slots of the ## Pigment CSS integration (optional) -:::info -⏳ This section is under construction -::: +Check out the [Pigment CSS migration page](/material-ui/migration/migrating-to-pigment-css/) to learn how to integrate it into your project. diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 37711a12ab4cb2..907d10ee47cfac 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -283,6 +283,10 @@ const pages: MuiPage[] = [ pathname: '/material-ui/migration/migration-css-theme-variables', title: 'Migrating to CSS theme variables', }, + { + pathname: '/material-ui/migration/migrating-to-pigment-css', + title: 'Migrating to Pigment CSS', + }, ], }, { diff --git a/docs/pages/material-ui/migration/migrating-to-pigment-css.js b/docs/pages/material-ui/migration/migrating-to-pigment-css.js new file mode 100644 index 00000000000000..96725a1d9b5e82 --- /dev/null +++ b/docs/pages/material-ui/migration/migrating-to-pigment-css.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 20c0fa939afd37..f1dd6c1724591a 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -265,6 +265,7 @@ "/material-ui/migration/migrating-to-v6": "Migrating to v6: getting started", "/material-ui/migration/migrating-from-deprecated-apis": "Migrating from deprecated APIs", "/material-ui/migration/migration-css-theme-variables": "Migrating to CSS theme variables", + "/material-ui/migration/migrating-to-pigment-css": "Migrating to Pigment CSS", "Upgrade to v5": "Upgrade to v5", "/material-ui/migration/migration-v4": "Migrating to v5: getting started", "/material-ui/migration/v5-style-changes": "Breaking changes: style and theme", diff --git a/package.json b/package.json index 688e9c5e1c327a..9dd5fb61ade40a 100644 --- a/package.json +++ b/package.json @@ -208,7 +208,11 @@ "@types/node": "^18.19.39", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", - "cross-fetch": "^4.0.0" + "cross-fetch": "^4.0.0", + "@pigment-css/react": "0.0.17", + "@pigment-css/unplugin": "0.0.17", + "@pigment-css/nextjs-plugin": "0.0.17", + "@pigment-css/vite-plugin": "0.0.17" }, "nyc": { "include": [ diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 7b2483285e8918..e5f6e31d8eddf5 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -65,6 +65,7 @@ "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", "@mui/material": "workspace:^", + "@mui/material-pigment-css": "workspace:^", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -78,6 +79,9 @@ }, "@emotion/styled": { "optional": true + }, + "@mui/material-pigment-css": { + "optional": true } }, "sideEffects": false, diff --git a/packages/mui-material-pigment-css/README.md b/packages/mui-material-pigment-css/README.md new file mode 100644 index 00000000000000..e03ce34808d028 --- /dev/null +++ b/packages/mui-material-pigment-css/README.md @@ -0,0 +1,3 @@ +# Material Pigment CSS + +A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system. diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json new file mode 100644 index 00000000000000..0910c3bcd654b0 --- /dev/null +++ b/packages/mui-material-pigment-css/package.json @@ -0,0 +1,67 @@ +{ + "name": "@mui/material-pigment-css", + "version": "6.0.0-alpha.13", + "private": true, + "author": "MUI Team", + "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.", + "main": "./src/index.ts", + "keywords": [ + "react", + "mui", + "material-ui", + "css-in-js", + "zero-runtime" + ], + "repository": { + "type": "git", + "url": "https://github.com/mui/material-ui.git", + "directory": "packages/mui-pigment-css" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui/material-ui/issues" + }, + "homepage": "https://mui.com/material-ui/", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "scripts": { + "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs styles.css", + "build:types": "node ../../scripts/buildTypes.mjs", + "prebuild": "rimraf build tsconfig.build.tsbuildinfo", + "release": "pnpm build && pnpm publish", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", + "typescript": "tsc -p tsconfig.json", + "typescript:module-augmentation": "node scripts/testModuleAugmentation.js" + }, + "dependencies": { + "@mui/system": "workspace:^", + "@pigment-css/react": "0.0.17" + }, + "sideEffects": false, + "publishConfig": { + "access": "public", + "directory": "build" + }, + "wyw-in-js": { + "tags": { + "styled": "@pigment-css/react/exports/styled", + "sx": "@pigment-css/react/exports/sx", + "keyframes": "@pigment-css/react/exports/keyframes", + "generateAtomics": "@pigment-css/react/exports/generateAtomics", + "css": "@pigment-css/react/exports/css", + "createUseThemeProps": "@pigment-css/react/exports/createUseThemeProps", + "internal_createExtendSxProp": "@pigment-css/react/exports/internal_createExtendSxProp", + "globalCss": "@pigment-css/react/exports/globalCss", + "useTheme": "@pigment-css/react/exports/useTheme" + } + }, + "engines": { + "node": ">=12.0.0" + } +} diff --git a/packages/mui-material-pigment-css/src/Box/Box.ts b/packages/mui-material-pigment-css/src/Box/Box.ts new file mode 100644 index 00000000000000..2fefcd93bf64a3 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Box/Box.ts @@ -0,0 +1,3 @@ +import Box from '@pigment-css/react/Box'; + +export default Box; diff --git a/packages/mui-material-pigment-css/src/Box/index.ts b/packages/mui-material-pigment-css/src/Box/index.ts new file mode 100644 index 00000000000000..a3e93ac53516a6 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Box/index.ts @@ -0,0 +1 @@ +export { default } from './Box'; diff --git a/packages/mui-material-pigment-css/src/Container/Container.ts b/packages/mui-material-pigment-css/src/Container/Container.ts new file mode 100644 index 00000000000000..77971a8841820b --- /dev/null +++ b/packages/mui-material-pigment-css/src/Container/Container.ts @@ -0,0 +1,3 @@ +import Container from '@pigment-css/react/Container'; + +export default Container; diff --git a/packages/mui-material-pigment-css/src/Container/index.ts b/packages/mui-material-pigment-css/src/Container/index.ts new file mode 100644 index 00000000000000..a147b67a64f42c --- /dev/null +++ b/packages/mui-material-pigment-css/src/Container/index.ts @@ -0,0 +1 @@ +export { default } from './Container'; diff --git a/packages/mui-material-pigment-css/src/Grid/Grid.ts b/packages/mui-material-pigment-css/src/Grid/Grid.ts new file mode 100644 index 00000000000000..af545bf3f67b0b --- /dev/null +++ b/packages/mui-material-pigment-css/src/Grid/Grid.ts @@ -0,0 +1,3 @@ +import Grid from '@pigment-css/react/Grid'; + +export default Grid; diff --git a/packages/mui-material-pigment-css/src/Grid/index.ts b/packages/mui-material-pigment-css/src/Grid/index.ts new file mode 100644 index 00000000000000..3d919c9acb4394 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Grid/index.ts @@ -0,0 +1 @@ +export { default } from './Grid'; diff --git a/packages/mui-material-pigment-css/src/Hidden/Hidden.ts b/packages/mui-material-pigment-css/src/Hidden/Hidden.ts new file mode 100644 index 00000000000000..8659f3a468dd53 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Hidden/Hidden.ts @@ -0,0 +1,3 @@ +import Hidden from '@pigment-css/react/Hidden'; + +export default Hidden; diff --git a/packages/mui-material-pigment-css/src/Hidden/index.ts b/packages/mui-material-pigment-css/src/Hidden/index.ts new file mode 100644 index 00000000000000..b786254d40f3d3 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Hidden/index.ts @@ -0,0 +1 @@ +export { default } from './Hidden'; diff --git a/packages/mui-material-pigment-css/src/RtlProvider/RtlProvider.ts b/packages/mui-material-pigment-css/src/RtlProvider/RtlProvider.ts new file mode 100644 index 00000000000000..414accd84a8c00 --- /dev/null +++ b/packages/mui-material-pigment-css/src/RtlProvider/RtlProvider.ts @@ -0,0 +1,3 @@ +'use client'; + +export * from '@mui/system/RtlProvider'; diff --git a/packages/mui-material-pigment-css/src/RtlProvider/index.ts b/packages/mui-material-pigment-css/src/RtlProvider/index.ts new file mode 100644 index 00000000000000..7a7b9546cf906f --- /dev/null +++ b/packages/mui-material-pigment-css/src/RtlProvider/index.ts @@ -0,0 +1 @@ +export * from './RtlProvider'; diff --git a/packages/mui-material-pigment-css/src/Stack/Stack.ts b/packages/mui-material-pigment-css/src/Stack/Stack.ts new file mode 100644 index 00000000000000..d1d770f8fac2ca --- /dev/null +++ b/packages/mui-material-pigment-css/src/Stack/Stack.ts @@ -0,0 +1,3 @@ +import Stack from '@pigment-css/react/Stack'; + +export default Stack; diff --git a/packages/mui-material-pigment-css/src/Stack/index.ts b/packages/mui-material-pigment-css/src/Stack/index.ts new file mode 100644 index 00000000000000..129ee566c9f837 --- /dev/null +++ b/packages/mui-material-pigment-css/src/Stack/index.ts @@ -0,0 +1 @@ +export { default } from './Stack'; diff --git a/packages/mui-material-pigment-css/src/index.ts b/packages/mui-material-pigment-css/src/index.ts new file mode 100644 index 00000000000000..e2ba63ac6e2d8d --- /dev/null +++ b/packages/mui-material-pigment-css/src/index.ts @@ -0,0 +1 @@ +export * from '@pigment-css/react'; diff --git a/packages/mui-material-pigment-css/src/styles.css b/packages/mui-material-pigment-css/src/styles.css new file mode 100644 index 00000000000000..d27283bddcbe05 --- /dev/null +++ b/packages/mui-material-pigment-css/src/styles.css @@ -0,0 +1,3 @@ +/** + * Placeholder file for generated theme + */ diff --git a/packages/mui-material-pigment-css/src/theme.ts b/packages/mui-material-pigment-css/src/theme.ts new file mode 100644 index 00000000000000..e9acc9a5bde4d6 --- /dev/null +++ b/packages/mui-material-pigment-css/src/theme.ts @@ -0,0 +1 @@ +export * from '@pigment-css/react/theme'; diff --git a/packages/mui-material-pigment-css/styles.css b/packages/mui-material-pigment-css/styles.css new file mode 100644 index 00000000000000..d27283bddcbe05 --- /dev/null +++ b/packages/mui-material-pigment-css/styles.css @@ -0,0 +1,3 @@ +/** + * Placeholder file for generated theme + */ diff --git a/packages/mui-material-pigment-css/tsconfig.build.json b/packages/mui-material-pigment-css/tsconfig.build.json new file mode 100644 index 00000000000000..3b9cd66ac9420a --- /dev/null +++ b/packages/mui-material-pigment-css/tsconfig.build.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "composite": true, + "declaration": true, + "noEmit": false, + "emitDeclarationOnly": true, + "outDir": "build", + "rootDir": "./src" + }, + "include": ["./src/**/*.ts*"], + "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"] +} diff --git a/packages/mui-material-pigment-css/tsconfig.json b/packages/mui-material-pigment-css/tsconfig.json new file mode 100644 index 00000000000000..2fe6f82794abb7 --- /dev/null +++ b/packages/mui-material-pigment-css/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "moduleResolution": "Bundler" + }, + "include": ["src/**/*", "test/**/*"] +} diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 68d47eb7dd6e0c..65a85e602eab1b 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -78,7 +78,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@pigment-css/react": "^0.0.16", + "@mui/material-pigment-css": "workspace:^", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -93,7 +93,7 @@ "@emotion/styled": { "optional": true }, - "@pigment-css/react": { + "@mui/material-pigment-css": { "optional": true } }, @@ -104,5 +104,17 @@ }, "engines": { "node": ">=12.0.0" + }, + "pigment-css": { + "vite": { + "include": [ + "prop-types", + "react-is", + "hoist-non-react-statics", + "react", + "react-dom", + "@emotion/react" + ] + } } } diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx index 2753a263b034b1..7e79204a424a49 100644 --- a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx +++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { OverridableComponent, OverrideProps } from '@mui/types'; // @ts-ignore -import Container from '@pigment-css/react/Container'; +import Container from '@mui/material-pigment-css/Container'; import capitalize from '@mui/utils/capitalize'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; @@ -99,7 +99,7 @@ const PigmentContainer = React.forwardRef(function PigmentContainer( disableGutters={disableGutters} fixed={fixed} maxWidth={maxWidth} - {...props} + {...(props as any)} // @ts-ignore ref={ref} /> diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx index fad246bc48cb0f..a34e4586c60efe 100644 --- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { OverridableComponent, OverrideProps } from '@mui/types'; import { SxProps } from '@mui/system'; // @ts-ignore -import Grid from '@pigment-css/react/Grid'; +import Grid from '@mui/material-pigment-css/Grid'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { @@ -156,7 +156,7 @@ const PigmentGrid = React.forwardRef(function PigmentGrid(props, ref) { const classes = useUtilityClasses(props); - return ; + return ; }) as OverridableComponent; PigmentGrid.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx index 7f33f5fc3abe5a..99fb1a3972dccd 100644 --- a/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx +++ b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { Breakpoint } from '@mui/system'; // @ts-ignore -import Hidden from '@pigment-css/react/Hidden'; +import Hidden from '@mui/material-pigment-css/Hidden'; import capitalize from '@mui/utils/capitalize'; import composeClasses from '@mui/utils/composeClasses'; import HiddenJs from '../Hidden/HiddenJs'; diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx index fcf8ee052300d3..04d90fbe52ca69 100644 --- a/packages/mui-material/src/PigmentStack/PigmentStack.tsx +++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import clsx from 'clsx'; import { OverridableComponent, OverrideProps } from '@mui/types'; // @ts-ignore -import Stack from '@pigment-css/react/Stack'; +import Stack from '@mui/material-pigment-css/Stack'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { SxProps } from '@mui/system'; @@ -71,7 +71,7 @@ const useUtilityClasses = () => { */ const PigmentStack = React.forwardRef(function PigmentStack({ className, ...props }, ref) { const classes = useUtilityClasses(); - return ; + return ; }) as OverridableComponent; PigmentStack.propTypes /* remove-proptypes */ = { diff --git a/packages/mui-material/src/styles/extendTheme.js b/packages/mui-material/src/styles/extendTheme.js index 8dea1c19f7ef61..96511b8d9a6d9a 100644 --- a/packages/mui-material/src/styles/extendTheme.js +++ b/packages/mui-material/src/styles/extendTheme.js @@ -19,6 +19,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar'; import createThemeWithoutVars from './createTheme'; import getOverlayAlpha from './getOverlayAlpha'; import defaultGetSelector from './createGetSelector'; +import { stringifyTheme } from './stringifyTheme'; const defaultDarkOverlays = [...Array(25)].map((_, index) => { if (index === 0) { @@ -447,6 +448,7 @@ export default function extendTheme(options = {}, ...args) { theme: this, }); }; + theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration return theme; } diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index 41de04ee482916..ebbe6ab89a9e76 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -101,8 +101,6 @@ export * from './CssVarsProvider'; export { default as extendTheme } from './extendTheme'; -export * from './stringifyTheme'; - export type { ColorSchemeOverrides, SupportedColorScheme, diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js index 1ec3a951a0aeff..a6169843ff0c62 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -50,8 +50,6 @@ export { default as experimental_extendTheme } from './experimental_extendTheme' export { default as getOverlayAlpha } from './getOverlayAlpha'; export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar'; -export * from './stringifyTheme'; - // Private methods for creating parts of the theme export { default as private_createTypography } from './createTypography'; export { default as private_createMixins } from './createMixins'; diff --git a/packages/mui-material/tsconfig.json b/packages/mui-material/tsconfig.json index cb183f93333562..2ff522dab0f21f 100644 --- a/packages/mui-material/tsconfig.json +++ b/packages/mui-material/tsconfig.json @@ -1,5 +1,8 @@ { "extends": "../../tsconfig.json", "include": ["src/**/*", "test/**/*"], + "compilerOptions": { + "moduleResolution": "Bundler" + }, "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0783a88bff5ecf..758a49734dc22d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,10 @@ overrides: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 cross-fetch: ^4.0.0 + '@pigment-css/react': 0.0.17 + '@pigment-css/unplugin': 0.0.17 + '@pigment-css/nextjs-plugin': 0.0.17 + '@pigment-css/vite-plugin': 0.0.17 importers: @@ -102,8 +106,8 @@ importers: specifier: ^20.1.1 version: 20.1.1 '@pigment-css/react': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1) + specifier: 0.0.17 + version: 0.0.17(@types/react@18.3.3)(react@18.3.1) '@playwright/test': specifier: 1.45.1 version: 1.45.1 @@ -259,7 +263,7 @@ importers: version: 10.6.0 nx: specifier: ^19.4.1 - version: 19.4.1 + version: 19.4.2 nyc: specifier: ^17.0.0 version: 17.0.0 @@ -280,7 +284,7 @@ importers: version: 0.11.10 rimraf: specifier: ^5.0.8 - version: 5.0.8 + version: 5.0.9 serve: specifier: ^14.2.3 version: 14.2.3 @@ -315,12 +319,6 @@ importers: specifier: ^17.7.2 version: 17.7.2 - apps/local-ui-lib: - dependencies: - '@pigment-css/react': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1) - apps/pigment-css-next-app: dependencies: '@emotion/cache': @@ -341,18 +339,15 @@ importers: '@mui/material-nextjs': specifier: workspace:^ version: link:../../packages/mui-material-nextjs/build + '@mui/material-pigment-css': + specifier: workspace:^ + version: link:../../packages/mui-material-pigment-css/build '@mui/system': specifier: workspace:^ version: link:../../packages/mui-system/build '@mui/utils': specifier: workspace:^ version: link:../../packages/mui-utils/build - '@pigment-css/react': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1) - local-ui-lib: - specifier: workspace:^ - version: link:../local-ui-lib next: specifier: latest version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -364,8 +359,8 @@ importers: version: 18.3.1(react@18.3.1) devDependencies: '@pigment-css/nextjs-plugin': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + specifier: 0.0.17 + version: 0.0.17(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@types/node': specifier: ^18.19.39 version: 18.19.39 @@ -396,21 +391,18 @@ importers: '@mui/material': specifier: workspace:^ version: link:../../packages/mui-material/build + '@mui/material-pigment-css': + specifier: workspace:^ + version: link:../../packages/mui-material-pigment-css/build '@mui/system': specifier: workspace:^ version: link:../../packages/mui-system/build '@mui/utils': specifier: workspace:^ version: link:../../packages/mui-utils/build - '@pigment-css/react': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1) clsx: specifier: ^2.1.1 version: 2.1.1 - local-ui-lib: - specifier: workspace:^ - version: link:../local-ui-lib react: specifier: ^18.3.1 version: 18.3.1 @@ -434,8 +426,8 @@ importers: specifier: ^7.24.7 version: 7.24.7(@babel/core@7.24.7) '@pigment-css/vite-plugin': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2)) + specifier: 0.0.17 + version: 0.0.17(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2)) '@types/react': specifier: 18.3.3 version: 18.3.3 @@ -801,7 +793,7 @@ importers: version: 1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rimraf: specifier: ^5.0.8 - version: 5.0.8 + version: 5.0.9 styled-components: specifier: ^6.1.11 version: 6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -898,7 +890,7 @@ importers: dependencies: rimraf: specifier: ^5.0.8 - version: 5.0.8 + version: 5.0.9 typescript: specifier: ^5.4.5 version: 5.4.5 @@ -971,7 +963,7 @@ importers: version: 3.3.2 rimraf: specifier: ^5.0.8 - version: 5.0.8 + version: 5.0.9 packages-internal/test-utils: dependencies: @@ -1537,7 +1529,7 @@ importers: version: 18.3.1 rimraf: specifier: ^5.0.8 - version: 5.0.8 + version: 5.0.9 shx: specifier: ^0.3.4 version: 0.3.4 @@ -1640,6 +1632,9 @@ importers: '@mui/base': specifier: workspace:* version: link:../mui-base/build + '@mui/material-pigment-css': + specifier: workspace:^ + version: link:../mui-material-pigment-css/build '@mui/system': specifier: workspace:* version: link:../mui-system/build @@ -1708,6 +1703,9 @@ importers: '@mui/core-downloads-tracker': specifier: workspace:^ version: link:../mui-core-downloads-tracker/build + '@mui/material-pigment-css': + specifier: workspace:^ + version: link:../mui-material-pigment-css/build '@mui/system': specifier: workspace:* version: link:../mui-system/build @@ -1717,9 +1715,6 @@ importers: '@mui/utils': specifier: workspace:* version: link:../mui-utils/build - '@pigment-css/react': - specifier: ^0.0.16 - version: 0.0.16(@types/react@18.3.3)(react@18.3.1) '@types/react-transition-group': specifier: ^4.4.10 version: 4.4.10 @@ -1830,6 +1825,16 @@ importers: version: 18.3.1 publishDirectory: build + packages/mui-material-pigment-css: + dependencies: + '@mui/system': + specifier: workspace:^ + version: link:../mui-system/build + '@pigment-css/react': + specifier: 0.0.17 + version: 0.0.17(@types/react@18.3.3)(react@18.3.1) + publishDirectory: build + packages/mui-private-theming: dependencies: '@babel/runtime': @@ -4315,8 +4320,8 @@ packages: '@nrwl/devkit@17.2.8': resolution: {integrity: sha512-l2dFy5LkWqSA45s6pee6CoqJeluH+sjRdVnAAQfjLHRNSx6mFAKblyzq5h1f4P0EUCVVVqLs+kVqmNx5zxYqvw==} - '@nrwl/tao@19.4.1': - resolution: {integrity: sha512-4PHs6Ja8PkWkIrg8ViB47j+dR2fDn51vtQTWL33n4q5hqZ65rvsMHNch4UsC52XUSv55IZnJwcYlxhAx/vXk3g==} + '@nrwl/tao@19.4.2': + resolution: {integrity: sha512-bRCRWWqR86ckji7tK4xRl9czB2WSZG4qSGqvttQMmxCvQc+njnG/QhnoGXYueaz2xr5Z1z7RJWNEqTYEAILh5Q==} hasBin: true '@nx/devkit@17.2.8': @@ -4324,62 +4329,62 @@ packages: peerDependencies: nx: '>= 16 <= 18' - '@nx/nx-darwin-arm64@19.4.1': - resolution: {integrity: sha512-WfNRFpMoBB5Ayzvwqfy+anEUgqOZLnLctGG1qwMhCOqczcPUtuTrAjRilMYZ7RrT0cvw0da8dTkpkAsAURS7Ig==} + '@nx/nx-darwin-arm64@19.4.2': + resolution: {integrity: sha512-yy0ik+MYli6lg9khgb0/NJIjMr2re2fpE7hl/MhaHWZmTH9PUmzz6vWpx74O3tnz93oT/9ENXFLBagQuj9hjww==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] - '@nx/nx-darwin-x64@19.4.1': - resolution: {integrity: sha512-p8/lJZLeqAFjCyINrQUvlUvG2GkWN0IlqRm7NknNFXisFDwzcT6u12GR96hPbl+6eVBOtldYhwlufF4tZQDJiw==} + '@nx/nx-darwin-x64@19.4.2': + resolution: {integrity: sha512-UEZw7qzvWyOe0B5SvvrN4I2irq8FGlf1V6ut0ajL0vDbLR2IiiF6EYiM36ewpJmx5XspjhbLxEyQJn1TUMUm4w==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] - '@nx/nx-freebsd-x64@19.4.1': - resolution: {integrity: sha512-qi/tRWKuFS6wpYbAD/s0SBqh/2pNXNg+ytxmon3czYPuUrIiMfmXGxtz922P6YUSOWtL2N6Q9UI6vqZwS+g9/A==} + '@nx/nx-freebsd-x64@19.4.2': + resolution: {integrity: sha512-kAB73FAe3Ae50XnZ+DrCFjbbqHJoTF2ZJVYiHdtRfAefEqsrFltM3Py2/qeeSp1Pxtri3sp4yeEui8WGV2ArWA==} engines: {node: '>= 10'} cpu: [x64] os: [freebsd] - '@nx/nx-linux-arm-gnueabihf@19.4.1': - resolution: {integrity: sha512-AIowQrN14ucZnBr4Syo2oDGYLqjuJHSGgY/ur6mPoxH02ghGAd68Mc1swX8elGRgBcGc251s05H8MjyPQVsT3A==} + '@nx/nx-linux-arm-gnueabihf@19.4.2': + resolution: {integrity: sha512-24cHzxYB/cxlvX8I/cYZIp88TNgCrl4srMeUzqV5bHuDKVYjA1BL/gzP/pRmsdOSq+ggAKxzXhgCG3nwStUvdw==} engines: {node: '>= 10'} cpu: [arm] os: [linux] - '@nx/nx-linux-arm64-gnu@19.4.1': - resolution: {integrity: sha512-TG/GfX7olq8bINKLOfamikHJWchYapcJheHj7aUZo951X96s6jYpbeZjwGrVesTJ2fO6EYlS7T1sJIqMoSMxaw==} + '@nx/nx-linux-arm64-gnu@19.4.2': + resolution: {integrity: sha512-6gbBak/bL4vEV2aoTFc7VaeWYF+ossJ0YOqx+hwLpv9SSt6e3yIJrqf7SiwdKq0lcoPeHq3DO06+bRzNLZxVTQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@nx/nx-linux-arm64-musl@19.4.1': - resolution: {integrity: sha512-GBBKbERw0baa4JKTbQi8LAERI6C5n3Scrk76pmzCn0HW5GxaQygr61kg6H6C7Duy+w+3D7vwMxCk2wPbUOTuOA==} + '@nx/nx-linux-arm64-musl@19.4.2': + resolution: {integrity: sha512-JKc3Bw84jWbOhlqXGBIH9/qz3kzTwpKfsIqtar8K8Gd5/UFJS8GLEdy0mXsnoeFrA1DuYJJ0PWxoHkAa1MYLxg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] - '@nx/nx-linux-x64-gnu@19.4.1': - resolution: {integrity: sha512-zaHHFM75hLVfMEBR8U7X8xiND1HNQJxybItuoBpnXHVRfKJwp1quByqArnaKKCzsvLvO5HdoXIA80ToJNmDkBQ==} + '@nx/nx-linux-x64-gnu@19.4.2': + resolution: {integrity: sha512-hyf0cDZ3rAM8WERZ/M82v1rnf6oO1X+xwYq363Qx04SufU+Knto7xHGndLNkx2i18+UtCoEr4ZhDYrIb8ZWHww==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@nx/nx-linux-x64-musl@19.4.1': - resolution: {integrity: sha512-ygfqznUMoXnrI23U12VwkxOqG4C7sV85YaF7fWDIMuszxYU7KtrVAQ5YG0LNW5KNa1JCgKkjL9YszEiNJxK47Q==} + '@nx/nx-linux-x64-musl@19.4.2': + resolution: {integrity: sha512-XbKut3RTb04FNA0diDhO/OM8DgqaWaaXhyybRocfhITxH+mPQBZPUs/NM3xeQCrzlGjwrBYxt+Y9Ep8Ftgd/MA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] - '@nx/nx-win32-arm64-msvc@19.4.1': - resolution: {integrity: sha512-tOpjieJ7XqbhvgQX9xcKTu/nWvj+w9tL0j6NlpP5Gkq1LiGUuXG2EWvOEGS5CsyAtT/tncLo2OJUx//Ah+dEtw==} + '@nx/nx-win32-arm64-msvc@19.4.2': + resolution: {integrity: sha512-VMOQ44KlndtAKE6JaXSQqrAdHBEqbJSJP4EKrBREn8HyVyr6LAfAG3Pj93ZPMvQC47uheisBcDwitxEY/Mhs1Q==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] - '@nx/nx-win32-x64-msvc@19.4.1': - resolution: {integrity: sha512-u9h7nrIplf79A6Yhzk1ZlNNlHrhuKrDaGMyhpTx3QaLEiRp0Kl3haMrnYmPlpRFNDwWXWDKzwiTWZtQoo2JoaA==} + '@nx/nx-win32-x64-msvc@19.4.2': + resolution: {integrity: sha512-FOK4XVanWZYM4cLS9uAx8Xg4BpPRdo0z/jt8gVto8BwgoBPIJuytGhnTVyDNgB+nRJf8K3fz7RFcZm5jup/krg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4543,21 +4548,21 @@ packages: resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==} engines: {node: '>=8.0.0'} - '@pigment-css/nextjs-plugin@0.0.16': - resolution: {integrity: sha512-uwOgM6txECakseZkCOtILPgO0wlDl6wCcsvYl9jWDoeoQOAzLHsO0YSuEJmdirOeGjRGlqxjUcpxa9YfuiUSBQ==} + '@pigment-css/nextjs-plugin@0.0.17': + resolution: {integrity: sha512-8bnCwjAzJ0eygleO0VGx9/LDPTmGO7kZGK8fDZ6LALy5WJfuT+9hPeqj+6C+9bDpMpIaAEDOhTgyi2CzfolPSg==} peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 - '@pigment-css/react@0.0.16': - resolution: {integrity: sha512-hi4Qd5ZRgxR82VPv2ilHTimf9Aspir40B05rcmtKSWbVCNLakk5/uxLOgSuf1xDSxhXv5Q5ZVXTEdAaLCZjwzw==} + '@pigment-css/react@0.0.17': + resolution: {integrity: sha512-JxniKznqi1taW2X1YWwVYJWwBbHLB2guMQ0cbb1lMSN17Cj8kg1sZgqTjxi33pyb7YWZLo1y/EDybBfAgUKoWA==} peerDependencies: react: ^17.0.0 || ^18.0.0 - '@pigment-css/unplugin@0.0.16': - resolution: {integrity: sha512-T+mE5p4IaSF1WXMm+0Qct4njD2FijByN73L67/7863ZQw5Cmi3ZH6zJNrJGk0gkEcDcDxq4RNUlYA1jM1q5shA==} + '@pigment-css/unplugin@0.0.17': + resolution: {integrity: sha512-ClbEWkbUSRsje/mswztVTZkgBzzp3wPFRhkbCivpRrZHMRe2B7mqyc+sPePeC4kX0jR9azxnCIEZGbT0gR1NuA==} - '@pigment-css/vite-plugin@0.0.16': - resolution: {integrity: sha512-9rrF9YArCrvTbBvlEt0/9XWllYZJiJICn3O0VeUJ2JGKAtng37MXbtSIsi1q4eFmAUMKWTW2AFz3YyQPqeTMsg==} + '@pigment-css/vite-plugin@0.0.17': + resolution: {integrity: sha512-IlmX9UpIg+rBFOrFlp/5DifBBNon1zW3CNsRfyc0OrHfZej7re9mEc0dlFQtFCosRl6hexS1EBGRWLACV+997A==} peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -9484,8 +9489,8 @@ packages: nwsapi@2.2.7: resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==} - nx@19.4.1: - resolution: {integrity: sha512-II+Ix/z6i1E2/3DinwnYKWlM0g3bO/1bcQkwhpaPee5GwHejBYdxlQ2B9uxwqRMYgpF5tFJr/0Q8WsBQybuSJw==} + nx@19.4.2: + resolution: {integrity: sha512-h4NMoy9uvSHuM+kyioZXb5G4hfBZ7E4a5dswG2RPe3g/GcY9wdpkUMd/EJJ0cHQwv36kRZOMCflhounYCd7OeA==} hasBin: true peerDependencies: '@swc-node/register': ^1.8.0 @@ -10749,9 +10754,9 @@ packages: engines: {node: '>=14'} hasBin: true - rimraf@5.0.8: - resolution: {integrity: sha512-XSh0V2/yNhDEi8HwdIefD8MLgs4LQXPag/nEJWs3YUc3Upn+UHa1GyIkEg9xSSNt7HnkO5FjTvmcRzgf+8UZuw==} - engines: {node: '>=18'} + rimraf@5.0.9: + resolution: {integrity: sha512-3i7b8OcswU6CpU8Ej89quJD4O98id7TtVM5U4Mybh84zQXdrFmDLouWBEEaD/QfO3gDDfH+AGFCGsR7kngzQnA==} + engines: {node: 14 >=14.20 || 16 >=16.20 || >=18} hasBin: true robust-predicates@3.0.2: @@ -13920,7 +13925,7 @@ snapshots: '@npmcli/arborist': 7.5.3 '@npmcli/package-json': 5.2.0 '@npmcli/run-script': 8.1.0 - '@nx/devkit': 17.2.8(nx@19.4.1) + '@nx/devkit': 17.2.8(nx@19.4.2) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) aproba: 2.0.0 @@ -13959,7 +13964,7 @@ snapshots: npm-package-arg: 11.0.2 npm-packlist: 8.0.2 npm-registry-fetch: 17.1.0 - nx: 19.4.1 + nx: 19.4.2 p-map: 4.0.0 p-map-series: 2.1.0 p-queue: 6.6.2 @@ -14570,60 +14575,60 @@ snapshots: - bluebird - supports-color - '@nrwl/devkit@17.2.8(nx@19.4.1)': + '@nrwl/devkit@17.2.8(nx@19.4.2)': dependencies: - '@nx/devkit': 17.2.8(nx@19.4.1) + '@nx/devkit': 17.2.8(nx@19.4.2) transitivePeerDependencies: - nx - '@nrwl/tao@19.4.1': + '@nrwl/tao@19.4.2': dependencies: - nx: 19.4.1 + nx: 19.4.2 tslib: 2.6.2 transitivePeerDependencies: - '@swc-node/register' - '@swc/core' - debug - '@nx/devkit@17.2.8(nx@19.4.1)': + '@nx/devkit@17.2.8(nx@19.4.2)': dependencies: - '@nrwl/devkit': 17.2.8(nx@19.4.1) + '@nrwl/devkit': 17.2.8(nx@19.4.2) ejs: 3.1.8 enquirer: 2.3.6 ignore: 5.3.1 - nx: 19.4.1 + nx: 19.4.2 semver: 7.5.3 tmp: 0.2.3 tslib: 2.6.2 - '@nx/nx-darwin-arm64@19.4.1': + '@nx/nx-darwin-arm64@19.4.2': optional: true - '@nx/nx-darwin-x64@19.4.1': + '@nx/nx-darwin-x64@19.4.2': optional: true - '@nx/nx-freebsd-x64@19.4.1': + '@nx/nx-freebsd-x64@19.4.2': optional: true - '@nx/nx-linux-arm-gnueabihf@19.4.1': + '@nx/nx-linux-arm-gnueabihf@19.4.2': optional: true - '@nx/nx-linux-arm64-gnu@19.4.1': + '@nx/nx-linux-arm64-gnu@19.4.2': optional: true - '@nx/nx-linux-arm64-musl@19.4.1': + '@nx/nx-linux-arm64-musl@19.4.2': optional: true - '@nx/nx-linux-x64-gnu@19.4.1': + '@nx/nx-linux-x64-gnu@19.4.2': optional: true - '@nx/nx-linux-x64-musl@19.4.1': + '@nx/nx-linux-x64-musl@19.4.2': optional: true - '@nx/nx-win32-arm64-msvc@19.4.1': + '@nx/nx-win32-arm64-msvc@19.4.2': optional: true - '@nx/nx-win32-x64-msvc@19.4.1': + '@nx/nx-win32-x64-msvc@19.4.2': optional: true '@octokit/auth-token@2.5.0': @@ -14860,16 +14865,16 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@pigment-css/nextjs-plugin@0.0.17(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: - '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1) + '@pigment-css/unplugin': 0.0.17(@types/react@18.3.3)(react@18.3.1) next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) transitivePeerDependencies: - '@types/react' - react - supports-color - '@pigment-css/react@0.0.16(@types/react@18.3.3)(react@18.3.1)': + '@pigment-css/react@0.0.17(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/core': 7.24.7 '@babel/helper-module-imports': 7.24.7 @@ -14897,10 +14902,10 @@ snapshots: - '@types/react' - supports-color - '@pigment-css/unplugin@0.0.16(@types/react@18.3.3)(react@18.3.1)': + '@pigment-css/unplugin@0.0.17(@types/react@18.3.3)(react@18.3.1)': dependencies: '@babel/core': 7.24.7 - '@pigment-css/react': 0.0.16(@types/react@18.3.3)(react@18.3.1) + '@pigment-css/react': 0.0.17(@types/react@18.3.3)(react@18.3.1) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0 @@ -14910,11 +14915,11 @@ snapshots: - react - supports-color - '@pigment-css/vite-plugin@0.0.16(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))': + '@pigment-css/vite-plugin@0.0.17(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))': dependencies: '@babel/core': 7.24.7 '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7) - '@pigment-css/react': 0.0.16(@types/react@18.3.3)(react@18.3.1) + '@pigment-css/react': 0.0.17(@types/react@18.3.3)(react@18.3.1) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0 @@ -20082,7 +20087,7 @@ snapshots: '@npmcli/arborist': 7.5.3 '@npmcli/package-json': 5.2.0 '@npmcli/run-script': 8.1.0 - '@nx/devkit': 17.2.8(nx@19.4.1) + '@nx/devkit': 17.2.8(nx@19.4.2) '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 19.0.11(encoding@0.1.13) aproba: 2.0.0 @@ -20127,7 +20132,7 @@ snapshots: npm-package-arg: 11.0.2 npm-packlist: 8.0.2 npm-registry-fetch: 17.1.0 - nx: 19.4.1 + nx: 19.4.2 p-map: 4.0.0 p-map-series: 2.1.0 p-pipe: 3.1.0 @@ -21142,9 +21147,9 @@ snapshots: nwsapi@2.2.7: {} - nx@19.4.1: + nx@19.4.2: dependencies: - '@nrwl/tao': 19.4.1 + '@nrwl/tao': 19.4.2 '@yarnpkg/lockfile': 1.1.0 '@yarnpkg/parsers': 3.0.0-rc.46 '@zkochan/js-yaml': 0.0.7 @@ -21179,16 +21184,16 @@ snapshots: yargs: 17.7.2 yargs-parser: 21.1.1 optionalDependencies: - '@nx/nx-darwin-arm64': 19.4.1 - '@nx/nx-darwin-x64': 19.4.1 - '@nx/nx-freebsd-x64': 19.4.1 - '@nx/nx-linux-arm-gnueabihf': 19.4.1 - '@nx/nx-linux-arm64-gnu': 19.4.1 - '@nx/nx-linux-arm64-musl': 19.4.1 - '@nx/nx-linux-x64-gnu': 19.4.1 - '@nx/nx-linux-x64-musl': 19.4.1 - '@nx/nx-win32-arm64-msvc': 19.4.1 - '@nx/nx-win32-x64-msvc': 19.4.1 + '@nx/nx-darwin-arm64': 19.4.2 + '@nx/nx-darwin-x64': 19.4.2 + '@nx/nx-freebsd-x64': 19.4.2 + '@nx/nx-linux-arm-gnueabihf': 19.4.2 + '@nx/nx-linux-arm64-gnu': 19.4.2 + '@nx/nx-linux-arm64-musl': 19.4.2 + '@nx/nx-linux-x64-gnu': 19.4.2 + '@nx/nx-linux-x64-musl': 19.4.2 + '@nx/nx-win32-arm64-msvc': 19.4.2 + '@nx/nx-win32-x64-msvc': 19.4.2 transitivePeerDependencies: - debug @@ -22581,7 +22586,7 @@ snapshots: dependencies: glob: 9.3.5 - rimraf@5.0.8: + rimraf@5.0.9: dependencies: glob: 10.3.10