From 1a9323866679583eff93fd9c5adaa22ea1a6f2ad Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 12 Jun 2024 14:46:26 +0700 Subject: [PATCH] [pigment-css] Add `stringifyTheme` for Pigment CSS integration (#42476) --- apps/local-ui-lib/package.json | 2 +- apps/pigment-css-next-app/next.config.js | 3 +- apps/pigment-css-next-app/package.json | 4 +- .../src/app/material-ui/react-paper/page.tsx | 37 +++++ .../src/app/material-ui/react-tabs/page.tsx | 142 +++++++++++++++++ .../app/material-ui/react-tooltip/page.tsx | 121 ++++++++++++++ apps/pigment-css-vite-app/package.json | 4 +- .../src/pages/material-ui/react-paper.tsx | 38 +++++ .../src/pages/material-ui/react-tabs.tsx | 143 +++++++++++++++++ .../src/pages/material-ui/react-tooltip.tsx | 122 ++++++++++++++ package.json | 2 +- .../mui-material/src/Collapse/Collapse.js | 3 +- packages/mui-material/src/Dialog/Dialog.js | 3 +- packages/mui-material/src/Drawer/Drawer.js | 3 +- packages/mui-material/src/Fade/Fade.js | 2 +- packages/mui-material/src/Grow/Grow.js | 2 +- packages/mui-material/src/Link/Link.js | 3 +- packages/mui-material/src/Paper/Paper.js | 3 +- packages/mui-material/src/Slide/Slide.js | 2 +- .../mui-material/src/Snackbar/Snackbar.js | 3 +- .../mui-material/src/SpeedDial/SpeedDial.js | 3 +- .../src/SwipeableDrawer/SwipeableDrawer.js | 5 +- packages/mui-material/src/Tabs/Tabs.js | 3 +- packages/mui-material/src/Tooltip/Tooltip.js | 3 +- packages/mui-material/src/Zoom/Zoom.js | 2 +- packages/mui-material/src/styles/index.d.ts | 3 + packages/mui-material/src/styles/index.js | 4 +- .../src/styles/stringifyTheme.test.ts | 147 +++++++++++++++++ .../mui-material/src/styles/stringifyTheme.ts | 62 ++++++++ .../mui-material/src/zero-styled/index.tsx | 3 + pnpm-lock.yaml | 150 +++++++++--------- 31 files changed, 923 insertions(+), 104 deletions(-) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx create mode 100644 packages/mui-material/src/styles/stringifyTheme.test.ts create mode 100644 packages/mui-material/src/styles/stringifyTheme.ts diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json index 55ff4422c8cbcd..5171ceed5e70b8 100644 --- a/apps/local-ui-lib/package.json +++ b/apps/local-ui-lib/package.json @@ -3,6 +3,6 @@ "version": "0.0.1", "private": true, "dependencies": { - "@pigment-css/react": "^0.0.12" + "@pigment-css/react": "^0.0.13" } } diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js index 4155177fb4ca45..f60594696977b2 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 } = require('@mui/material/styles'); +const { extendTheme, stringifyTheme } = require('@mui/material/styles'); /** * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions @@ -95,6 +95,7 @@ const theme = extendTheme({ theme.getColorSchemeSelector = (colorScheme) => { return `@media (prefers-color-scheme: ${colorScheme})`; }; +theme.toRuntimeSource = stringifyTheme; function innerNoop() { return null; diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 3390605ac5228b..8e04aed38ed3e9 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.12", + "@pigment-css/react": "^0.0.13", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -24,7 +24,7 @@ "next": "latest" }, "devDependencies": { - "@pigment-css/nextjs-plugin": "^0.0.12", + "@pigment-css/nextjs-plugin": "^0.0.14", "@types/node": "^20.5.7", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx new file mode 100644 index 00000000000000..95583dadf32d4b --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-paper/page.tsx @@ -0,0 +1,37 @@ +'use client'; +import * as React from 'react'; +import Elevation from '../../../../../../docs/data/material/components/paper/Elevation'; +import SimplePaper from '../../../../../../docs/data/material/components/paper/SimplePaper'; +import SquareCorners from '../../../../../../docs/data/material/components/paper/SquareCorners'; +import Variants from '../../../../../../docs/data/material/components/paper/Variants'; + +export default function Paper() { + return ( + +
+

Elevation

+
+ +
+
+
+

Simple Paper

+
+ +
+
+
+

Square Corners

+
+ +
+
+
+

Variants

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx new file mode 100644 index 00000000000000..4e7cfa2c2ffd8a --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-tabs/page.tsx @@ -0,0 +1,142 @@ +'use client'; +import * as React from 'react'; +import AccessibleTabs1 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs1'; +import AccessibleTabs2 from '../../../../../../docs/data/material/components/tabs/AccessibleTabs2'; +import BasicTabs from '../../../../../../docs/data/material/components/tabs/BasicTabs'; +import CenteredTabs from '../../../../../../docs/data/material/components/tabs/CenteredTabs'; +import ColorTabs from '../../../../../../docs/data/material/components/tabs/ColorTabs'; +import CustomizedTabs from '../../../../../../docs/data/material/components/tabs/CustomizedTabs'; +import DisabledTabs from '../../../../../../docs/data/material/components/tabs/DisabledTabs'; +import FullWidthTabs from '../../../../../../docs/data/material/components/tabs/FullWidthTabs'; +import IconLabelTabs from '../../../../../../docs/data/material/components/tabs/IconLabelTabs'; +import IconPositionTabs from '../../../../../../docs/data/material/components/tabs/IconPositionTabs'; +import IconTabs from '../../../../../../docs/data/material/components/tabs/IconTabs'; +import LabTabs from '../../../../../../docs/data/material/components/tabs/LabTabs'; +import NavTabs from '../../../../../../docs/data/material/components/tabs/NavTabs'; +import ScrollableTabsButtonAuto from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonAuto'; +import ScrollableTabsButtonForce from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonForce'; +import ScrollableTabsButtonPrevent from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonPrevent'; +import ScrollableTabsButtonVisible from '../../../../../../docs/data/material/components/tabs/ScrollableTabsButtonVisible'; +import TabsWrappedLabel from '../../../../../../docs/data/material/components/tabs/TabsWrappedLabel'; +import VerticalTabs from '../../../../../../docs/data/material/components/tabs/VerticalTabs'; + +export default function Tabs() { + return ( + +
+

Accessible Tabs1

+
+ +
+
+
+

Accessible Tabs2

+
+ +
+
+
+

Basic Tabs

+
+ +
+
+
+

Centered Tabs

+
+ +
+
+
+

Color Tabs

+
+ +
+
+
+

Customized Tabs

+
+ +
+
+
+

Disabled Tabs

+
+ +
+
+
+

Full Width Tabs

+
+ +
+
+
+

Icon Label Tabs

+
+ +
+
+
+

Icon Position Tabs

+
+ +
+
+
+

Icon Tabs

+
+ +
+
+
+

Lab Tabs

+
+ +
+
+
+

Nav Tabs

+
+ +
+
+
+

Scrollable Tabs Button Auto

+
+ +
+
+
+

Scrollable Tabs Button Force

+
+ +
+
+
+

Scrollable Tabs Button Prevent

+
+ +
+
+
+

Scrollable Tabs Button Visible

+
+ +
+
+
+

Tabs Wrapped Label

+
+ +
+
+
+

Vertical Tabs

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx new file mode 100644 index 00000000000000..580fe774464783 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-tooltip/page.tsx @@ -0,0 +1,121 @@ +'use client'; +import * as React from 'react'; +import AccessibilityTooltips from '../../../../../../docs/data/material/components/tooltips/AccessibilityTooltips'; +import AnchorElTooltips from '../../../../../../docs/data/material/components/tooltips/AnchorElTooltips'; +import ArrowTooltips from '../../../../../../docs/data/material/components/tooltips/ArrowTooltips'; +import BasicTooltip from '../../../../../../docs/data/material/components/tooltips/BasicTooltip'; +import ControlledTooltips from '../../../../../../docs/data/material/components/tooltips/ControlledTooltips'; +import CustomizedTooltips from '../../../../../../docs/data/material/components/tooltips/CustomizedTooltips'; +import DelayTooltips from '../../../../../../docs/data/material/components/tooltips/DelayTooltips'; +import DisabledTooltips from '../../../../../../docs/data/material/components/tooltips/DisabledTooltips'; +import FollowCursorTooltips from '../../../../../../docs/data/material/components/tooltips/FollowCursorTooltips'; +import NonInteractiveTooltips from '../../../../../../docs/data/material/components/tooltips/NonInteractiveTooltips'; +import PositionedTooltips from '../../../../../../docs/data/material/components/tooltips/PositionedTooltips'; +import TooltipMargin from '../../../../../../docs/data/material/components/tooltips/TooltipMargin'; +import TooltipOffset from '../../../../../../docs/data/material/components/tooltips/TooltipOffset'; +import TransitionsTooltips from '../../../../../../docs/data/material/components/tooltips/TransitionsTooltips'; +import TriggersTooltips from '../../../../../../docs/data/material/components/tooltips/TriggersTooltips'; +import VariableWidth from '../../../../../../docs/data/material/components/tooltips/VariableWidth'; + +export default function Tooltips() { + return ( + +
+

Accessibility Tooltips

+
+ +
+
+
+

Anchor El Tooltips

+
+ +
+
+
+

Arrow Tooltips

+
+ +
+
+
+

Basic Tooltip

+
+ +
+
+
+

Controlled Tooltips

+
+ +
+
+
+

Customized Tooltips

+
+ +
+
+
+

Delay Tooltips

+
+ +
+
+
+

Disabled Tooltips

+
+ +
+
+
+

Follow Cursor Tooltips

+
+ +
+
+
+

Non Interactive Tooltips

+
+ +
+
+
+

Positioned Tooltips

+
+ +
+
+
+

Tooltip Margin

+
+ +
+
+
+

Tooltip Offset

+
+ +
+
+
+

Transitions Tooltips

+
+ +
+
+
+

Triggers Tooltips

+
+ +
+
+
+

Variable Width

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index cbb4eb960c6b45..60d07efb01c946 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.12", + "@pigment-css/react": "^0.0.13", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", "@mui/lab": "workspace:^", @@ -27,7 +27,7 @@ "devDependencies": { "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", - "@pigment-css/vite-plugin": "^0.0.12", + "@pigment-css/vite-plugin": "^0.0.13", "@types/react": "^18.2.55", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.0", diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx new file mode 100644 index 00000000000000..d409e60c4c649d --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-paper.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import Elevation from '../../../../../docs/data/material/components/paper/Elevation.tsx'; +import SimplePaper from '../../../../../docs/data/material/components/paper/SimplePaper.tsx'; +import SquareCorners from '../../../../../docs/data/material/components/paper/SquareCorners.tsx'; +import Variants from '../../../../../docs/data/material/components/paper/Variants.tsx'; + +export default function Paper() { + return ( + +

Paper

+
+

Elevation

+
+ +
+
+
+

Simple Paper

+
+ +
+
+
+

Square Corners

+
+ +
+
+
+

Variants

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx new file mode 100644 index 00000000000000..4ee01f755d755c --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-tabs.tsx @@ -0,0 +1,143 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AccessibleTabs1 from '../../../../../docs/data/material/components/tabs/AccessibleTabs1.tsx'; +import AccessibleTabs2 from '../../../../../docs/data/material/components/tabs/AccessibleTabs2.tsx'; +import BasicTabs from '../../../../../docs/data/material/components/tabs/BasicTabs.tsx'; +import CenteredTabs from '../../../../../docs/data/material/components/tabs/CenteredTabs.tsx'; +import ColorTabs from '../../../../../docs/data/material/components/tabs/ColorTabs.tsx'; +import CustomizedTabs from '../../../../../docs/data/material/components/tabs/CustomizedTabs.tsx'; +import DisabledTabs from '../../../../../docs/data/material/components/tabs/DisabledTabs.tsx'; +import FullWidthTabs from '../../../../../docs/data/material/components/tabs/FullWidthTabs.tsx'; +import IconLabelTabs from '../../../../../docs/data/material/components/tabs/IconLabelTabs.tsx'; +import IconPositionTabs from '../../../../../docs/data/material/components/tabs/IconPositionTabs.tsx'; +import IconTabs from '../../../../../docs/data/material/components/tabs/IconTabs.tsx'; +import LabTabs from '../../../../../docs/data/material/components/tabs/LabTabs.tsx'; +import NavTabs from '../../../../../docs/data/material/components/tabs/NavTabs.tsx'; +import ScrollableTabsButtonAuto from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx'; +import ScrollableTabsButtonForce from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx'; +import ScrollableTabsButtonPrevent from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx'; +import ScrollableTabsButtonVisible from '../../../../../docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx'; +import TabsWrappedLabel from '../../../../../docs/data/material/components/tabs/TabsWrappedLabel.tsx'; +import VerticalTabs from '../../../../../docs/data/material/components/tabs/VerticalTabs.tsx'; + +export default function Tabs() { + return ( + +

Tabs

+
+

Accessible Tabs1

+
+ +
+
+
+

Accessible Tabs2

+
+ +
+
+
+

Basic Tabs

+
+ +
+
+
+

Centered Tabs

+
+ +
+
+
+

Color Tabs

+
+ +
+
+
+

Customized Tabs

+
+ +
+
+
+

Disabled Tabs

+
+ +
+
+
+

Full Width Tabs

+
+ +
+
+
+

Icon Label Tabs

+
+ +
+
+
+

Icon Position Tabs

+
+ +
+
+
+

Icon Tabs

+
+ +
+
+
+

Lab Tabs

+
+ +
+
+
+

Nav Tabs

+
+ +
+
+
+

Scrollable Tabs Button Auto

+
+ +
+
+
+

Scrollable Tabs Button Force

+
+ +
+
+
+

Scrollable Tabs Button Prevent

+
+ +
+
+
+

Scrollable Tabs Button Visible

+
+ +
+
+
+

Tabs Wrapped Label

+
+ +
+
+
+

Vertical Tabs

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx new file mode 100644 index 00000000000000..f6c163bf911fff --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-tooltip.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import AccessibilityTooltips from '../../../../../docs/data/material/components/tooltips/AccessibilityTooltips.tsx'; +import AnchorElTooltips from '../../../../../docs/data/material/components/tooltips/AnchorElTooltips.tsx'; +import ArrowTooltips from '../../../../../docs/data/material/components/tooltips/ArrowTooltips.tsx'; +import BasicTooltip from '../../../../../docs/data/material/components/tooltips/BasicTooltip.tsx'; +import ControlledTooltips from '../../../../../docs/data/material/components/tooltips/ControlledTooltips.tsx'; +import CustomizedTooltips from '../../../../../docs/data/material/components/tooltips/CustomizedTooltips.tsx'; +import DelayTooltips from '../../../../../docs/data/material/components/tooltips/DelayTooltips.tsx'; +import DisabledTooltips from '../../../../../docs/data/material/components/tooltips/DisabledTooltips.tsx'; +import FollowCursorTooltips from '../../../../../docs/data/material/components/tooltips/FollowCursorTooltips.tsx'; +import NonInteractiveTooltips from '../../../../../docs/data/material/components/tooltips/NonInteractiveTooltips.tsx'; +import PositionedTooltips from '../../../../../docs/data/material/components/tooltips/PositionedTooltips.tsx'; +import TooltipMargin from '../../../../../docs/data/material/components/tooltips/TooltipMargin.tsx'; +import TooltipOffset from '../../../../../docs/data/material/components/tooltips/TooltipOffset.tsx'; +import TransitionsTooltips from '../../../../../docs/data/material/components/tooltips/TransitionsTooltips.tsx'; +import TriggersTooltips from '../../../../../docs/data/material/components/tooltips/TriggersTooltips.tsx'; +import VariableWidth from '../../../../../docs/data/material/components/tooltips/VariableWidth.tsx'; + +export default function Tooltips() { + return ( + +

Tooltips

+
+

Accessibility Tooltips

+
+ +
+
+
+

Anchor El Tooltips

+
+ +
+
+
+

Arrow Tooltips

+
+ +
+
+
+

Basic Tooltip

+
+ +
+
+
+

Controlled Tooltips

+
+ +
+
+
+

Customized Tooltips

+
+ +
+
+
+

Delay Tooltips

+
+ +
+
+
+

Disabled Tooltips

+
+ +
+
+
+

Follow Cursor Tooltips

+
+ +
+
+
+

Non Interactive Tooltips

+
+ +
+
+
+

Positioned Tooltips

+
+ +
+
+
+

Tooltip Margin

+
+ +
+
+
+

Tooltip Offset

+
+ +
+
+
+

Transitions Tooltips

+
+ +
+
+
+

Triggers Tooltips

+
+ +
+
+
+

Variable Width

+
+ +
+
+ + ); +} diff --git a/package.json b/package.json index e34c00919f76db..97f7c00407dc5e 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "@mui/utils": "workspace:^", "@next/eslint-plugin-next": "^14.2.3", "@octokit/rest": "^20.1.1", - "@pigment-css/react": "^0.0.12", + "@pigment-css/react": "^0.0.13", "@playwright/test": "1.44.1", "@types/enzyme": "^3.10.18", "@types/fs-extra": "^11.0.4", diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js index 1b459620da0610..dfbd74726d4e00 100644 --- a/packages/mui-material/src/Collapse/Collapse.js +++ b/packages/mui-material/src/Collapse/Collapse.js @@ -6,10 +6,9 @@ import { Transition } from 'react-transition-group'; import useTimeout from '@mui/utils/useTimeout'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import { duration } from '../styles/createTransitions'; import { getTransitionProps } from '../transitions/utils'; -import useTheme from '../styles/useTheme'; import { useForkRef } from '../utils'; import { getCollapseUtilityClass } from './collapseClasses'; diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index f7d1e687b68049..0988a7c8818508 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -11,8 +11,7 @@ import Paper from '../Paper'; import dialogClasses, { getDialogUtilityClass } from './dialogClasses'; import DialogContext from './DialogContext'; import Backdrop from '../Backdrop'; -import useTheme from '../styles/useTheme'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; const useThemeProps = createUseThemeProps('MuiDialog'); diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js index e3d5f686f503c1..45f7b9bbb2af61 100644 --- a/packages/mui-material/src/Drawer/Drawer.js +++ b/packages/mui-material/src/Drawer/Drawer.js @@ -9,9 +9,8 @@ import Modal from '../Modal'; import Slide from '../Slide'; import Paper from '../Paper'; import capitalize from '../utils/capitalize'; -import useTheme from '../styles/useTheme'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import { getDrawerUtilityClass } from './drawerClasses'; const useThemeProps = createUseThemeProps('MuiDrawer'); diff --git a/packages/mui-material/src/Fade/Fade.js b/packages/mui-material/src/Fade/Fade.js index 0258a3adae8723..ad0f669096ccb8 100644 --- a/packages/mui-material/src/Fade/Fade.js +++ b/packages/mui-material/src/Fade/Fade.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/Grow/Grow.js b/packages/mui-material/src/Grow/Grow.js index 670d4582c4ba86..d4f57bf40161fc 100644 --- a/packages/mui-material/src/Grow/Grow.js +++ b/packages/mui-material/src/Grow/Grow.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import useTimeout from '@mui/utils/useTimeout'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import { Transition } from 'react-transition-group'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { getTransitionProps, reflow } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index ae743d2a438958..80cf5374e66af5 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -6,13 +6,12 @@ import { alpha } from '@mui/system/colorManipulator'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import useForkRef from '../utils/useForkRef'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; import getTextDecoration, { colorTransformations } from './getTextDecoration'; -import useTheme from '../styles/useTheme'; const useThemeProps = createUseThemeProps('MuiLink'); diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js index fbb7d90343eb9f..f4b9bbb4ae1bc8 100644 --- a/packages/mui-material/src/Paper/Paper.js +++ b/packages/mui-material/src/Paper/Paper.js @@ -6,9 +6,8 @@ import integerPropType from '@mui/utils/integerPropType'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import getOverlayAlpha from '../styles/getOverlayAlpha'; -import useTheme from '../styles/useTheme'; import { getPaperUtilityClass } from './paperClasses'; const useThemeProps = createUseThemeProps('MuiPaper'); diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js index f2d30a7a97d588..556ede01df8ff4 100644 --- a/packages/mui-material/src/Slide/Slide.js +++ b/packages/mui-material/src/Slide/Slide.js @@ -7,7 +7,7 @@ import HTMLElementType from '@mui/utils/HTMLElementType'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; import debounce from '../utils/debounce'; import useForkRef from '../utils/useForkRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import { ownerWindow } from '../utils'; diff --git a/packages/mui-material/src/Snackbar/Snackbar.js b/packages/mui-material/src/Snackbar/Snackbar.js index 3b731e05c71c48..e44634c3679e1f 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.js +++ b/packages/mui-material/src/Snackbar/Snackbar.js @@ -5,8 +5,7 @@ import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { ClickAwayListener } from '@mui/base/ClickAwayListener'; import { useSnackbar } from '@mui/base/useSnackbar'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import SnackbarContent from '../SnackbarContent'; diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index f65f03100530c8..5fec02b848c903 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -6,8 +6,7 @@ import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import useTimeout from '@mui/utils/useTimeout'; import clamp from '@mui/utils/clamp'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import Zoom from '../Zoom'; import Fab from '../Fab'; import capitalize from '../utils/capitalize'; diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 71e6f51c2932ae..5be8cdab8d0bb6 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -3,7 +3,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; -import useThemeProps from '@mui/system/useThemeProps'; import { NoSsr } from '@mui/base'; import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer'; import useForkRef from '../utils/useForkRef'; @@ -11,10 +10,12 @@ import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; import useEventCallback from '../utils/useEventCallback'; import useEnhancedEffect from '../utils/useEnhancedEffect'; -import useTheme from '../styles/useTheme'; +import { createUseThemeProps, useTheme } from '../zero-styled'; import { getTransitionProps } from '../transitions/utils'; import SwipeArea from './SwipeArea'; +const useThemeProps = createUseThemeProps('MuiSwipeableDrawer'); + // This value is closed to what browsers are using internally to // trigger a native scroll. const UNCERTAINTY_THRESHOLD = 3; // px diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index f07471d7bcf24f..435b0702ddb6f9 100644 --- a/packages/mui-material/src/Tabs/Tabs.js +++ b/packages/mui-material/src/Tabs/Tabs.js @@ -7,8 +7,7 @@ import refType from '@mui/utils/refType'; import { useSlotProps } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import debounce from '../utils/debounce'; import animate from '../internal/animate'; import ScrollbarSize from './ScrollbarSize'; diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index a3115d00e0620d..512e79347176e2 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -8,8 +8,7 @@ import { appendOwnerState } from '@mui/base/utils'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; -import { styled, createUseThemeProps } from '../zero-styled'; -import useTheme from '../styles/useTheme'; +import { styled, createUseThemeProps, useTheme } from '../zero-styled'; import capitalize from '../utils/capitalize'; import Grow from '../Grow'; import Popper from '../Popper'; diff --git a/packages/mui-material/src/Zoom/Zoom.js b/packages/mui-material/src/Zoom/Zoom.js index 5f0ebfd5d9f781..b93d79aab2a7df 100644 --- a/packages/mui-material/src/Zoom/Zoom.js +++ b/packages/mui-material/src/Zoom/Zoom.js @@ -3,7 +3,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { Transition } from 'react-transition-group'; import elementAcceptingRef from '@mui/utils/elementAcceptingRef'; -import useTheme from '../styles/useTheme'; +import { useTheme } from '../zero-styled'; import { reflow, getTransitionProps } from '../transitions/utils'; import useForkRef from '../utils/useForkRef'; diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts index 8db9015025569e..41de04ee482916 100644 --- a/packages/mui-material/src/styles/index.d.ts +++ b/packages/mui-material/src/styles/index.d.ts @@ -100,6 +100,9 @@ export { default as withTheme } from './withTheme'; 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 82a05b20ac68e6..1ec3a951a0aeff 100644 --- a/packages/mui-material/src/styles/index.js +++ b/packages/mui-material/src/styles/index.js @@ -31,7 +31,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM export { default as createStyles } from './createStyles'; export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils'; export { default as responsiveFontSizes } from './responsiveFontSizes'; -export { duration, easing } from './createTransitions'; +export { default as createTransitions, duration, easing } from './createTransitions'; export { default as useTheme } from './useTheme'; export { default as useThemeProps } from './useThemeProps'; export { default as styled } from './styled'; @@ -50,6 +50,8 @@ 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/src/styles/stringifyTheme.test.ts b/packages/mui-material/src/styles/stringifyTheme.test.ts new file mode 100644 index 00000000000000..ef2f0dcf99eab9 --- /dev/null +++ b/packages/mui-material/src/styles/stringifyTheme.test.ts @@ -0,0 +1,147 @@ +import { expect } from 'chai'; +import { stringifyTheme } from './stringifyTheme'; +import extendTheme from './extendTheme'; + +describe('StringifyTheme', () => { + it('should serialize the theme', () => { + const theme = extendTheme(); + const result = stringifyTheme({ + breakpoints: theme.breakpoints, + transitions: theme.transitions, + }); + expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "breakpoints": { + "keys": [ + "xs", + "sm", + "md", + "lg", + "xl" + ], + "values": { + "xs": 0, + "sm": 600, + "md": 900, + "lg": 1200, + "xl": 1536 + }, + "unit": "px" + }, + "transitions": { + "easing": { + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)" + }, + "duration": { + "shortest": 150, + "shorter": 200, + "short": 250, + "standard": 300, + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195 + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + + // test that non-seriazable values still exist in the original theme + expect(typeof theme.generateStyleSheets).to.equal('function'); + }); + + it('should serialize the custom theme', () => { + const theme = extendTheme({ + breakpoints: { + values: { + mobile: 0, + tablet: 640, + laptop: 1024, + desktop: 1280, + } as any, + }, + transitions: { + duration: { + standard: 432, + }, + }, + }); + const result = stringifyTheme({ + breakpoints: theme.breakpoints, + transitions: theme.transitions, + }); + expect(result).to.equal(`import { createBreakpoints } from '@mui/system'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "breakpoints": { + "keys": [ + "mobile", + "tablet", + "laptop", + "desktop" + ], + "values": { + "mobile": 0, + "tablet": 640, + "laptop": 1024, + "desktop": 1280 + }, + "unit": "px" + }, + "transitions": { + "duration": { + "standard": 432, + "shortest": 150, + "shorter": 200, + "short": 250, + "complex": 375, + "enteringScreen": 225, + "leavingScreen": 195 + }, + "easing": { + "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", + "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", + "easeIn": "cubic-bezier(0.4, 0, 1, 1)", + "sharp": "cubic-bezier(0.4, 0, 0.6, 1)" + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + + // test that non-seriazable values still exist in the original theme + expect(typeof theme.generateStyleSheets).to.equal('function'); + }); + + it('works with framework toRuntimeSource', () => { + const theme = { palette: { primary: { main: '#ff5252' } }, toRuntimeSource: stringifyTheme }; + expect(theme.toRuntimeSource.call(theme, theme)).to + .equal(`import { createBreakpoints } from '@mui/system'; +import { createTransitions } from '@mui/material/styles'; + +const theme = { + "palette": { + "primary": { + "main": "#ff5252" + } + } +}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`); + }); +}); diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts new file mode 100644 index 00000000000000..1b56359482fa3d --- /dev/null +++ b/packages/mui-material/src/styles/stringifyTheme.ts @@ -0,0 +1,62 @@ +/* eslint-disable import/prefer-default-export */ +import { isPlainObject } from '@mui/utils/deepmerge'; + +function isSerializable(val: any) { + return ( + isPlainObject(val) || + typeof val === 'undefined' || + typeof val === 'string' || + typeof val === 'boolean' || + typeof val === 'number' || + Array.isArray(val) + ); +} + +/** + * `baseTheme` usually comes from `createTheme` or `extendTheme`. + * + * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS + * For example, in a Next.js project: + * + * ```js + * // next.config.js + * const { extendTheme } = require('@mui/material/styles'); + * + * const theme = extendTheme(); + * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime. + * theme.toRuntimeSource = stringifyTheme; + * + * module.exports = withPigment({ + * theme, + * }); + * ``` + */ +export function stringifyTheme(baseTheme: Record = {}) { + const serializableTheme: Record = { ...baseTheme }; + + function serializeTheme(object: Record) { + const array = Object.entries(object); + // eslint-disable-next-line no-plusplus + for (let index = 0; index < array.length; index++) { + const [key, value] = array[index]; + if (!isSerializable(value) || key.startsWith('unstable_')) { + delete object[key]; + } else if (isPlainObject(value)) { + object[key] = { ...value }; + serializeTheme(object[key]); + } + } + } + + serializeTheme(serializableTheme); + + return `import { createBreakpoints } from '@mui/system'; +import { createTransitions } from '@mui/material/styles'; + +const theme = ${JSON.stringify(serializableTheme, null, 2)}; + +theme.breakpoints = createBreakpoints(theme.breakpoints || {}); +theme.transitions = createTransitions(theme.transitions || {}); + +export default theme;`; +} diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index 129a9947366972..fa7a468615daba 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { extendSxProp } from '@mui/system/styleFunctionSx'; import useThemeProps from '../styles/useThemeProps'; +import useTheme from '../styles/useTheme'; import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles'; export { css, keyframes } from '@mui/system'; @@ -22,3 +23,5 @@ export function createUseThemeProps(name: string) { export function internal_createExtendSxProp() { return extendSxProp; } + +export { useTheme }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57997744176d03..d30324d39343bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,8 +105,8 @@ importers: specifier: ^20.1.1 version: 20.1.1 '@pigment-css/react': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0) '@playwright/test': specifier: 1.44.1 version: 1.44.1 @@ -327,8 +327,8 @@ importers: apps/local-ui-lib: dependencies: '@pigment-css/react': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0) apps/pigment-css-next-app: dependencies: @@ -357,14 +357,14 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0) local-ui-lib: specifier: workspace:^ version: link:../local-ui-lib next: specifier: latest - version: 14.2.3(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -373,8 +373,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@pigment-css/nextjs-plugin': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(next@14.2.3(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0) + specifier: ^0.0.14 + version: 0.0.14(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0) '@types/node': specifier: ^18.19.34 version: 18.19.34 @@ -412,8 +412,8 @@ importers: specifier: workspace:^ version: link:../../packages/mui-utils/build '@pigment-css/react': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -443,8 +443,8 @@ importers: specifier: ^7.24.7 version: 7.24.7(@babel/core@7.24.7) '@pigment-css/vite-plugin': - specifier: ^0.0.12 - version: 0.0.12(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2)) + specifier: ^0.0.13 + version: 0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2)) '@types/react': specifier: 18.2.55 version: 18.2.55 @@ -3610,6 +3610,7 @@ packages: '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -3617,6 +3618,7 @@ packages: '@humanwhocodes/object-schema@2.0.2': resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} + deprecated: Use @eslint/object-schema instead '@hutson/parse-repository-url@3.0.2': resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==} @@ -4133,8 +4135,8 @@ packages: '@next/env@13.5.1': resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} - '@next/env@14.2.3': - resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==} + '@next/env@14.2.4': + resolution: {integrity: sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg==} '@next/eslint-plugin-next@14.2.3': resolution: {integrity: sha512-L3oDricIIjgj1AVnRdRor21gI7mShlSwU/1ZGHmqM3LzHhXXhdkrfeNY5zif25Bi5Dd7fiJHsbhoZCHfXYvlAw==} @@ -4145,8 +4147,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@14.2.3': - resolution: {integrity: sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==} + '@next/swc-darwin-arm64@14.2.4': + resolution: {integrity: sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4157,8 +4159,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@14.2.3': - resolution: {integrity: sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==} + '@next/swc-darwin-x64@14.2.4': + resolution: {integrity: sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4169,8 +4171,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@14.2.3': - resolution: {integrity: sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==} + '@next/swc-linux-arm64-gnu@14.2.4': + resolution: {integrity: sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4181,8 +4183,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@14.2.3': - resolution: {integrity: sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==} + '@next/swc-linux-arm64-musl@14.2.4': + resolution: {integrity: sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4193,8 +4195,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@14.2.3': - resolution: {integrity: sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==} + '@next/swc-linux-x64-gnu@14.2.4': + resolution: {integrity: sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4205,8 +4207,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@14.2.3': - resolution: {integrity: sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==} + '@next/swc-linux-x64-musl@14.2.4': + resolution: {integrity: sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4217,8 +4219,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@14.2.3': - resolution: {integrity: sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==} + '@next/swc-win32-arm64-msvc@14.2.4': + resolution: {integrity: sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4229,8 +4231,8 @@ packages: cpu: [ia32] os: [win32] - '@next/swc-win32-ia32-msvc@14.2.3': - resolution: {integrity: sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==} + '@next/swc-win32-ia32-msvc@14.2.4': + resolution: {integrity: sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4241,8 +4243,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@14.2.3': - resolution: {integrity: sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==} + '@next/swc-win32-x64-msvc@14.2.4': + resolution: {integrity: sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -4589,21 +4591,21 @@ packages: resolution: {integrity: sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==} engines: {node: '>=14'} - '@pigment-css/nextjs-plugin@0.0.12': - resolution: {integrity: sha512-GOWnMzKuFmj8JePw99E5ZFRBOI+gexeDJBY9MDKOtorhRYAmfkTWC36HhM9dlEhW5c7KjaJnjyXRHGOmhGQIXw==} + '@pigment-css/nextjs-plugin@0.0.14': + resolution: {integrity: sha512-aGRpUnXrJi7jbdHddh1cVeVXeiYvglXQQhpzxJ1grr1f9RovGcyuEx3zADgEG3nZB1TGL6t2zdOUvgz4bCWIyQ==} peerDependencies: next: ^12.0.0 || ^13.0.0 || ^14.0.0 - '@pigment-css/react@0.0.12': - resolution: {integrity: sha512-OXL/5mjG6Q0qT2FvSwfWRinfI+DoevQWh27ApM6PtiKjmJvSXUXDb97bPtdK9dQWAzlfjz5iC82HMIGkKaAhAw==} + '@pigment-css/react@0.0.13': + resolution: {integrity: sha512-oMFp4u9nLbDpRqvm9o65v0ZgectslIT0Z5k6nz0qhU8vU0ifNAXuKlfe5kD5UOfHcqaEHvy7+6uvoj/YAzdFBw==} peerDependencies: react: ^17.0.0 || ^18.0.0 - '@pigment-css/unplugin@0.0.12': - resolution: {integrity: sha512-fLnskFawudo63HL4qcBqQVB6A9uJqmpdueIrT2IUdo1pbAAiFKZCBw9YE7RlCVkTTrhycQCSkG7JYMJaoHy4/g==} + '@pigment-css/unplugin@0.0.14': + resolution: {integrity: sha512-oRAHxBiK7sZ8njZukJQJJdLJ2m26641S2GpnKbKLKV6KQa3TgdsZY34jzEG8iyWB4fBbW9JbLfloSruFncoSrg==} - '@pigment-css/vite-plugin@0.0.12': - resolution: {integrity: sha512-ou3tMiEA1MCMk7+oyz9spZoVvzWhHD01OLNkK0AlTmHKOQtTG9OLU85hCO7C9aLcWvjG+W3ra5oWSqc93ctYBA==} + '@pigment-css/vite-plugin@0.0.13': + resolution: {integrity: sha512-O6O82vzuyOeqCG8sDbETik7g8ZbR53NVlYvFLDvrB1kxZ0k9dAhV5VCgi1hac+FHPwSsV7bQ+dg1pcMz40l2xA==} peerDependencies: vite: ^4.0.0 || ^5.0.0 @@ -9469,8 +9471,8 @@ packages: sass: optional: true - next@14.2.3: - resolution: {integrity: sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==} + next@14.2.4: + resolution: {integrity: sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==} engines: {node: '>=18.17.0'} hasBin: true peerDependencies: @@ -10396,6 +10398,10 @@ packages: q@1.5.1: resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==} engines: {node: '>=0.6.0', teleport: '>=0.2.0'} + deprecated: |- + You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other. + + (For a CapTP with native promises, see @endo/eventual-send and @endo/captp) qjobs@1.2.0: resolution: {integrity: sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==} @@ -14586,7 +14592,7 @@ snapshots: '@next/env@13.5.1': {} - '@next/env@14.2.3': {} + '@next/env@14.2.4': {} '@next/eslint-plugin-next@14.2.3': dependencies: @@ -14595,55 +14601,55 @@ snapshots: '@next/swc-darwin-arm64@13.5.1': optional: true - '@next/swc-darwin-arm64@14.2.3': + '@next/swc-darwin-arm64@14.2.4': optional: true '@next/swc-darwin-x64@13.5.1': optional: true - '@next/swc-darwin-x64@14.2.3': + '@next/swc-darwin-x64@14.2.4': optional: true '@next/swc-linux-arm64-gnu@13.5.1': optional: true - '@next/swc-linux-arm64-gnu@14.2.3': + '@next/swc-linux-arm64-gnu@14.2.4': optional: true '@next/swc-linux-arm64-musl@13.5.1': optional: true - '@next/swc-linux-arm64-musl@14.2.3': + '@next/swc-linux-arm64-musl@14.2.4': optional: true '@next/swc-linux-x64-gnu@13.5.1': optional: true - '@next/swc-linux-x64-gnu@14.2.3': + '@next/swc-linux-x64-gnu@14.2.4': optional: true '@next/swc-linux-x64-musl@13.5.1': optional: true - '@next/swc-linux-x64-musl@14.2.3': + '@next/swc-linux-x64-musl@14.2.4': optional: true '@next/swc-win32-arm64-msvc@13.5.1': optional: true - '@next/swc-win32-arm64-msvc@14.2.3': + '@next/swc-win32-arm64-msvc@14.2.4': optional: true '@next/swc-win32-ia32-msvc@13.5.1': optional: true - '@next/swc-win32-ia32-msvc@14.2.3': + '@next/swc-win32-ia32-msvc@14.2.4': optional: true '@next/swc-win32-x64-msvc@13.5.1': optional: true - '@next/swc-win32-x64-msvc@14.2.3': + '@next/swc-win32-x64-msvc@14.2.4': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -15066,16 +15072,16 @@ snapshots: '@opentelemetry/semantic-conventions@1.24.1': {} - '@pigment-css/nextjs-plugin@0.0.12(@types/react@18.2.55)(next@14.2.3(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)': + '@pigment-css/nextjs-plugin@0.0.14(@types/react@18.2.55)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)': dependencies: - '@pigment-css/unplugin': 0.0.12(@types/react@18.2.55)(react@18.2.0) - next: 14.2.3(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@pigment-css/unplugin': 0.0.14(@types/react@18.2.55)(react@18.2.0) + next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) transitivePeerDependencies: - '@types/react' - react - supports-color - '@pigment-css/react@0.0.12(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/react@0.0.13(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 '@babel/helper-module-imports': 7.24.7 @@ -15103,10 +15109,10 @@ snapshots: - '@types/react' - supports-color - '@pigment-css/unplugin@0.0.12(@types/react@18.2.55)(react@18.2.0)': + '@pigment-css/unplugin@0.0.14(@types/react@18.2.55)(react@18.2.0)': dependencies: '@babel/core': 7.24.7 - '@pigment-css/react': 0.0.12(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.13(@types/react@18.2.55)(react@18.2.0) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0 @@ -15116,11 +15122,11 @@ snapshots: - react - supports-color - '@pigment-css/vite-plugin@0.0.12(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(terser@5.29.2))': + '@pigment-css/vite-plugin@0.0.13(@types/react@18.2.55)(react@18.2.0)(vite@5.2.13(@types/node@18.19.34)(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.12(@types/react@18.2.55)(react@18.2.0) + '@pigment-css/react': 0.0.13(@types/react@18.2.55)(react@18.2.0) '@wyw-in-js/shared': 0.5.3 '@wyw-in-js/transform': 0.5.3 babel-plugin-define-var: 0.1.0 @@ -21365,9 +21371,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@14.2.3(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.44.1)(babel-plugin-macros@3.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: - '@next/env': 14.2.3 + '@next/env': 14.2.4 '@swc/helpers': 0.5.5 busboy: 1.6.0 caniuse-lite: 1.0.30001599 @@ -21377,15 +21383,15 @@ snapshots: react-dom: 18.2.0(react@18.2.0) styled-jsx: 5.1.1(@babel/core@7.24.7)(babel-plugin-macros@3.1.0)(react@18.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 14.2.3 - '@next/swc-darwin-x64': 14.2.3 - '@next/swc-linux-arm64-gnu': 14.2.3 - '@next/swc-linux-arm64-musl': 14.2.3 - '@next/swc-linux-x64-gnu': 14.2.3 - '@next/swc-linux-x64-musl': 14.2.3 - '@next/swc-win32-arm64-msvc': 14.2.3 - '@next/swc-win32-ia32-msvc': 14.2.3 - '@next/swc-win32-x64-msvc': 14.2.3 + '@next/swc-darwin-arm64': 14.2.4 + '@next/swc-darwin-x64': 14.2.4 + '@next/swc-linux-arm64-gnu': 14.2.4 + '@next/swc-linux-arm64-musl': 14.2.4 + '@next/swc-linux-x64-gnu': 14.2.4 + '@next/swc-linux-x64-musl': 14.2.4 + '@next/swc-win32-arm64-msvc': 14.2.4 + '@next/swc-win32-ia32-msvc': 14.2.4 + '@next/swc-win32-x64-msvc': 14.2.4 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.44.1 transitivePeerDependencies: