From 4b98e48c18e985c4b6fa1eb1ea63028a5ff6dc34 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Apr 2024 02:12:15 +0700 Subject: [PATCH 01/20] update runtime-sx --- .../pigment-css-react/src/processors/sx.ts | 47 +++++++++- packages/pigment-css-react/src/sx.js | 25 ++++- .../pigment-css-react/src/utils/sx-plugin.ts | 92 +------------------ 3 files changed, 70 insertions(+), 94 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 141c470e..b8ae9f02 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -123,6 +123,7 @@ export class SxProcessor extends BaseProcessor { if (this.artifacts.length === 0) { return; } + let result = this.value; if (this.collectedVariables.length) { const varProperties: ReturnType[] = this.collectedVariables.map( ([variableId, expression, isUnitLess]) => { @@ -156,10 +157,50 @@ export class SxProcessor extends BaseProcessor { t.objectProperty(t.identifier('className'), t.stringLiteral(this.className)), t.objectProperty(t.identifier('vars'), t.objectExpression(varProperties)), ]); - this.replacer(obj, false); - } else { - this.replacer(this.value, false); + result = obj; } + + this.replacer( + // @ts-ignore + (tagPath) => { + let depth = 0; + let jsxElement = tagPath; + while (jsxElement.type !== 'JSXOpeningElement' && depth < 5) { + jsxElement = jsxElement.parentPath; + depth += 1; + } + + if (jsxElement.isJSXOpeningElement()) { + const attributes: any[] = []; + let sxAttribute: any; + jsxElement.get('attributes').forEach((attr: any) => { + if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { + sxAttribute = attr; + attr.remove(); + } else if (attr.isJSXSpreadAttribute()) { + attributes.push(t.spreadElement(attr.node.argument)); + } else if ( + attr.isJSXAttribute() && + (attr.node.name.name === 'className' || attr.node.name.name === 'style') + ) { + attributes.push( + t.objectProperty( + t.identifier(attr.node.name.name), + attr.node.value.type === 'JSXExpressionContainer' + ? attr.node.value.expression + : attr.node.value, + ), + ); + } + }); + if (sxAttribute) { + tagPath.node.arguments = [result, t.objectExpression(attributes)]; + jsxElement.node.attributes.push(t.jsxSpreadAttribute(tagPath.node)); + } + } + }, + false, + ); } get asSelector(): string { diff --git a/packages/pigment-css-react/src/sx.js b/packages/pigment-css-react/src/sx.js index 4d9091f5..ee0bcfe0 100644 --- a/packages/pigment-css-react/src/sx.js +++ b/packages/pigment-css-react/src/sx.js @@ -1,3 +1,24 @@ -export default function sx(styleObj) { - return styleObj; +export default function sx(transformedSx, { className, style }) { + const sxClass = typeof transformedSx === 'string' ? transformedSx : transformedSx?.className; + const sxVars = + transformedSx && typeof transformedSx !== 'string' ? transformedSx.vars : undefined; + const varStyles = {}; + + if (sxVars) { + Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { + if (typeof value === 'string' || isUnitLess) { + varStyles[`--${cssVariable}`] = value; + } else { + varStyles[`--${cssVariable}`] = `${value}px`; + } + }); + } + + return { + className: `${sxClass}${className ? ` ${className}` : ''}`, + style: { + ...varStyles, + ...style, + }, + }; } diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts index d10e781c..227bfe6c 100644 --- a/packages/pigment-css-react/src/utils/sx-plugin.ts +++ b/packages/pigment-css-react/src/utils/sx-plugin.ts @@ -24,81 +24,6 @@ function convertJsxMemberExpressionToMemberExpression( ); } -function wrapWithJsxElement( - t: typeof Types, - tagNamePath: NodePath, - sxComponentName: string, -) { - const sxComponent = addNamed( - tagNamePath, - sxComponentName, - `${process.env.PACKAGE_NAME}/private-runtime`, - ); - const jsxElement = tagNamePath.findParent((p) => p.isJSXElement()); - if (!jsxElement?.isJSXElement()) { - return; - } - const component = t.jsxIdentifier(sxComponent.name); - - const newChildren = (jsxElement.get('children') ?? []).map((child) => child.node); - let sxComponentValue: Types.Identifier | Types.MemberExpression | null = null; - - if (tagNamePath.isJSXIdentifier()) { - sxComponentValue = t.identifier(tagNamePath.node.name); - } else if (tagNamePath.isJSXMemberExpression()) { - sxComponentValue = convertJsxMemberExpressionToMemberExpression(t, tagNamePath); - } - - const newElement = t.jsxElement( - t.jsxOpeningElement( - component, - [ - t.jsxAttribute( - t.jsxIdentifier('sxComponent'), - t.jsxExpressionContainer(sxComponentValue ?? t.nullLiteral()), - ), - ...jsxElement - .get('openingElement') - .get('attributes') - .map((attr) => attr.node), - ], - !newChildren.length, - ), - newChildren.length ? t.jsxClosingElement(component) : null, - newChildren, - !newChildren.length, - ); - jsxElement.replaceWith(newElement); -} - -function wrapWithJsxCall( - t: typeof Types, - tagNamePath: NodePath, - sxComponentName: string, -) { - const sxComponent = addNamed( - tagNamePath, - sxComponentName, - `${process.env.PACKAGE_NAME}/private-runtime`, - ); - const jsxCall = tagNamePath.findParent((p) => p.isCallExpression()); - if (!jsxCall?.isCallExpression()) { - return; - } - const originalTag = tagNamePath.node; - const callArgs = jsxCall.get('arguments'); - callArgs[0].replaceWith(sxComponent); - const props = callArgs[1]; - if (props.isObjectExpression()) { - const properties = props.get('properties'); - const newProps = t.objectExpression([ - t.objectProperty(t.identifier('sxComponent'), originalTag), - ...properties.map((p) => p.node), - ]); - props.replaceWith(newProps); - } -} - function replaceNodePath( expressionPath: NodePath, namePath: NodePath, @@ -107,10 +32,8 @@ function replaceNodePath( tagNamePath: NodePath< Types.JSXIdentifier | Types.Identifier | Types.JSXMemberExpression | Types.MemberExpression >, - sxComponentName: string, ) { const sxIdentifier = addNamed(namePath, importName, process.env.PACKAGE_NAME as string); - let wasSxTransformed = false; const wrapWithSxCall = (expPath: NodePath) => { let tagNameArg: Types.Identifier | Types.MemberExpression | null = null; @@ -122,25 +45,16 @@ function replaceNodePath( tagNameArg = tagNamePath.node as Types.Identifier | Types.MemberExpression; } expPath.replaceWith(t.callExpression(sxIdentifier, [expPath.node, tagNameArg])); - wasSxTransformed = true; }; sxPropConverter(expressionPath, wrapWithSxCall); - - if (wasSxTransformed) { - if (tagNamePath.isJSXIdentifier() || tagNamePath.isJSXMemberExpression()) { - wrapWithJsxElement(t, tagNamePath, sxComponentName); - } else if (tagNamePath.isIdentifier() || tagNamePath.isMemberExpression()) { - wrapWithJsxCall(t, tagNamePath, sxComponentName); - } - } } export const babelPlugin = declare<{ propName?: string; importName?: string; sxComponentName?: string; -}>((api, { propName = 'sx', importName = 'sx', sxComponentName = 'ForwardSx' }) => { +}>((api, { propName = 'sx', importName = 'sx' }) => { api.assertVersion(7); const { types: t } = api; return { @@ -167,7 +81,7 @@ export const babelPlugin = declare<{ return; } // @ts-ignore - replaceNodePath(expressionPath, namePath, importName, t, tagName, sxComponentName); + replaceNodePath(expressionPath, namePath, importName, t, tagName); }, ObjectProperty(path) { // @TODO - Maybe add support for React.createElement calls as well. @@ -189,7 +103,7 @@ export const babelPlugin = declare<{ return; } const jsxElement = parentJsxCall.get('arguments')[0] as NodePath; - replaceNodePath(valuePath, keyPath, importName, t, jsxElement, sxComponentName); + replaceNodePath(valuePath, keyPath, importName, t, jsxElement); }, }, }; From 695b502f19ccf775e1ec742351c68345dcf0054b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Apr 2024 14:29:35 +0700 Subject: [PATCH 02/20] finish sx callexpression --- .../pigment-css-react/src/processors/sx.ts | 110 ++++++++---------- 1 file changed, 51 insertions(+), 59 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index b8ae9f02..e1dd9bda 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -1,4 +1,5 @@ -import type { Expression } from '@babel/types'; +import type { NodePath } from '@babel/core'; +import type { Expression, JSXAttribute, JSXOpeningElement } from '@babel/types'; import { validateParams, type Params, @@ -11,31 +12,6 @@ import { processCssObject } from '../utils/processCssObject'; import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; import BaseProcessor from './base-processor'; -// @TODO: Maybe figure out a better way allow imports. -const allowedSxTransformImports = [`${process.env.PACKAGE_NAME}/Box`]; - -/** - * Specifically looks for whether the sx prop should be transformed or not. - * If it's a Pigment CSS styled component, the value of `argumentValue` will - * be a string className starting with "." - * In other cases, it explicitly checks if the import is allowed for sx transformation. - */ -function allowSxTransform(argumentExpression: ExpressionValue, argumentValue?: string) { - if (!argumentExpression) { - return false; - } - if ( - argumentExpression.kind === ValueType.LAZY && - argumentExpression.importedFrom?.some((i) => allowedSxTransformImports.includes(i)) - ) { - return true; - } - if (argumentValue && argumentValue[0] === '.') { - return true; - } - return false; -} - export class SxProcessor extends BaseProcessor { sxArguments: ExpressionValue[] = []; @@ -66,10 +42,6 @@ export class SxProcessor extends BaseProcessor { } } - if (!allowSxTransform(elementClassExpression, this.elementClassName)) { - return; - } - let cssText: string = ''; if (sxStyle.kind === ValueType.CONST) { if (sxStyle.ex.type === 'StringLiteral') { @@ -79,16 +51,13 @@ export class SxProcessor extends BaseProcessor { const styleObjOrFn = values.get(sxStyle.ex.name); cssText = this.processCss(styleObjOrFn, sxStyle); } - const selector = this.elementClassName - ? `${this.elementClassName}${this.asSelector}` - : this.asSelector; if (!cssText) { return; } const rules: Rules = { - [selector]: { + [this.asSelector]: { className: this.className, cssText, displayName: this.displayName, @@ -162,42 +131,65 @@ export class SxProcessor extends BaseProcessor { this.replacer( // @ts-ignore - (tagPath) => { - let depth = 0; - let jsxElement = tagPath; - while (jsxElement.type !== 'JSXOpeningElement' && depth < 5) { - jsxElement = jsxElement.parentPath; - depth += 1; + (tagPath: NodePath) => { + const jsxElement = tagPath.findParent((p) => + p.isJSXOpeningElement(), + ) as NodePath; + if (!jsxElement) { + return tagPath.node; } - if (jsxElement.isJSXOpeningElement()) { - const attributes: any[] = []; - let sxAttribute: any; - jsxElement.get('attributes').forEach((attr: any) => { - if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { - sxAttribute = attr; - attr.remove(); - } else if (attr.isJSXSpreadAttribute()) { + const attributes: any[] = []; + let sxAttribute: undefined | NodePath; + (jsxElement.get('attributes') as NodePath[]).forEach((attr) => { + if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { + sxAttribute = attr; + } else if (attr.isJSXSpreadAttribute()) { + let containRuntimeSx = false; + attr.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { attributes.push(t.spreadElement(attr.node.argument)); - } else if ( - attr.isJSXAttribute() && - (attr.node.name.name === 'className' || attr.node.name.name === 'style') - ) { + } + } else if ( + attr.isJSXAttribute() && + (attr.node.name.name === 'className' || attr.node.name.name === 'style') + ) { + const value = attr.get('value'); + if (value.isJSXExpressionContainer()) { attributes.push( t.objectProperty( t.identifier(attr.node.name.name), - attr.node.value.type === 'JSXExpressionContainer' - ? attr.node.value.expression - : attr.node.value, + value.get('expression').node as any, ), ); + } else { + attributes.push( + t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), + ); } - }); - if (sxAttribute) { - tagPath.node.arguments = [result, t.objectExpression(attributes)]; - jsxElement.node.attributes.push(t.jsxSpreadAttribute(tagPath.node)); } + }); + if (sxAttribute) { + const expContainer = sxAttribute.get('value'); + if (expContainer.isJSXExpressionContainer()) { + jsxElement.node.attributes.push( + t.jsxSpreadAttribute(expContainer.node.expression as Expression), + ); + } + sxAttribute.remove(); } + const newNode = { + ...tagPath.node, + arguments: [result, t.objectExpression(attributes)], + }; + return newNode; }, false, ); From 6b8d613869fa18381af4ee4832466fce32b83fcd Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Apr 2024 15:31:34 +0700 Subject: [PATCH 03/20] support non-JSX call --- .../pigment-css-react/src/processors/sx.ts | 96 +++++++++++++++++-- .../tests/Box/fixtures/box-jsx.output.js | 7 +- .../tests/Box/fixtures/box.output.css | 4 +- .../tests/Box/fixtures/box.output.js | 21 ++-- .../styled/fixtures/styled-rtl.output.js | 4 +- .../styled/fixtures/styled-theme.output.js | 4 +- .../tests/styled/fixtures/styled.output.js | 4 +- .../tests/sx/fixtures/sxProps.input.js | 14 ++- .../tests/sx/fixtures/sxProps.output.css | 14 +-- .../tests/sx/fixtures/sxProps.output.js | 60 +++++++----- .../tests/sx/fixtures/sxProps2.output.css | 18 ++-- .../tests/sx/fixtures/sxProps2.output.js | 36 ++++--- pnpm-lock.yaml | 2 +- 13 files changed, 199 insertions(+), 85 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index e1dd9bda..178a34d7 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -1,5 +1,12 @@ import type { NodePath } from '@babel/core'; -import type { Expression, JSXAttribute, JSXOpeningElement } from '@babel/types'; +import type { + CallExpression, + Expression, + JSXAttribute, + JSXOpeningElement, + ObjectExpression, + ObjectProperty, +} from '@babel/types'; import { validateParams, type Params, @@ -129,9 +136,30 @@ export class SxProcessor extends BaseProcessor { result = obj; } + /** + * Replace the sx call with the transformed result. It works for both JSX and non-JSX calls. + * + * For example: + * to + * to + */ this.replacer( // @ts-ignore - (tagPath: NodePath) => { + (tagPath: NodePath) => { + return t.callExpression(tagPath.get('callee').node, [result]); + }, + false, + ); + + /** + * For JSX calls, replace the sx prop with runtime sx + */ + this.replacer( + // @ts-ignore + (tagPath: NodePath) => { + if (!tagPath.parentPath.isJSXExpressionContainer()) { + return tagPath.node; + } const jsxElement = tagPath.findParent((p) => p.isJSXOpeningElement(), ) as NodePath; @@ -185,11 +213,65 @@ export class SxProcessor extends BaseProcessor { } sxAttribute.remove(); } - const newNode = { - ...tagPath.node, - arguments: [result, t.objectExpression(attributes)], - }; - return newNode; + tagPath.node.arguments.push(t.objectExpression(attributes)); + return tagPath.node; + }, + false, + ); + + // For non-JSX calls, replace the sx prop with runtime sx + this.replacer( + // @ts-ignore + (tagPath: NodePath) => { + if (!tagPath.parentPath.isObjectProperty()) { + return tagPath.node; + } + const objExpression = tagPath.findParent((p) => + p.isObjectExpression(), + ) as NodePath; + if (!objExpression) { + return tagPath.node; + } + + const properties: any[] = []; + let sxProperty: undefined | NodePath; + (objExpression.get('properties') as NodePath[]).forEach((prop) => { + if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + prop.node.key.name === 'sx' + ) { + sxProperty = prop; + } else if (prop.isSpreadElement()) { + let containRuntimeSx = false; + prop.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + properties.push(t.spreadElement(prop.node.argument)); + } + } else if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + (prop.node.key.name === 'className' || prop.node.key.name === 'style') + ) { + properties.push( + t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), + ); + } + }); + if (sxProperty) { + const expression = sxProperty.get('value'); + objExpression.node.properties.push(t.spreadElement(expression.node as CallExpression)); + sxProperty.remove(); + } + tagPath.node.arguments.push(t.objectExpression(properties)); + return tagPath.node; }, false, ); diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js index eb330c06..66ce02ba 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js @@ -1,12 +1,11 @@ -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; +import { sx as _sx } from '@pigment-css/react'; import Box from '@pigment-css/react/Box'; import { jsx as _jsx } from 'react/jsx-runtime'; export function App(props) { - return /*#__PURE__*/ _jsx(_ForwardSx, { - sxComponent: Box, + return /*#__PURE__*/ _jsx(Box, { as: 'ul', 'aria-label': props.label, - sx: 'sd5jss7', children: 'Hello Box', + ..._sx('sd5jss7', {}), }); } diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.css b/packages/pigment-css-react/tests/Box/fixtures/box.output.css index 20e66550..d332a878 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.css @@ -1,5 +1,5 @@ -._c1d15y { - color: var(--_c1d15y-0); +.bc1d15y { + color: var(--bc1d15y-0); margin: 0; margin-block: 1rem; padding: 0; diff --git a/packages/pigment-css-react/tests/Box/fixtures/box.output.js b/packages/pigment-css-react/tests/Box/fixtures/box.output.js index dc83809e..9b4c632c 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box.output.js @@ -1,20 +1,21 @@ -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; +import { sx as _sx } from '@pigment-css/react'; import Box from '@pigment-css/react/Box'; export function App(props) { return ( - <_ForwardSx - sxComponent={Box} + Hello Box - + ); } diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js index f53fc340..3e346b33 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js @@ -1,4 +1,6 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled2 } from '@pigment-css/react'; +import { styled as _styled } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; const Component = /*#__PURE__*/ _styled('div')({ classes: ['c194j3ko'], diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js index 3e3eae8b..dd4c76af 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js @@ -1,4 +1,6 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled2 } from '@pigment-css/react'; +import { styled as _styled } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js index 5ae76401..a903ef11 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -1,4 +1,6 @@ -import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled3 } from '@pigment-css/react'; +import { styled as _styled2 } from '@pigment-css/react'; +import { styled as _styled } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js index 0d8f4e16..3bc08e0e 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.input.js @@ -12,13 +12,14 @@ export const SliderRail = styled('span', { font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1}; `; -function App() { - return ; +function App(props) { + return ; } function App2(props) { return ( + ); } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css index 6d7384b2..6bb6b310 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.css @@ -9,20 +9,20 @@ .sjfloo5-1 { font-size: 3rem; } -.sjfloo5._1o8xp19 { +.s1o8xp19 { color: red; } -.sjfloo5._1xbsywq { - color: var(--_1xbsywq-0); +.s1xbsywq { + color: var(--s1xbsywq-0); } -.sjfloo5._1wnk6s5 { +.s1wnk6s5 { background-color: blue; color: white; } -.sjfloo5._tzaibv { - color: var(--_tzaibv-0); +.stzaibv { + color: var(--stzaibv-0); } -.sjfloo5._azg8ol { +.sazg8ol { margin-bottom: 8px; text-align: center; } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js index 5aefa5d9..c15cd25a 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js @@ -1,52 +1,64 @@ -import { sx as _sx8, styled as _styled } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx4 } from '@pigment-css/react/private-runtime'; -import { sx as _sx6 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; -import { sx as _sx4 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; +import { styled as _styled } from '@pigment-css/react'; +import { sx as _sx, sx as _sx2, sx as _sx3, sx as _sx4 } from '@pigment-css/react'; export const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', })({ classes: ['sjfloo5', 'sjfloo5-1'], }); -function App() { - return <_ForwardSx sxComponent={SliderRail} sx={'_1o8xp19'} />; +function App(props) { + return ( + + ); } function App2(props) { return ( - <_ForwardSx2 - sxComponent={SliderRail} + ); } function App3(props) { return ( - <_ForwardSx3 - sxComponent={SliderRail} + ); } function App4(props) { - return <_ForwardSx4 sxComponent={SliderRail} sx={'_azg8ol'} />; + return ; } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css index 90b60e9e..a31e4248 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.css @@ -9,38 +9,38 @@ .sdbmcs3-1 { font-size: 3rem; } -.sdbmcs3._i7ulc4 { +.si7ulc4 { margin-bottom: 8px; } @media (prefers-color-scheme: dark) { - .sdbmcs3._i7ulc4 { + .si7ulc4 { color: white; } } -.sdbmcs3._liig2s { +.sliig2s { border-radius: 8px; margin: 5px; } -.sdbmcs3._liig2s.MuiAutocomplete-option { +.sliig2s.MuiAutocomplete-option { padding: 8px; } -.sdbmcs3._o956n { +.so956n { color: red; - font-size: var(--_o956n-0); + font-size: var(--so956n-0); } @media (min-width: 0px) { - .sdbmcs3._o956n :hover { + .so956n :hover { background-color: red; } } @media (min-width: 600px) { - .sdbmcs3._o956n :hover { + .so956n :hover { background-color: blue; color: red; } } @media (min-width: 900px) { - .sdbmcs3._o956n :hover { + .so956n :hover { color: blue; } } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js index 7c8a5ca1..43c76369 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -1,9 +1,5 @@ -import { sx as _sx6, styled as _styled } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx3 } from '@pigment-css/react/private-runtime'; -import { sx as _sx4 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx2 } from '@pigment-css/react/private-runtime'; -import { sx as _sx2 } from '@pigment-css/react'; -import { ForwardSx as _ForwardSx } from '@pigment-css/react/private-runtime'; +import { styled as _styled } from '@pigment-css/react'; +import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react'; const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', @@ -14,21 +10,31 @@ const A = { SliderRail, }; function App(props) { - return <_ForwardSx sxComponent={SliderRail} sx={'_i7ulc4'} />; + return ; } function App2() { - return <_ForwardSx2 sxComponent={SliderRail} sx={'_liig2s'} component="li" {...props} />; + return ( + + ); } function App3(props) { return ( - <_ForwardSx3 - sxComponent={A.SliderRail} - sx={{ - className: '_o956n', - vars: { - '_o956n-0': [props.isRed ? 'h1-fontSize' : 'h2-fontSize', false], + ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5d156b9..c62659e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -558,7 +558,7 @@ importers: version: 0.5.1 '@wyw-in-js/transform': specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + version: link:../../../wyw-in-js/packages/transform clsx: specifier: ^2.1.0 version: 2.1.0 From 2f6b20973060133cf5833b8509fca0ef8796a5bd Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 10:51:04 +0700 Subject: [PATCH 04/20] update test --- .../tests/Box/fixtures/box-jsx.input.js | 21 +++++++++++++++++++ .../tests/Box/fixtures/box-jsx.output.css | 4 ++++ .../tests/Box/fixtures/box-jsx.output.js | 19 ++++++++++++++++- 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.input.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.input.js index 8d4a759c..acc90d6d 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.input.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.input.js @@ -17,3 +17,24 @@ export function App(props) { children: 'Hello Box', }); } + +function App2(props) { + return /*#__PURE__*/ _jsxDEV( + Box, + { + sx: { + display: 'flex', + flexDirection: 'column', + }, + children: 'Test', + }, + void 0, + false, + { + fileName: '', + lineNumber: 11, + columnNumber: 11, + }, + this, + ); +} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css index 8a99d69c..181b1abe 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css @@ -7,3 +7,7 @@ flex-direction: column; gap: 0.5rem; } +.sk625fs { + display: flex; + flex-direction: column; +} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js index 66ce02ba..47a9f092 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js @@ -1,4 +1,4 @@ -import { sx as _sx } from '@pigment-css/react'; +import { sx as _sx, sx as _sx2 } from '@pigment-css/react'; import Box from '@pigment-css/react/Box'; import { jsx as _jsx } from 'react/jsx-runtime'; export function App(props) { @@ -9,3 +9,20 @@ export function App(props) { ..._sx('sd5jss7', {}), }); } +function App2(props) { + return /*#__PURE__*/ _jsxDEV( + Box, + { + children: 'Test', + ..._sx2('sk625fs', {}), + }, + void 0, + false, + { + fileName: '', + lineNumber: 11, + columnNumber: 11, + }, + this, + ); +} From 438f2a4ec46c35967a1db02eddd448c1a4363ea7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 10:57:38 +0700 Subject: [PATCH 05/20] remove unnecessary sx inside styled --- packages/pigment-css-react/src/styled.js | 23 +++-------------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/packages/pigment-css-react/src/styled.js b/packages/pigment-css-react/src/styled.js index 0febf1e7..a363247d 100644 --- a/packages/pigment-css-react/src/styled.js +++ b/packages/pigment-css-react/src/styled.js @@ -26,7 +26,7 @@ function isHtmlTag(tag) { ); } -const slotShouldForwardProp = (key) => key !== 'sx' && key !== 'as' && key !== 'ownerState'; +const slotShouldForwardProp = (key) => key !== 'as' && key !== 'ownerState'; const rootShouldForwardProp = (key) => slotShouldForwardProp(key) && key !== 'classes'; /** @@ -80,7 +80,7 @@ export default function styled(tag, componentMeta = {}) { const { displayName, classes = [], vars: cssVars = {}, variants = [] } = options; const StyledComponent = React.forwardRef(function StyledComponent(inProps, ref) { - const { as, className, sx, style, ownerState, ...props } = inProps; + const { as, className, style, ownerState, ...props } = inProps; const Component = (shouldUseAs && as) || tag; const varStyles = Object.entries(cssVars).reduce( (acc, [cssVariable, [variableFunction, isUnitLess]]) => { @@ -97,25 +97,8 @@ export default function styled(tag, componentMeta = {}) { }, {}, ); - const sxClass = typeof sx === 'string' ? sx : sx?.className; - const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; - if (sxVars) { - Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { - if (typeof value === 'string' || isUnitLess) { - varStyles[`--${cssVariable}`] = value; - } else { - varStyles[`--${cssVariable}`] = `${value}px`; - } - }); - } - - const finalClassName = clsx( - classes, - sxClass, - className, - getVariantClasses(inProps, variants), - ); + const finalClassName = clsx(classes, className, getVariantClasses(inProps, variants)); const newProps = {}; // eslint-disable-next-line no-restricted-syntax From ed9d466d16e8e39ef9653e2b53e06b0213e5f60a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:02:29 +0700 Subject: [PATCH 06/20] update @wyw-in-js to 0.5.3 --- packages/pigment-css-react/package.json | 6 +- packages/pigment-css-unplugin/package.json | 4 +- packages/pigment-css-vite-plugin/package.json | 4 +- pnpm-lock.yaml | 402 ++++++++++++++---- 4 files changed, 327 insertions(+), 89 deletions(-) diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index bf3ef581..33e58d2b 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -43,9 +43,9 @@ "@emotion/styled": "^11.11.5", "@mui/system": "^6.0.0-alpha.1", "@mui/utils": "^6.0.0-alpha.1", - "@wyw-in-js/processor-utils": "^0.5.1", - "@wyw-in-js/shared": "^0.5.1", - "@wyw-in-js/transform": "^0.5.1", + "@wyw-in-js/processor-utils": "^0.5.3", + "@wyw-in-js/shared": "^0.5.3", + "@wyw-in-js/transform": "^0.5.3", "clsx": "^2.1.0", "cssesc": "^3.0.0", "csstype": "^3.1.3", diff --git a/packages/pigment-css-unplugin/package.json b/packages/pigment-css-unplugin/package.json index 576a1da6..6ff57906 100644 --- a/packages/pigment-css-unplugin/package.json +++ b/packages/pigment-css-unplugin/package.json @@ -32,8 +32,8 @@ "dependencies": { "@babel/core": "^7.24.4", "@pigment-css/react": "workspace:^", - "@wyw-in-js/shared": "^0.5.1", - "@wyw-in-js/transform": "^0.5.1", + "@wyw-in-js/shared": "^0.5.3", + "@wyw-in-js/transform": "^0.5.3", "babel-plugin-define-var": "^0.1.0", "unplugin": "^1.7.1" }, diff --git a/packages/pigment-css-vite-plugin/package.json b/packages/pigment-css-vite-plugin/package.json index 02498bb2..60f9701c 100644 --- a/packages/pigment-css-vite-plugin/package.json +++ b/packages/pigment-css-vite-plugin/package.json @@ -31,8 +31,8 @@ "@babel/core": "^7.24.4", "@babel/preset-typescript": "^7.24.1", "@pigment-css/react": "workspace:^", - "@wyw-in-js/shared": "^0.5.1", - "@wyw-in-js/transform": "^0.5.1", + "@wyw-in-js/shared": "^0.5.3", + "@wyw-in-js/transform": "^0.5.3", "babel-plugin-define-var": "^0.1.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c62659e0..1b2913fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,7 +93,7 @@ importers: version: 7.23.7(@babel/core@7.24.4) '@mnajdova/enzyme-adapter-react-18': specifier: ^0.2.0 - version: 0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0) + version: 0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0) '@mui/internal-docs-utils': specifier: ^1.0.4 version: 1.0.4 @@ -105,13 +105,13 @@ importers: version: 1.0.3 '@mui/internal-test-utils': specifier: https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils - version: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)' + version: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.3.0)(react@18.3.0)' '@mui/monorepo': specifier: github:mui/material-ui#73c88b6c3f71287a4a1f0b1b5d7d37ab268dca49 version: github.com/mui/material-ui/73c88b6c3f71287a4a1f0b1b5d7d37ab268dca49 '@mui/utils': specifier: 5.15.14 - version: 5.15.14(@types/react@18.2.75)(react@18.2.0) + version: 5.15.14(@types/react@18.2.75)(react@18.3.0) '@next/eslint-plugin-next': specifier: ^14.1.4 version: 14.1.4 @@ -351,7 +351,7 @@ importers: dependencies: '@pigment-css/react': specifier: file:../../packages/pigment-css-react - version: file:packages/pigment-css-react(@types/react@18.2.75)(react@18.2.0)(typescript@5.4.4) + version: file:packages/pigment-css-react(@types/react@18.2.75)(react@18.3.0)(typescript@5.4.4) apps/pigment-css-next-app: dependencies: @@ -497,10 +497,10 @@ importers: version: 8.56.7 '@typescript-eslint/experimental-utils': specifier: ^5.62.0 - version: 5.62.0(eslint@8.57.0)(typescript@5.4.4) + version: 5.62.0(eslint@8.57.0)(typescript@5.4.5) '@typescript-eslint/parser': specifier: ^7.5.0 - version: 7.6.0(eslint@8.57.0)(typescript@5.4.4) + version: 7.6.0(eslint@8.57.0)(typescript@5.4.5) packages/pigment-css-nextjs-plugin: dependencies: @@ -510,7 +510,7 @@ importers: devDependencies: next: specifier: ^13.5.1 - version: 13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.3.0)(react@18.3.0) packages/pigment-css-react: dependencies: @@ -551,14 +551,14 @@ importers: specifier: ^6.0.0-alpha.1 version: 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) '@wyw-in-js/processor-utils': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: link:../../../wyw-in-js/packages/transform + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -636,11 +636,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -673,11 +673,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2248,6 +2248,27 @@ packages: '@types/react': 18.2.75 hoist-non-react-statics: 3.3.2 react: 18.2.0 + dev: false + + /@emotion/react@11.11.4(@types/react@18.2.75)(react@18.3.0): + resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} + peerDependencies: + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/babel-plugin': 11.11.0 + '@emotion/cache': 11.11.0 + '@emotion/serialize': 1.1.4 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.0) + '@emotion/utils': 1.2.1 + '@emotion/weak-memoize': 0.3.1 + '@types/react': 18.2.75 + hoist-non-react-statics: 3.3.2 + react: 18.3.0 /@emotion/serialize@1.1.4: resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==} @@ -2282,6 +2303,27 @@ packages: react: 18.2.0 dev: false + /@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0): + resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} + peerDependencies: + '@emotion/react': ^11.0.0-rc.0 + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/babel-plugin': 11.11.0 + '@emotion/is-prop-valid': 1.2.2 + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) + '@emotion/serialize': 1.1.4 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.0) + '@emotion/utils': 1.2.1 + '@types/react': 18.2.75 + react: 18.3.0 + dev: false + /@emotion/unitless@0.8.1: resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} @@ -2291,6 +2333,14 @@ packages: react: '>=16.8.0' dependencies: react: 18.2.0 + dev: false + + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.0): + resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.3.0 /@emotion/utils@1.2.1: resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} @@ -3186,7 +3236,7 @@ packages: '@babel/helper-plugin-utils': 7.24.0 dev: true - /@mnajdova/enzyme-adapter-react-18@0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0): + /@mnajdova/enzyme-adapter-react-18@0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0): resolution: {integrity: sha512-BOnjlVa7FHI1YUnYe+FdUtQu6szI1wLJ+C1lHyqmF3T9gu/J/WCYqqcD44dPkrU+8eYvvk/gQducsqna4HFiAg==} peerDependencies: enzyme: ^3.0.0 @@ -3194,17 +3244,17 @@ packages: react-dom: ^18.0.0 dependencies: enzyme: 3.11.0 - enzyme-adapter-utils: 1.14.2(react@18.2.0) + enzyme-adapter-utils: 1.14.2(react@18.3.0) enzyme-shallow-equal: 1.0.7 has: 1.0.4 object.assign: 4.1.5 object.values: 1.2.0 prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.0 + react-dom: 18.3.0(react@18.3.0) react-is: 18.2.0 - react-reconciler: 0.29.0(react@18.2.0) - react-test-renderer: 18.2.0(react@18.2.0) + react-reconciler: 0.29.0(react@18.3.0) + react-test-renderer: 18.2.0(react@18.3.0) semver: 5.7.2 dev: true @@ -3393,6 +3443,23 @@ packages: react: 18.2.0 dev: false + /@mui/private-theming@6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0): + resolution: {integrity: sha512-S+vlRxja0ncLT1KK+Qkqy6ZNpIsw5ZxoTd70KR8foLtPQXs0XGWQkq9IotbcZnYyKUUhM/5Cqo3w8Q/zNNVzBQ==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^18.2.74 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) + '@types/react': 18.2.75 + prop-types: 15.8.1 + react: 18.3.0 + dev: false + /@mui/styled-engine@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): resolution: {integrity: sha512-lJmMF1D3SD9unSh5gjXYU3ChiCrNGrpT36cPOmGv7wiH2qLMov5Wo23nK7UfuaQVA4c4/JAS43SLT2O2z6hx4Q==} engines: {node: '>=12.0.0'} @@ -3415,6 +3482,28 @@ packages: react: 18.2.0 dev: false + /@mui/styled-engine@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.0): + resolution: {integrity: sha512-lJmMF1D3SD9unSh5gjXYU3ChiCrNGrpT36cPOmGv7wiH2qLMov5Wo23nK7UfuaQVA4c4/JAS43SLT2O2z6hx4Q==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/cache': 11.11.0 + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.0 + dev: false + /@mui/system@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.2.0): resolution: {integrity: sha512-NqOFHCT/lvi4v696b0pEEz2Jc3MgjjGRsbFNN+IW5EuIInHr/JEznnPw0GpEU8tgU544MdfMTlFpDgR1LmvmLA==} engines: {node: '>=12.0.0'} @@ -3445,6 +3534,36 @@ packages: react: 18.2.0 dev: false + /@mui/system@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.3.0): + resolution: {integrity: sha512-NqOFHCT/lvi4v696b0pEEz2Jc3MgjjGRsbFNN+IW5EuIInHr/JEznnPw0GpEU8tgU544MdfMTlFpDgR1LmvmLA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^18.2.74 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) + '@mui/private-theming': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) + '@mui/styled-engine': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.0) + '@mui/types': 7.2.14(@types/react@18.2.75) + '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) + '@types/react': 18.2.75 + clsx: 2.1.0 + csstype: 3.1.3 + prop-types: 15.8.1 + react: 18.3.0 + dev: false + /@mui/types@7.2.14(@types/react@18.2.75): resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: @@ -3456,7 +3575,7 @@ packages: '@types/react': 18.2.75 dev: false - /@mui/utils@5.15.14(@types/react@18.2.75)(react@18.2.0): + /@mui/utils@5.15.14(@types/react@18.2.75)(react@18.3.0): resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==} engines: {node: '>=12.0.0'} peerDependencies: @@ -3470,7 +3589,7 @@ packages: '@types/prop-types': 15.7.12 '@types/react': 18.2.75 prop-types: 15.8.1 - react: 18.2.0 + react: 18.3.0 react-is: 18.2.0 dev: true @@ -3492,6 +3611,24 @@ packages: react-is: 18.2.0 dev: false + /@mui/utils@6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0): + resolution: {integrity: sha512-BvTVWvW6JDxMjDfEfTTEb6/CLgj87HyS3hYA4hbk0LdFsXeRnFSK6yDj8Dw3gxvXBymQ26kHDyFK3pEoAFlurw==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^18.2.74 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.4 + '@types/prop-types': 15.7.12 + '@types/react': 18.2.75 + prop-types: 15.8.1 + react: 18.3.0 + react-is: 18.2.0 + dev: false + /@netlify/functions@2.6.0: resolution: {integrity: sha512-vU20tij0fb4nRGACqb+5SQvKd50JYyTyEhQetCMHdakcJFzjLDivvRR16u1G2Oy4A7xNAtGJF1uz8reeOtTVcQ==} engines: {node: '>=14.0.0'} @@ -4664,7 +4801,7 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/react@14.3.0(react-dom@18.2.0)(react@18.2.0): + /@testing-library/react@14.3.0(react-dom@18.3.0)(react@18.3.0): resolution: {integrity: sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==} engines: {node: '>=14'} peerDependencies: @@ -4674,8 +4811,8 @@ packages: '@babel/runtime': 7.24.4 '@testing-library/dom': 9.3.4 '@types/react-dom': 18.2.24 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.0 + react-dom: 18.3.0(react@18.3.0) dev: true /@tootallnate/once@2.0.0: @@ -5049,13 +5186,13 @@ packages: - supports-color dev: true - /@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.4) + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 transitivePeerDependencies: - supports-color @@ -5083,6 +5220,27 @@ packages: - supports-color dev: true + /@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.4.5): + resolution: {integrity: sha512-usPMPHcwX3ZoPWnBnhhorc14NJw9J4HpSXQX4urF2TPKG0au0XhJoZyX62fmvdHONUkmyUe74Hzm1//XA+BoYg==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + eslint: ^8.56.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 7.6.0 + '@typescript-eslint/types': 7.6.0 + '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.4.5) + '@typescript-eslint/visitor-keys': 7.6.0 + debug: 4.3.4(supports-color@8.1.1) + eslint: 8.57.0 + typescript: 5.4.5 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/scope-manager@5.62.0: resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -5129,7 +5287,7 @@ packages: engines: {node: ^18.18.0 || >=20.0.0} dev: true - /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.4): + /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5): resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -5144,8 +5302,8 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.0 - tsutils: 3.21.0(typescript@5.4.4) - typescript: 5.4.4 + tsutils: 3.21.0(typescript@5.4.5) + typescript: 5.4.5 transitivePeerDependencies: - supports-color dev: true @@ -5172,7 +5330,29 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.4): + /@typescript-eslint/typescript-estree@7.6.0(typescript@5.4.5): + resolution: {integrity: sha512-+7Y/GP9VuYibecrCQWSKgl3GvUM5cILRttpWtnAu8GNL9j11e4tbuGZmZjJ8ejnKYyBRb2ddGQ3rEFCq3QjMJw==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 7.6.0 + '@typescript-eslint/visitor-keys': 7.6.0 + debug: 4.3.4(supports-color@8.1.1) + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.4 + semver: 7.6.0 + ts-api-utils: 1.3.0(typescript@5.4.5) + typescript: 5.4.5 + transitivePeerDependencies: + - supports-color + dev: true + + /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.5): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -5183,7 +5363,7 @@ packages: '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 - '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.4) + '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5) eslint: 8.57.0 eslint-scope: 5.1.1 semver: 7.6.0 @@ -5390,18 +5570,18 @@ packages: webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.91.0) dev: true - /@wyw-in-js/processor-utils@0.5.1: - resolution: {integrity: sha512-02kE/J+yABu7P+7djqcHyCkBiZV/SW7wgK65yikVVn/t5FNF9u6rZxIKWjrioeeODy5kKWFGzGyFFa3utPZoIA==} + /@wyw-in-js/processor-utils@0.5.3: + resolution: {integrity: sha512-DATsRHLqq8cWYkTD8iwEmvWzG2UvmsFN6Poru4NJ1RwjxtcEdnNKCKZBaBdlH5XyhL7jRTcURUMyee3lqGljhg==} engines: {node: '>=16.0.0'} dependencies: '@babel/generator': 7.24.4 - '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/shared': 0.5.3 transitivePeerDependencies: - supports-color dev: false - /@wyw-in-js/shared@0.5.1: - resolution: {integrity: sha512-EXMP8oxXwAR4SMGgGcii8H/vahExT/e89ctm71KDbTNjG+AlQwzC3unyhMmxB5Jj2a0qnS8QTl4UuyHZ3HZeoQ==} + /@wyw-in-js/shared@0.5.3: + resolution: {integrity: sha512-sgST/P2QPIz4UwOK5NtpvaLXUsACcHRkd9/wTlNSOM5si2hOoeIRvakyuqK33wShHK3bpEZZOXQ9YztSXK3bwg==} engines: {node: '>=16.0.0'} dependencies: debug: 4.3.4(supports-color@8.1.1) @@ -5411,8 +5591,8 @@ packages: - supports-color dev: false - /@wyw-in-js/transform@0.5.1(typescript@5.4.4): - resolution: {integrity: sha512-ob0iORbQbRJgRiDvU4bYDvPrKbJ+rFW2+V+pz9gpaf2VWrO+fTF0jIB3SnPB14XYCHs6bMWhfH6kzlDjaj8whg==} + /@wyw-in-js/transform@0.5.3(typescript@5.4.4): + resolution: {integrity: sha512-Bt1Ey8MN88FzYJekvZBYFT69157UmwURj2N7Dy8yauErcxtpuNe/1P0Jxd56tdFz0f6uooat5ntzvWgej/iBZg==} engines: {node: '>=16.0.0'} dependencies: '@babel/core': 7.24.4 @@ -5422,8 +5602,8 @@ packages: '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 - '@wyw-in-js/processor-utils': 0.5.1 - '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/processor-utils': 0.5.3 + '@wyw-in-js/shared': 0.5.3 babel-merge: 3.0.0(@babel/core@7.24.4) cosmiconfig: 8.3.6(typescript@5.4.4) happy-dom: 12.10.3 @@ -5563,7 +5743,7 @@ packages: indent-string: 5.0.0 dev: true - /airbnb-prop-types@2.16.0(react@18.2.0): + /airbnb-prop-types@2.16.0(react@18.3.0): resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==} peerDependencies: react: ^0.14 || ^15.0.0 || ^16.0.0-alpha @@ -5576,7 +5756,7 @@ packages: object.entries: 1.1.8 prop-types: 15.8.1 prop-types-exact: 1.2.0 - react: 18.2.0 + react: 18.3.0 react-is: 16.13.1 dev: true @@ -7693,18 +7873,18 @@ packages: hasBin: true dev: true - /enzyme-adapter-utils@1.14.2(react@18.2.0): + /enzyme-adapter-utils@1.14.2(react@18.3.0): resolution: {integrity: sha512-1ZC++RlsYRaiOWE5NRaF5OgsMt7F5rn/VuaJIgc7eW/fmgg8eS1/Ut7EugSPPi7VMdWMLcymRnMF+mJUJ4B8KA==} peerDependencies: react: 0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0 dependencies: - airbnb-prop-types: 2.16.0(react@18.2.0) + airbnb-prop-types: 2.16.0(react@18.3.0) function.prototype.name: 1.1.6 hasown: 2.0.2 object.assign: 4.1.5 object.fromentries: 2.0.8 prop-types: 15.8.1 - react: 18.2.0 + react: 18.3.0 semver: 6.3.1 dev: true @@ -11522,7 +11702,7 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true - /next@13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): + /next@13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.3.0)(react@18.3.0): resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==} engines: {node: '>=16.14.0'} hasBin: true @@ -11542,9 +11722,9 @@ packages: busboy: 1.6.0 caniuse-lite: 1.0.30001608 postcss: 8.4.31 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0) + react: 18.3.0 + react-dom: 18.3.0(react@18.3.0) + styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.3.0) watchpack: 2.4.0 optionalDependencies: '@next/swc-darwin-arm64': 13.5.6 @@ -13124,6 +13304,17 @@ packages: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 + dev: false + + /react-dom@18.3.0(react@18.3.0): + resolution: {integrity: sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==} + peerDependencies: + react: ^18.3.0 + dependencies: + loose-envify: 1.4.0 + react: 18.3.0 + scheduler: 0.23.1 + dev: true /react-error-boundary@4.0.13(react@18.2.0): resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==} @@ -13144,14 +13335,14 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-reconciler@0.29.0(react@18.2.0): + /react-reconciler@0.29.0(react@18.3.0): resolution: {integrity: sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==} engines: {node: '>=0.10.0'} peerDependencies: react: ^18.2.0 dependencies: loose-envify: 1.4.0 - react: 18.2.0 + react: 18.3.0 scheduler: 0.23.0 dev: true @@ -13183,24 +13374,24 @@ packages: react: 18.2.0 dev: false - /react-shallow-renderer@16.15.0(react@18.2.0): + /react-shallow-renderer@16.15.0(react@18.3.0): resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==} peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: object-assign: 4.1.1 - react: 18.2.0 + react: 18.3.0 react-is: 18.2.0 dev: true - /react-test-renderer@18.2.0(react@18.2.0): + /react-test-renderer@18.2.0(react@18.3.0): resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==} peerDependencies: react: ^18.2.0 dependencies: - react: 18.2.0 + react: 18.3.0 react-is: 18.2.0 - react-shallow-renderer: 16.15.0(react@18.2.0) + react-shallow-renderer: 16.15.0(react@18.3.0) scheduler: 0.23.0 dev: true @@ -13224,6 +13415,12 @@ packages: dependencies: loose-envify: 1.4.0 + /react@18.3.0: + resolution: {integrity: sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==} + engines: {node: '>=0.10.0'} + dependencies: + loose-envify: 1.4.0 + /read-cmd-shim@4.0.0: resolution: {integrity: sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -13702,6 +13899,12 @@ packages: dependencies: loose-envify: 1.4.0 + /scheduler@0.23.1: + resolution: {integrity: sha512-5GKS5JGfiah1O38Vfa9srZE4s3wdHbwjlCrvIookrg2FO9aIwKLOJXuJQFlEfNcVSOXuaL2hzDeY20uVXcUtrw==} + dependencies: + loose-envify: 1.4.0 + dev: true + /schema-utils@3.3.0: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} @@ -14380,6 +14583,26 @@ packages: babel-plugin-macros: 3.1.0 client-only: 0.0.1 react: 18.2.0 + dev: false + + /styled-jsx@5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.3.0): + resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} + engines: {node: '>= 12.0.0'} + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + dependencies: + '@babel/core': 7.24.4 + babel-plugin-macros: 3.1.0 + client-only: 0.0.1 + react: 18.3.0 + dev: true /stylelint-config-recommended@14.0.0(stylelint@16.3.1): resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==} @@ -14740,6 +14963,15 @@ packages: typescript: 5.4.4 dev: true + /ts-api-utils@1.3.0(typescript@5.4.5): + resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} + engines: {node: '>=16'} + peerDependencies: + typescript: '>=4.2.0' + dependencies: + typescript: 5.4.5 + dev: true + /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: true @@ -14820,14 +15052,14 @@ packages: - ts-node dev: true - /tsutils@3.21.0(typescript@5.4.4): + /tsutils@3.21.0(typescript@5.4.5): resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' dependencies: tslib: 1.14.1 - typescript: 5.4.4 + typescript: 5.4.5 dev: true /tsx@4.7.2: @@ -14972,6 +15204,12 @@ packages: engines: {node: '>=14.17'} hasBin: true + /typescript@5.4.5: + resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} + engines: {node: '>=14.17'} + hasBin: true + dev: true + /ua-parser-js@0.7.37: resolution: {integrity: sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==} dev: true @@ -15864,7 +16102,7 @@ packages: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: true - '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)': + '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.3.0)(react@18.3.0)': resolution: {registry: https://registry.npmjs.org/, tarball: https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils} id: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils' name: '@mui/internal-test-utils' @@ -15878,10 +16116,10 @@ packages: '@babel/register': 7.23.7(@babel/core@7.24.4) '@babel/runtime': 7.24.4 '@emotion/cache': 11.11.0 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.2.0) - '@mnajdova/enzyme-adapter-react-18': 0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0) + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) + '@mnajdova/enzyme-adapter-react-18': 0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0) '@testing-library/dom': 9.3.4 - '@testing-library/react': 14.3.0(react-dom@18.2.0)(react@18.2.0) + '@testing-library/react': 14.3.0(react-dom@18.3.0)(react@18.3.0) chai: 4.4.1 chai-dom: 1.12.0(chai@4.4.1) dom-accessibility-api: 0.6.3 @@ -15893,9 +16131,9 @@ packages: mocha: 10.4.0 playwright: 1.43.0 prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-test-renderer: 18.2.0(react@18.2.0) + react: 18.3.0 + react-dom: 18.3.0(react@18.3.0) + react-test-renderer: 18.2.0(react@18.3.0) sinon: 15.2.0 transitivePeerDependencies: - '@babel/core' @@ -15906,7 +16144,7 @@ packages: - utf-8-validate dev: true - file:packages/pigment-css-react(@types/react@18.2.75)(react@18.2.0)(typescript@5.4.4): + file:packages/pigment-css-react(@types/react@18.2.75)(react@18.3.0)(typescript@5.4.4): resolution: {directory: packages/pigment-css-react, type: directory} id: file:packages/pigment-css-react name: '@pigment-css/react' @@ -15920,19 +16158,19 @@ packages: '@babel/types': 7.24.0 '@emotion/css': 11.11.2 '@emotion/is-prop-valid': 1.2.2 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.2.0) + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) '@emotion/serialize': 1.1.4 - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.2.0) - '@mui/system': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.2.0) - '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) - '@wyw-in-js/processor-utils': 0.5.1 - '@wyw-in-js/shared': 0.5.1 - '@wyw-in-js/transform': 0.5.1(typescript@5.4.4) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) + '@mui/system': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.3.0) + '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) + '@wyw-in-js/processor-utils': 0.5.3 + '@wyw-in-js/shared': 0.5.3 + '@wyw-in-js/transform': 0.5.3(typescript@5.4.4) clsx: 2.1.0 cssesc: 3.0.0 csstype: 3.1.3 lodash: 4.17.21 - react: 18.2.0 + react: 18.3.0 stylis: 4.3.1 stylis-plugin-rtl: 2.1.1(stylis@4.3.1) transitivePeerDependencies: From 451b6dc6ef880d1b964e9434310b229b9c25a766 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:04:38 +0700 Subject: [PATCH 07/20] remove ForwardSx --- packages/pigment-css-react/.gitignore | 1 - packages/pigment-css-react/package.json | 10 ------ .../src/private-runtime/ForwardSx.js | 32 ------------------- .../src/private-runtime/index.ts | 1 - packages/pigment-css-react/tsup.config.ts | 5 --- 5 files changed, 49 deletions(-) delete mode 100644 packages/pigment-css-react/src/private-runtime/ForwardSx.js delete mode 100644 packages/pigment-css-react/src/private-runtime/index.ts diff --git a/packages/pigment-css-react/.gitignore b/packages/pigment-css-react/.gitignore index 3b446081..ce226001 100644 --- a/packages/pigment-css-react/.gitignore +++ b/packages/pigment-css-react/.gitignore @@ -1,4 +1,3 @@ /processors/ /utils/ LICENSE -/private-runtime/ diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json index 33e58d2b..10dae9a9 100644 --- a/packages/pigment-css-react/package.json +++ b/packages/pigment-css-react/package.json @@ -91,7 +91,6 @@ "files": [ "build", "exports", - "private-runtime", "processors", "theme", "utils", @@ -149,15 +148,6 @@ }, "require": "./build/RtlProvider.js", "default": "./build/RtlProvider.js" - }, - "./private-runtime": { - "types": "./private-runtime/index.d.ts", - "import": { - "types": "./private-runtime/index.d.mts", - "default": "./private-runtime/index.mjs" - }, - "require": "./private-runtime/index.js", - "default": "./private-runtime/index.js" } }, "nx": { diff --git a/packages/pigment-css-react/src/private-runtime/ForwardSx.js b/packages/pigment-css-react/src/private-runtime/ForwardSx.js deleted file mode 100644 index 2201ae8a..00000000 --- a/packages/pigment-css-react/src/private-runtime/ForwardSx.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import clsx from 'clsx'; - -function useSx(sx, className, style) { - const sxClass = typeof sx === 'string' ? sx : sx?.className; - const sxVars = sx && typeof sx !== 'string' ? sx.vars : undefined; - const varStyles = {}; - - if (sxVars) { - Object.entries(sxVars).forEach(([cssVariable, [value, isUnitLess]]) => { - if (typeof value === 'string' || isUnitLess) { - varStyles[`--${cssVariable}`] = value; - } else { - varStyles[`--${cssVariable}`] = `${value}px`; - } - }); - } - - return { - className: clsx(sxClass, className), - style: { - ...varStyles, - ...style, - }, - }; -} - -/* eslint-disable-next-line react/prop-types */ -export const ForwardSx = React.forwardRef(({ sx, sxComponent, className, style, ...rest }, ref) => { - const Component = sxComponent; - return ; -}); diff --git a/packages/pigment-css-react/src/private-runtime/index.ts b/packages/pigment-css-react/src/private-runtime/index.ts deleted file mode 100644 index b8e8215a..00000000 --- a/packages/pigment-css-react/src/private-runtime/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ForwardSx'; diff --git a/packages/pigment-css-react/tsup.config.ts b/packages/pigment-css-react/tsup.config.ts index fe170a40..5fd52716 100644 --- a/packages/pigment-css-react/tsup.config.ts +++ b/packages/pigment-css-react/tsup.config.ts @@ -31,9 +31,4 @@ export default defineConfig([ ], outDir: 'utils', }, - { - ...baseConfig, - entry: ['./src/private-runtime/index.ts'], - outDir: 'private-runtime', - }, ]); From cb60b51ade8645acf95dc96973c39317580aa2bb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:19:54 +0700 Subject: [PATCH 08/20] revert lock --- pnpm-lock.yaml | 402 ++++++++++--------------------------------------- 1 file changed, 82 insertions(+), 320 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1b2913fb..c5d156b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,7 +93,7 @@ importers: version: 7.23.7(@babel/core@7.24.4) '@mnajdova/enzyme-adapter-react-18': specifier: ^0.2.0 - version: 0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0) + version: 0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0) '@mui/internal-docs-utils': specifier: ^1.0.4 version: 1.0.4 @@ -105,13 +105,13 @@ importers: version: 1.0.3 '@mui/internal-test-utils': specifier: https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils - version: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.3.0)(react@18.3.0)' + version: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)' '@mui/monorepo': specifier: github:mui/material-ui#73c88b6c3f71287a4a1f0b1b5d7d37ab268dca49 version: github.com/mui/material-ui/73c88b6c3f71287a4a1f0b1b5d7d37ab268dca49 '@mui/utils': specifier: 5.15.14 - version: 5.15.14(@types/react@18.2.75)(react@18.3.0) + version: 5.15.14(@types/react@18.2.75)(react@18.2.0) '@next/eslint-plugin-next': specifier: ^14.1.4 version: 14.1.4 @@ -351,7 +351,7 @@ importers: dependencies: '@pigment-css/react': specifier: file:../../packages/pigment-css-react - version: file:packages/pigment-css-react(@types/react@18.2.75)(react@18.3.0)(typescript@5.4.4) + version: file:packages/pigment-css-react(@types/react@18.2.75)(react@18.2.0)(typescript@5.4.4) apps/pigment-css-next-app: dependencies: @@ -497,10 +497,10 @@ importers: version: 8.56.7 '@typescript-eslint/experimental-utils': specifier: ^5.62.0 - version: 5.62.0(eslint@8.57.0)(typescript@5.4.5) + version: 5.62.0(eslint@8.57.0)(typescript@5.4.4) '@typescript-eslint/parser': specifier: ^7.5.0 - version: 7.6.0(eslint@8.57.0)(typescript@5.4.5) + version: 7.6.0(eslint@8.57.0)(typescript@5.4.4) packages/pigment-css-nextjs-plugin: dependencies: @@ -510,7 +510,7 @@ importers: devDependencies: next: specifier: ^13.5.1 - version: 13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.3.0)(react@18.3.0) + version: 13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0) packages/pigment-css-react: dependencies: @@ -551,14 +551,14 @@ importers: specifier: ^6.0.0-alpha.1 version: 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) '@wyw-in-js/processor-utils': - specifier: ^0.5.3 - version: 0.5.3 + specifier: ^0.5.1 + version: 0.5.1 '@wyw-in-js/shared': - specifier: ^0.5.3 - version: 0.5.3 + specifier: ^0.5.1 + version: 0.5.1 '@wyw-in-js/transform': - specifier: ^0.5.3 - version: 0.5.3(typescript@5.4.4) + specifier: ^0.5.1 + version: 0.5.1(typescript@5.4.4) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -636,11 +636,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.3 - version: 0.5.3 + specifier: ^0.5.1 + version: 0.5.1 '@wyw-in-js/transform': - specifier: ^0.5.3 - version: 0.5.3(typescript@5.4.4) + specifier: ^0.5.1 + version: 0.5.1(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -673,11 +673,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.3 - version: 0.5.3 + specifier: ^0.5.1 + version: 0.5.1 '@wyw-in-js/transform': - specifier: ^0.5.3 - version: 0.5.3(typescript@5.4.4) + specifier: ^0.5.1 + version: 0.5.1(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -2248,27 +2248,6 @@ packages: '@types/react': 18.2.75 hoist-non-react-statics: 3.3.2 react: 18.2.0 - dev: false - - /@emotion/react@11.11.4(@types/react@18.2.75)(react@18.3.0): - resolution: {integrity: sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==} - peerDependencies: - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@emotion/babel-plugin': 11.11.0 - '@emotion/cache': 11.11.0 - '@emotion/serialize': 1.1.4 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.0) - '@emotion/utils': 1.2.1 - '@emotion/weak-memoize': 0.3.1 - '@types/react': 18.2.75 - hoist-non-react-statics: 3.3.2 - react: 18.3.0 /@emotion/serialize@1.1.4: resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==} @@ -2303,27 +2282,6 @@ packages: react: 18.2.0 dev: false - /@emotion/styled@11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0): - resolution: {integrity: sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==} - peerDependencies: - '@emotion/react': ^11.0.0-rc.0 - '@types/react': '*' - react: '>=16.8.0' - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@emotion/babel-plugin': 11.11.0 - '@emotion/is-prop-valid': 1.2.2 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) - '@emotion/serialize': 1.1.4 - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.0) - '@emotion/utils': 1.2.1 - '@types/react': 18.2.75 - react: 18.3.0 - dev: false - /@emotion/unitless@0.8.1: resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} @@ -2333,14 +2291,6 @@ packages: react: '>=16.8.0' dependencies: react: 18.2.0 - dev: false - - /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.0): - resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} - peerDependencies: - react: '>=16.8.0' - dependencies: - react: 18.3.0 /@emotion/utils@1.2.1: resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==} @@ -3236,7 +3186,7 @@ packages: '@babel/helper-plugin-utils': 7.24.0 dev: true - /@mnajdova/enzyme-adapter-react-18@0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0): + /@mnajdova/enzyme-adapter-react-18@0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-BOnjlVa7FHI1YUnYe+FdUtQu6szI1wLJ+C1lHyqmF3T9gu/J/WCYqqcD44dPkrU+8eYvvk/gQducsqna4HFiAg==} peerDependencies: enzyme: ^3.0.0 @@ -3244,17 +3194,17 @@ packages: react-dom: ^18.0.0 dependencies: enzyme: 3.11.0 - enzyme-adapter-utils: 1.14.2(react@18.3.0) + enzyme-adapter-utils: 1.14.2(react@18.2.0) enzyme-shallow-equal: 1.0.7 has: 1.0.4 object.assign: 4.1.5 object.values: 1.2.0 prop-types: 15.8.1 - react: 18.3.0 - react-dom: 18.3.0(react@18.3.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) react-is: 18.2.0 - react-reconciler: 0.29.0(react@18.3.0) - react-test-renderer: 18.2.0(react@18.3.0) + react-reconciler: 0.29.0(react@18.2.0) + react-test-renderer: 18.2.0(react@18.2.0) semver: 5.7.2 dev: true @@ -3443,23 +3393,6 @@ packages: react: 18.2.0 dev: false - /@mui/private-theming@6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0): - resolution: {integrity: sha512-S+vlRxja0ncLT1KK+Qkqy6ZNpIsw5ZxoTd70KR8foLtPQXs0XGWQkq9IotbcZnYyKUUhM/5Cqo3w8Q/zNNVzBQ==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.2.74 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) - '@types/react': 18.2.75 - prop-types: 15.8.1 - react: 18.3.0 - dev: false - /@mui/styled-engine@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.2.0): resolution: {integrity: sha512-lJmMF1D3SD9unSh5gjXYU3ChiCrNGrpT36cPOmGv7wiH2qLMov5Wo23nK7UfuaQVA4c4/JAS43SLT2O2z6hx4Q==} engines: {node: '>=12.0.0'} @@ -3482,28 +3415,6 @@ packages: react: 18.2.0 dev: false - /@mui/styled-engine@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.0): - resolution: {integrity: sha512-lJmMF1D3SD9unSh5gjXYU3ChiCrNGrpT36cPOmGv7wiH2qLMov5Wo23nK7UfuaQVA4c4/JAS43SLT2O2z6hx4Q==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.4.1 - '@emotion/styled': ^11.3.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@emotion/cache': 11.11.0 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.0 - dev: false - /@mui/system@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.2.0): resolution: {integrity: sha512-NqOFHCT/lvi4v696b0pEEz2Jc3MgjjGRsbFNN+IW5EuIInHr/JEznnPw0GpEU8tgU544MdfMTlFpDgR1LmvmLA==} engines: {node: '>=12.0.0'} @@ -3534,36 +3445,6 @@ packages: react: 18.2.0 dev: false - /@mui/system@6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.3.0): - resolution: {integrity: sha512-NqOFHCT/lvi4v696b0pEEz2Jc3MgjjGRsbFNN+IW5EuIInHr/JEznnPw0GpEU8tgU544MdfMTlFpDgR1LmvmLA==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^18.2.74 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) - '@mui/private-theming': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) - '@mui/styled-engine': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(react@18.3.0) - '@mui/types': 7.2.14(@types/react@18.2.75) - '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) - '@types/react': 18.2.75 - clsx: 2.1.0 - csstype: 3.1.3 - prop-types: 15.8.1 - react: 18.3.0 - dev: false - /@mui/types@7.2.14(@types/react@18.2.75): resolution: {integrity: sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==} peerDependencies: @@ -3575,7 +3456,7 @@ packages: '@types/react': 18.2.75 dev: false - /@mui/utils@5.15.14(@types/react@18.2.75)(react@18.3.0): + /@mui/utils@5.15.14(@types/react@18.2.75)(react@18.2.0): resolution: {integrity: sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==} engines: {node: '>=12.0.0'} peerDependencies: @@ -3589,7 +3470,7 @@ packages: '@types/prop-types': 15.7.12 '@types/react': 18.2.75 prop-types: 15.8.1 - react: 18.3.0 + react: 18.2.0 react-is: 18.2.0 dev: true @@ -3611,24 +3492,6 @@ packages: react-is: 18.2.0 dev: false - /@mui/utils@6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0): - resolution: {integrity: sha512-BvTVWvW6JDxMjDfEfTTEb6/CLgj87HyS3hYA4hbk0LdFsXeRnFSK6yDj8Dw3gxvXBymQ26kHDyFK3pEoAFlurw==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^18.2.74 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.24.4 - '@types/prop-types': 15.7.12 - '@types/react': 18.2.75 - prop-types: 15.8.1 - react: 18.3.0 - react-is: 18.2.0 - dev: false - /@netlify/functions@2.6.0: resolution: {integrity: sha512-vU20tij0fb4nRGACqb+5SQvKd50JYyTyEhQetCMHdakcJFzjLDivvRR16u1G2Oy4A7xNAtGJF1uz8reeOtTVcQ==} engines: {node: '>=14.0.0'} @@ -4801,7 +4664,7 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/react@14.3.0(react-dom@18.3.0)(react@18.3.0): + /@testing-library/react@14.3.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==} engines: {node: '>=14'} peerDependencies: @@ -4811,8 +4674,8 @@ packages: '@babel/runtime': 7.24.4 '@testing-library/dom': 9.3.4 '@types/react-dom': 18.2.24 - react: 18.3.0 - react-dom: 18.3.0(react@18.3.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) dev: true /@tootallnate/once@2.0.0: @@ -5186,13 +5049,13 @@ packages: - supports-color dev: true - /@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.4.5): + /@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.4.4): resolution: {integrity: sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.5) + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.4.4) eslint: 8.57.0 transitivePeerDependencies: - supports-color @@ -5220,27 +5083,6 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.4.5): - resolution: {integrity: sha512-usPMPHcwX3ZoPWnBnhhorc14NJw9J4HpSXQX4urF2TPKG0au0XhJoZyX62fmvdHONUkmyUe74Hzm1//XA+BoYg==} - engines: {node: ^18.18.0 || >=20.0.0} - peerDependencies: - eslint: ^8.56.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@typescript-eslint/scope-manager': 7.6.0 - '@typescript-eslint/types': 7.6.0 - '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.4.5) - '@typescript-eslint/visitor-keys': 7.6.0 - debug: 4.3.4(supports-color@8.1.1) - eslint: 8.57.0 - typescript: 5.4.5 - transitivePeerDependencies: - - supports-color - dev: true - /@typescript-eslint/scope-manager@5.62.0: resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -5287,7 +5129,7 @@ packages: engines: {node: ^18.18.0 || >=20.0.0} dev: true - /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.5): + /@typescript-eslint/typescript-estree@5.62.0(typescript@5.4.4): resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -5302,8 +5144,8 @@ packages: globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.0 - tsutils: 3.21.0(typescript@5.4.5) - typescript: 5.4.5 + tsutils: 3.21.0(typescript@5.4.4) + typescript: 5.4.4 transitivePeerDependencies: - supports-color dev: true @@ -5330,29 +5172,7 @@ packages: - supports-color dev: true - /@typescript-eslint/typescript-estree@7.6.0(typescript@5.4.5): - resolution: {integrity: sha512-+7Y/GP9VuYibecrCQWSKgl3GvUM5cILRttpWtnAu8GNL9j11e4tbuGZmZjJ8ejnKYyBRb2ddGQ3rEFCq3QjMJw==} - engines: {node: ^18.18.0 || >=20.0.0} - peerDependencies: - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@typescript-eslint/types': 7.6.0 - '@typescript-eslint/visitor-keys': 7.6.0 - debug: 4.3.4(supports-color@8.1.1) - globby: 11.1.0 - is-glob: 4.0.3 - minimatch: 9.0.4 - semver: 7.6.0 - ts-api-utils: 1.3.0(typescript@5.4.5) - typescript: 5.4.5 - transitivePeerDependencies: - - supports-color - dev: true - - /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.5): + /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.4.4): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -5363,7 +5183,7 @@ packages: '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 - '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.5) + '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.4.4) eslint: 8.57.0 eslint-scope: 5.1.1 semver: 7.6.0 @@ -5570,18 +5390,18 @@ packages: webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.91.0) dev: true - /@wyw-in-js/processor-utils@0.5.3: - resolution: {integrity: sha512-DATsRHLqq8cWYkTD8iwEmvWzG2UvmsFN6Poru4NJ1RwjxtcEdnNKCKZBaBdlH5XyhL7jRTcURUMyee3lqGljhg==} + /@wyw-in-js/processor-utils@0.5.1: + resolution: {integrity: sha512-02kE/J+yABu7P+7djqcHyCkBiZV/SW7wgK65yikVVn/t5FNF9u6rZxIKWjrioeeODy5kKWFGzGyFFa3utPZoIA==} engines: {node: '>=16.0.0'} dependencies: '@babel/generator': 7.24.4 - '@wyw-in-js/shared': 0.5.3 + '@wyw-in-js/shared': 0.5.1 transitivePeerDependencies: - supports-color dev: false - /@wyw-in-js/shared@0.5.3: - resolution: {integrity: sha512-sgST/P2QPIz4UwOK5NtpvaLXUsACcHRkd9/wTlNSOM5si2hOoeIRvakyuqK33wShHK3bpEZZOXQ9YztSXK3bwg==} + /@wyw-in-js/shared@0.5.1: + resolution: {integrity: sha512-EXMP8oxXwAR4SMGgGcii8H/vahExT/e89ctm71KDbTNjG+AlQwzC3unyhMmxB5Jj2a0qnS8QTl4UuyHZ3HZeoQ==} engines: {node: '>=16.0.0'} dependencies: debug: 4.3.4(supports-color@8.1.1) @@ -5591,8 +5411,8 @@ packages: - supports-color dev: false - /@wyw-in-js/transform@0.5.3(typescript@5.4.4): - resolution: {integrity: sha512-Bt1Ey8MN88FzYJekvZBYFT69157UmwURj2N7Dy8yauErcxtpuNe/1P0Jxd56tdFz0f6uooat5ntzvWgej/iBZg==} + /@wyw-in-js/transform@0.5.1(typescript@5.4.4): + resolution: {integrity: sha512-ob0iORbQbRJgRiDvU4bYDvPrKbJ+rFW2+V+pz9gpaf2VWrO+fTF0jIB3SnPB14XYCHs6bMWhfH6kzlDjaj8whg==} engines: {node: '>=16.0.0'} dependencies: '@babel/core': 7.24.4 @@ -5602,8 +5422,8 @@ packages: '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 - '@wyw-in-js/processor-utils': 0.5.3 - '@wyw-in-js/shared': 0.5.3 + '@wyw-in-js/processor-utils': 0.5.1 + '@wyw-in-js/shared': 0.5.1 babel-merge: 3.0.0(@babel/core@7.24.4) cosmiconfig: 8.3.6(typescript@5.4.4) happy-dom: 12.10.3 @@ -5743,7 +5563,7 @@ packages: indent-string: 5.0.0 dev: true - /airbnb-prop-types@2.16.0(react@18.3.0): + /airbnb-prop-types@2.16.0(react@18.2.0): resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==} peerDependencies: react: ^0.14 || ^15.0.0 || ^16.0.0-alpha @@ -5756,7 +5576,7 @@ packages: object.entries: 1.1.8 prop-types: 15.8.1 prop-types-exact: 1.2.0 - react: 18.3.0 + react: 18.2.0 react-is: 16.13.1 dev: true @@ -7873,18 +7693,18 @@ packages: hasBin: true dev: true - /enzyme-adapter-utils@1.14.2(react@18.3.0): + /enzyme-adapter-utils@1.14.2(react@18.2.0): resolution: {integrity: sha512-1ZC++RlsYRaiOWE5NRaF5OgsMt7F5rn/VuaJIgc7eW/fmgg8eS1/Ut7EugSPPi7VMdWMLcymRnMF+mJUJ4B8KA==} peerDependencies: react: 0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0 dependencies: - airbnb-prop-types: 2.16.0(react@18.3.0) + airbnb-prop-types: 2.16.0(react@18.2.0) function.prototype.name: 1.1.6 hasown: 2.0.2 object.assign: 4.1.5 object.fromentries: 2.0.8 prop-types: 15.8.1 - react: 18.3.0 + react: 18.2.0 semver: 6.3.1 dev: true @@ -11702,7 +11522,7 @@ packages: resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==} dev: true - /next@13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.3.0)(react@18.3.0): + /next@13.5.6(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==} engines: {node: '>=16.14.0'} hasBin: true @@ -11722,9 +11542,9 @@ packages: busboy: 1.6.0 caniuse-lite: 1.0.30001608 postcss: 8.4.31 - react: 18.3.0 - react-dom: 18.3.0(react@18.3.0) - styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.3.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.2.0) watchpack: 2.4.0 optionalDependencies: '@next/swc-darwin-arm64': 13.5.6 @@ -13304,17 +13124,6 @@ packages: loose-envify: 1.4.0 react: 18.2.0 scheduler: 0.23.0 - dev: false - - /react-dom@18.3.0(react@18.3.0): - resolution: {integrity: sha512-zaKdLBftQJnvb7FtDIpZtsAIb2MZU087RM8bRDZU8LVCCFYjPTsDZJNFUWPcVz3HFSN1n/caxi0ca4B/aaVQGQ==} - peerDependencies: - react: ^18.3.0 - dependencies: - loose-envify: 1.4.0 - react: 18.3.0 - scheduler: 0.23.1 - dev: true /react-error-boundary@4.0.13(react@18.2.0): resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==} @@ -13335,14 +13144,14 @@ packages: /react-is@18.2.0: resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} - /react-reconciler@0.29.0(react@18.3.0): + /react-reconciler@0.29.0(react@18.2.0): resolution: {integrity: sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==} engines: {node: '>=0.10.0'} peerDependencies: react: ^18.2.0 dependencies: loose-envify: 1.4.0 - react: 18.3.0 + react: 18.2.0 scheduler: 0.23.0 dev: true @@ -13374,24 +13183,24 @@ packages: react: 18.2.0 dev: false - /react-shallow-renderer@16.15.0(react@18.3.0): + /react-shallow-renderer@16.15.0(react@18.2.0): resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==} peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: object-assign: 4.1.1 - react: 18.3.0 + react: 18.2.0 react-is: 18.2.0 dev: true - /react-test-renderer@18.2.0(react@18.3.0): + /react-test-renderer@18.2.0(react@18.2.0): resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==} peerDependencies: react: ^18.2.0 dependencies: - react: 18.3.0 + react: 18.2.0 react-is: 18.2.0 - react-shallow-renderer: 16.15.0(react@18.3.0) + react-shallow-renderer: 16.15.0(react@18.2.0) scheduler: 0.23.0 dev: true @@ -13415,12 +13224,6 @@ packages: dependencies: loose-envify: 1.4.0 - /react@18.3.0: - resolution: {integrity: sha512-RPutkJftSAldDibyrjuku7q11d3oy6wKOyPe5K1HA/HwwrXcEqBdHsLypkC2FFYjP7bPUa6gbzSBhw4sY2JcDg==} - engines: {node: '>=0.10.0'} - dependencies: - loose-envify: 1.4.0 - /read-cmd-shim@4.0.0: resolution: {integrity: sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -13899,12 +13702,6 @@ packages: dependencies: loose-envify: 1.4.0 - /scheduler@0.23.1: - resolution: {integrity: sha512-5GKS5JGfiah1O38Vfa9srZE4s3wdHbwjlCrvIookrg2FO9aIwKLOJXuJQFlEfNcVSOXuaL2hzDeY20uVXcUtrw==} - dependencies: - loose-envify: 1.4.0 - dev: true - /schema-utils@3.3.0: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} @@ -14583,26 +14380,6 @@ packages: babel-plugin-macros: 3.1.0 client-only: 0.0.1 react: 18.2.0 - dev: false - - /styled-jsx@5.1.1(@babel/core@7.24.4)(babel-plugin-macros@3.1.0)(react@18.3.0): - resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} - engines: {node: '>= 12.0.0'} - peerDependencies: - '@babel/core': '*' - babel-plugin-macros: '*' - react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' - peerDependenciesMeta: - '@babel/core': - optional: true - babel-plugin-macros: - optional: true - dependencies: - '@babel/core': 7.24.4 - babel-plugin-macros: 3.1.0 - client-only: 0.0.1 - react: 18.3.0 - dev: true /stylelint-config-recommended@14.0.0(stylelint@16.3.1): resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==} @@ -14963,15 +14740,6 @@ packages: typescript: 5.4.4 dev: true - /ts-api-utils@1.3.0(typescript@5.4.5): - resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} - engines: {node: '>=16'} - peerDependencies: - typescript: '>=4.2.0' - dependencies: - typescript: 5.4.5 - dev: true - /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: true @@ -15052,14 +14820,14 @@ packages: - ts-node dev: true - /tsutils@3.21.0(typescript@5.4.5): + /tsutils@3.21.0(typescript@5.4.4): resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} peerDependencies: typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' dependencies: tslib: 1.14.1 - typescript: 5.4.5 + typescript: 5.4.4 dev: true /tsx@4.7.2: @@ -15204,12 +14972,6 @@ packages: engines: {node: '>=14.17'} hasBin: true - /typescript@5.4.5: - resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==} - engines: {node: '>=14.17'} - hasBin: true - dev: true - /ua-parser-js@0.7.37: resolution: {integrity: sha512-xV8kqRKM+jhMvcHWUKthV9fNebIzrNy//2O9ZwWcfiBFR5f25XVZPLlEajk/sf3Ra15V92isyQqnIEXRDaZWEA==} dev: true @@ -16102,7 +15864,7 @@ packages: resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==} dev: true - '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.3.0)(react@18.3.0)': + '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils(@babel/core@7.24.4)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)': resolution: {registry: https://registry.npmjs.org/, tarball: https://pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils} id: '@pkg.csb.dev/mui/material-ui/commit/fb183624/@mui/internal-test-utils' name: '@mui/internal-test-utils' @@ -16116,10 +15878,10 @@ packages: '@babel/register': 7.23.7(@babel/core@7.24.4) '@babel/runtime': 7.24.4 '@emotion/cache': 11.11.0 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) - '@mnajdova/enzyme-adapter-react-18': 0.2.0(enzyme@3.11.0)(react-dom@18.3.0)(react@18.3.0) + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.2.0) + '@mnajdova/enzyme-adapter-react-18': 0.2.0(enzyme@3.11.0)(react-dom@18.2.0)(react@18.2.0) '@testing-library/dom': 9.3.4 - '@testing-library/react': 14.3.0(react-dom@18.3.0)(react@18.3.0) + '@testing-library/react': 14.3.0(react-dom@18.2.0)(react@18.2.0) chai: 4.4.1 chai-dom: 1.12.0(chai@4.4.1) dom-accessibility-api: 0.6.3 @@ -16131,9 +15893,9 @@ packages: mocha: 10.4.0 playwright: 1.43.0 prop-types: 15.8.1 - react: 18.3.0 - react-dom: 18.3.0(react@18.3.0) - react-test-renderer: 18.2.0(react@18.3.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-test-renderer: 18.2.0(react@18.2.0) sinon: 15.2.0 transitivePeerDependencies: - '@babel/core' @@ -16144,7 +15906,7 @@ packages: - utf-8-validate dev: true - file:packages/pigment-css-react(@types/react@18.2.75)(react@18.3.0)(typescript@5.4.4): + file:packages/pigment-css-react(@types/react@18.2.75)(react@18.2.0)(typescript@5.4.4): resolution: {directory: packages/pigment-css-react, type: directory} id: file:packages/pigment-css-react name: '@pigment-css/react' @@ -16158,19 +15920,19 @@ packages: '@babel/types': 7.24.0 '@emotion/css': 11.11.2 '@emotion/is-prop-valid': 1.2.2 - '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.3.0) + '@emotion/react': 11.11.4(@types/react@18.2.75)(react@18.2.0) '@emotion/serialize': 1.1.4 - '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.3.0) - '@mui/system': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.3.0) - '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.3.0) - '@wyw-in-js/processor-utils': 0.5.3 - '@wyw-in-js/shared': 0.5.3 - '@wyw-in-js/transform': 0.5.3(typescript@5.4.4) + '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.2.0) + '@mui/system': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.2.0) + '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) + '@wyw-in-js/processor-utils': 0.5.1 + '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/transform': 0.5.1(typescript@5.4.4) clsx: 2.1.0 cssesc: 3.0.0 csstype: 3.1.3 lodash: 4.17.21 - react: 18.3.0 + react: 18.2.0 stylis: 4.3.1 stylis-plugin-rtl: 2.1.1(stylis@4.3.1) transitivePeerDependencies: From 4ccdd283c784ba77cad61420143caef15446c854 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:21:12 +0700 Subject: [PATCH 09/20] run test update --- .../styled/fixtures/styled-rtl.output.js | 4 +- .../styled/fixtures/styled-theme.output.js | 4 +- .../tests/styled/fixtures/styled.output.js | 4 +- .../tests/sx/fixtures/sxProps.output.js | 9 +++- .../tests/sx/fixtures/sxProps2.output.js | 3 +- pnpm-lock.yaml | 52 +++++++++---------- 6 files changed, 37 insertions(+), 39 deletions(-) diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js index 3e346b33..f53fc340 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-rtl.output.js @@ -1,6 +1,4 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import { styled as _styled2 } from '@pigment-css/react'; -import { styled as _styled } from '@pigment-css/react'; +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; const Component = /*#__PURE__*/ _styled('div')({ classes: ['c194j3ko'], diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js index dd4c76af..3e3eae8b 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled-theme.output.js @@ -1,6 +1,4 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import { styled as _styled2 } from '@pigment-css/react'; -import { styled as _styled } from '@pigment-css/react'; +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ diff --git a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js index a903ef11..5ae76401 100644 --- a/packages/pigment-css-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-css-react/tests/styled/fixtures/styled.output.js @@ -1,6 +1,4 @@ -import { styled as _styled3 } from '@pigment-css/react'; -import { styled as _styled2 } from '@pigment-css/react'; -import { styled as _styled } from '@pigment-css/react'; +import { styled as _styled, styled as _styled2, styled as _styled3 } from '@pigment-css/react'; import _theme from '@pigment-css/react/theme'; import PropTypes from 'prop-types'; const Component = /*#__PURE__*/ _styled('div')({ diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js index c15cd25a..a2addd73 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js @@ -1,5 +1,10 @@ -import { styled as _styled } from '@pigment-css/react'; -import { sx as _sx, sx as _sx2, sx as _sx3, sx as _sx4 } from '@pigment-css/react'; +import { + sx as _sx, + sx as _sx2, + sx as _sx3, + sx as _sx4, + styled as _styled, +} from '@pigment-css/react'; export const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js index 43c76369..19bf63cb 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps2.output.js @@ -1,5 +1,4 @@ -import { styled as _styled } from '@pigment-css/react'; -import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react'; +import { sx as _sx, sx as _sx2, sx as _sx3, styled as _styled } from '@pigment-css/react'; const SliderRail = /*#__PURE__*/ _styled('span', { name: 'MuiSlider', slot: 'Rail', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c5d156b9..55b0fd67 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -551,14 +551,14 @@ importers: specifier: ^6.0.0-alpha.1 version: 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) '@wyw-in-js/processor-utils': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) clsx: specifier: ^2.1.0 version: 2.1.0 @@ -636,11 +636,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -673,11 +673,11 @@ importers: specifier: workspace:^ version: link:../pigment-css-react '@wyw-in-js/shared': - specifier: ^0.5.1 - version: 0.5.1 + specifier: ^0.5.3 + version: 0.5.3 '@wyw-in-js/transform': - specifier: ^0.5.1 - version: 0.5.1(typescript@5.4.4) + specifier: ^0.5.3 + version: 0.5.3(typescript@5.4.4) babel-plugin-define-var: specifier: ^0.1.0 version: 0.1.0 @@ -5390,18 +5390,18 @@ packages: webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.1)(webpack@5.91.0) dev: true - /@wyw-in-js/processor-utils@0.5.1: - resolution: {integrity: sha512-02kE/J+yABu7P+7djqcHyCkBiZV/SW7wgK65yikVVn/t5FNF9u6rZxIKWjrioeeODy5kKWFGzGyFFa3utPZoIA==} + /@wyw-in-js/processor-utils@0.5.3: + resolution: {integrity: sha512-DATsRHLqq8cWYkTD8iwEmvWzG2UvmsFN6Poru4NJ1RwjxtcEdnNKCKZBaBdlH5XyhL7jRTcURUMyee3lqGljhg==} engines: {node: '>=16.0.0'} dependencies: '@babel/generator': 7.24.4 - '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/shared': 0.5.3 transitivePeerDependencies: - supports-color dev: false - /@wyw-in-js/shared@0.5.1: - resolution: {integrity: sha512-EXMP8oxXwAR4SMGgGcii8H/vahExT/e89ctm71KDbTNjG+AlQwzC3unyhMmxB5Jj2a0qnS8QTl4UuyHZ3HZeoQ==} + /@wyw-in-js/shared@0.5.3: + resolution: {integrity: sha512-sgST/P2QPIz4UwOK5NtpvaLXUsACcHRkd9/wTlNSOM5si2hOoeIRvakyuqK33wShHK3bpEZZOXQ9YztSXK3bwg==} engines: {node: '>=16.0.0'} dependencies: debug: 4.3.4(supports-color@8.1.1) @@ -5411,8 +5411,8 @@ packages: - supports-color dev: false - /@wyw-in-js/transform@0.5.1(typescript@5.4.4): - resolution: {integrity: sha512-ob0iORbQbRJgRiDvU4bYDvPrKbJ+rFW2+V+pz9gpaf2VWrO+fTF0jIB3SnPB14XYCHs6bMWhfH6kzlDjaj8whg==} + /@wyw-in-js/transform@0.5.3(typescript@5.4.4): + resolution: {integrity: sha512-Bt1Ey8MN88FzYJekvZBYFT69157UmwURj2N7Dy8yauErcxtpuNe/1P0Jxd56tdFz0f6uooat5ntzvWgej/iBZg==} engines: {node: '>=16.0.0'} dependencies: '@babel/core': 7.24.4 @@ -5422,8 +5422,8 @@ packages: '@babel/template': 7.24.0 '@babel/traverse': 7.24.1 '@babel/types': 7.24.0 - '@wyw-in-js/processor-utils': 0.5.1 - '@wyw-in-js/shared': 0.5.1 + '@wyw-in-js/processor-utils': 0.5.3 + '@wyw-in-js/shared': 0.5.3 babel-merge: 3.0.0(@babel/core@7.24.4) cosmiconfig: 8.3.6(typescript@5.4.4) happy-dom: 12.10.3 @@ -15925,9 +15925,9 @@ packages: '@emotion/styled': 11.11.5(@emotion/react@11.11.4)(@types/react@18.2.75)(react@18.2.0) '@mui/system': 6.0.0-alpha.1(@emotion/react@11.11.4)(@emotion/styled@11.11.5)(@types/react@18.2.75)(react@18.2.0) '@mui/utils': 6.0.0-alpha.1(@types/react@18.2.75)(react@18.2.0) - '@wyw-in-js/processor-utils': 0.5.1 - '@wyw-in-js/shared': 0.5.1 - '@wyw-in-js/transform': 0.5.1(typescript@5.4.4) + '@wyw-in-js/processor-utils': 0.5.3 + '@wyw-in-js/shared': 0.5.3 + '@wyw-in-js/transform': 0.5.3(typescript@5.4.4) clsx: 2.1.0 cssesc: 3.0.0 csstype: 3.1.3 From 44bd1b53917cf39e5ab11f1be97dce96b28e3b02 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:27:54 +0700 Subject: [PATCH 10/20] fix types --- .../pigment-css-react/src/processors/sx.ts | 216 +++++++++--------- 1 file changed, 105 insertions(+), 111 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 178a34d7..63434373 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -154,127 +154,121 @@ export class SxProcessor extends BaseProcessor { /** * For JSX calls, replace the sx prop with runtime sx */ - this.replacer( - // @ts-ignore - (tagPath: NodePath) => { - if (!tagPath.parentPath.isJSXExpressionContainer()) { - return tagPath.node; - } - const jsxElement = tagPath.findParent((p) => - p.isJSXOpeningElement(), - ) as NodePath; - if (!jsxElement) { - return tagPath.node; - } + this.replacer((_tagPath) => { + const tagPath = _tagPath as NodePath; + if (!tagPath.parentPath.isJSXExpressionContainer()) { + return tagPath.node; + } + const jsxElement = tagPath.findParent((p) => + p.isJSXOpeningElement(), + ) as NodePath; + if (!jsxElement) { + return tagPath.node; + } - const attributes: any[] = []; - let sxAttribute: undefined | NodePath; - (jsxElement.get('attributes') as NodePath[]).forEach((attr) => { - if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { - sxAttribute = attr; - } else if (attr.isJSXSpreadAttribute()) { - let containRuntimeSx = false; - attr.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - attributes.push(t.spreadElement(attr.node.argument)); - } - } else if ( - attr.isJSXAttribute() && - (attr.node.name.name === 'className' || attr.node.name.name === 'style') - ) { - const value = attr.get('value'); - if (value.isJSXExpressionContainer()) { - attributes.push( - t.objectProperty( - t.identifier(attr.node.name.name), - value.get('expression').node as any, - ), - ); - } else { - attributes.push( - t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), - ); - } + const attributes: any[] = []; + let sxAttribute: undefined | NodePath; + (jsxElement.get('attributes') as NodePath[]).forEach((attr) => { + if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { + sxAttribute = attr; + } else if (attr.isJSXSpreadAttribute()) { + let containRuntimeSx = false; + attr.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + attributes.push(t.spreadElement(attr.node.argument)); } - }); - if (sxAttribute) { - const expContainer = sxAttribute.get('value'); - if (expContainer.isJSXExpressionContainer()) { - jsxElement.node.attributes.push( - t.jsxSpreadAttribute(expContainer.node.expression as Expression), + } else if ( + attr.isJSXAttribute() && + (attr.node.name.name === 'className' || attr.node.name.name === 'style') + ) { + const value = attr.get('value'); + if (value.isJSXExpressionContainer()) { + attributes.push( + t.objectProperty( + t.identifier(attr.node.name.name), + value.get('expression').node as any, + ), + ); + } else { + attributes.push( + t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), ); } - sxAttribute.remove(); } - tagPath.node.arguments.push(t.objectExpression(attributes)); - return tagPath.node; - }, - false, - ); + }); + if (sxAttribute) { + const expContainer = sxAttribute.get('value'); + if (expContainer.isJSXExpressionContainer()) { + jsxElement.node.attributes.push( + t.jsxSpreadAttribute(expContainer.node.expression as Expression), + ); + } + sxAttribute.remove(); + } + tagPath.node.arguments.push(t.objectExpression(attributes)); + return tagPath.node; + }, false); // For non-JSX calls, replace the sx prop with runtime sx - this.replacer( - // @ts-ignore - (tagPath: NodePath) => { - if (!tagPath.parentPath.isObjectProperty()) { - return tagPath.node; - } - const objExpression = tagPath.findParent((p) => - p.isObjectExpression(), - ) as NodePath; - if (!objExpression) { - return tagPath.node; - } + this.replacer((_tagPath) => { + const tagPath = _tagPath as NodePath; + if (!tagPath.parentPath.isObjectProperty()) { + return tagPath.node; + } + const objExpression = tagPath.findParent((p) => + p.isObjectExpression(), + ) as NodePath; + if (!objExpression) { + return tagPath.node; + } - const properties: any[] = []; - let sxProperty: undefined | NodePath; - (objExpression.get('properties') as NodePath[]).forEach((prop) => { - if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - prop.node.key.name === 'sx' - ) { - sxProperty = prop; - } else if (prop.isSpreadElement()) { - let containRuntimeSx = false; - prop.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - properties.push(t.spreadElement(prop.node.argument)); - } - } else if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - (prop.node.key.name === 'className' || prop.node.key.name === 'style') - ) { - properties.push( - t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), - ); + const properties: any[] = []; + let sxProperty: undefined | NodePath; + (objExpression.get('properties') as NodePath[]).forEach((prop) => { + if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + prop.node.key.name === 'sx' + ) { + sxProperty = prop; + } else if (prop.isSpreadElement()) { + let containRuntimeSx = false; + prop.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + properties.push(t.spreadElement(prop.node.argument)); } - }); - if (sxProperty) { - const expression = sxProperty.get('value'); - objExpression.node.properties.push(t.spreadElement(expression.node as CallExpression)); - sxProperty.remove(); + } else if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + (prop.node.key.name === 'className' || prop.node.key.name === 'style') + ) { + properties.push( + t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), + ); } - tagPath.node.arguments.push(t.objectExpression(properties)); - return tagPath.node; - }, - false, - ); + }); + if (sxProperty) { + const expression = sxProperty.get('value'); + objExpression.node.properties.push(t.spreadElement(expression.node as CallExpression)); + sxProperty.remove(); + } + tagPath.node.arguments.push(t.objectExpression(properties)); + return tagPath.node; + }, false); } get asSelector(): string { From 6e11cd3bd74a67fc8f7e03d10381aed43aa6af5a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 11:58:59 +0700 Subject: [PATCH 11/20] fix expression container check --- .../pigment-css-react/src/processors/sx.ts | 6 --- .../tests/sx/fixtures/sxProps.output.js | 42 ++++++++++++------- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 63434373..6e949373 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -156,9 +156,6 @@ export class SxProcessor extends BaseProcessor { */ this.replacer((_tagPath) => { const tagPath = _tagPath as NodePath; - if (!tagPath.parentPath.isJSXExpressionContainer()) { - return tagPath.node; - } const jsxElement = tagPath.findParent((p) => p.isJSXOpeningElement(), ) as NodePath; @@ -219,9 +216,6 @@ export class SxProcessor extends BaseProcessor { // For non-JSX calls, replace the sx prop with runtime sx this.replacer((_tagPath) => { const tagPath = _tagPath as NodePath; - if (!tagPath.parentPath.isObjectProperty()) { - return tagPath.node; - } const objExpression = tagPath.findParent((p) => p.isObjectExpression(), ) as NodePath; diff --git a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js index a2addd73..3cf5b0e3 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sxProps.output.js @@ -31,36 +31,48 @@ function App2(props) { return ( ); } function App3(props) { return ( ); } From 6c09a1270b13494e614e1673b885bea01191555a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 12:57:15 +0700 Subject: [PATCH 12/20] add sx-jsx test case --- .../tests/sx/fixtures/sx-jsx.input.js | 55 +++++++++++++++++++ .../tests/sx/fixtures/sx-jsx.output.css | 11 ++++ .../tests/sx/fixtures/sx-jsx.output.js | 47 ++++++++++++++++ .../pigment-css-react/tests/sx/sx.test.ts | 14 +++++ 4 files changed, 127 insertions(+) create mode 100644 packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js create mode 100644 packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css create mode 100644 packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js new file mode 100644 index 00000000..f59dbe38 --- /dev/null +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js @@ -0,0 +1,55 @@ +function App() { + return /*#__PURE__*/ _jsx( + 'div', + { + sx: { + display: 'flex', + flexDirection: 'column', + }, + children: 'Test', + }, + void 0, + false, + { + fileName: '', + lineNumber: 11, + columnNumber: 11, + }, + this, + ); +} + +function App2() { + return /*#__PURE__*/ _jsx('div', { + sx: { + display: 'flex', + flexDirection: 'column', + }, + children: /*#__PURE__*/ _jsx('p', { + sx: { + color: 'red', + }, + children: 'Test', + }), + }); +} + +function App3(props) { + return /*#__PURE__*/ _jsx('div', { + sx: props.disabled + ? { + opacity: 0.4, + } + : { + color: 'red', + }, + children: 'test', + }); +} + +function App4(props) { + return /*#__PURE__*/ _jsx('div', { + sx: props.variant === 'secondary' && { color: props.isRed ? 'red' : 'blue' }, + children: 'test', + }); +} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css new file mode 100644 index 00000000..9d217210 --- /dev/null +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css @@ -0,0 +1,11 @@ +.s5molx8 { + display: flex; + flex-direction: column; +} +.s7fszdm { + display: flex; + flex-direction: column; +} +.s2bbd3t { + color: red; +} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js new file mode 100644 index 00000000..1b6aa1a4 --- /dev/null +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js @@ -0,0 +1,47 @@ +import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react'; +function App() { + return /*#__PURE__*/ _jsx( + 'div', + { + children: 'Test', + ..._sx('s5molx8', {}), + }, + void 0, + false, + { + fileName: '', + lineNumber: 11, + columnNumber: 11, + }, + this, + ); +} +function App2() { + return /*#__PURE__*/ _jsx('div', { + children: /*#__PURE__*/ _jsx('p', { + children: 'Test', + ..._sx3('s2bbd3t', {}), + }), + ..._sx2('s7fszdm', {}), + }); +} +function App3(props) { + return /*#__PURE__*/ _jsx('div', { + sx: props.disabled + ? { + opacity: 0.4, + } + : { + color: 'red', + }, + children: 'test', + }); +} +function App4(props) { + return /*#__PURE__*/ _jsx('div', { + sx: props.variant === 'secondary' && { + color: props.isRed ? 'red' : 'blue', + }, + children: 'test', + }); +} diff --git a/packages/pigment-css-react/tests/sx/sx.test.ts b/packages/pigment-css-react/tests/sx/sx.test.ts index 20b36d95..a61bf45a 100644 --- a/packages/pigment-css-react/tests/sx/sx.test.ts +++ b/packages/pigment-css-react/tests/sx/sx.test.ts @@ -46,6 +46,20 @@ describe('Pigment CSS - sx prop', () => { expect(output.css).to.equal(fixture.css); }); + it('jsx sx-prop with logical and conditional expressions', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/sx-jsx.input.js'), + { + themeArgs: { + theme, + }, + }, + ); + + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); + }); + it('sx prop with theme spread', async () => { const { output, fixture } = await runTransformation( path.join(__dirname, 'fixtures/sxProps2.input.js'), From 9a853d0e493555c947416c9161e064e2bb50672c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 13:23:32 +0700 Subject: [PATCH 13/20] test with apps --- apps/pigment-css-next-app/.eslintrc | 5 +-- apps/pigment-css-next-app/next.config.js | 2 +- apps/pigment-css-next-app/src/app/page.tsx | 41 ++++++++++++++++++++-- apps/pigment-css-next-app/tsconfig.json | 9 ----- 4 files changed, 42 insertions(+), 15 deletions(-) diff --git a/apps/pigment-css-next-app/.eslintrc b/apps/pigment-css-next-app/.eslintrc index 327cf67d..73d03ea1 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 70facd06..4dcc9476 100644 --- a/apps/pigment-css-next-app/next.config.js +++ b/apps/pigment-css-next-app/next.config.js @@ -101,7 +101,7 @@ theme.getColorSchemeSelector = (colorScheme) => { */ const pigmentOptions = { theme, - transformLibraries: ['local-ui-lib'], + transformLibraries: ['local-ui-lib', '@mui/material'], sourceMap: true, displayName: true, }; diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx index 0a9b3811..3bc21b10 100644 --- a/apps/pigment-css-next-app/src/app/page.tsx +++ b/apps/pigment-css-next-app/src/app/page.tsx @@ -1,7 +1,17 @@ import Image from 'next/image'; import { styled, css } from '@pigment-css/react'; +import Button from '@mui/material/Button'; import styles from './page.module.css'; +declare global { + namespace React { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes { + sx?: any; + } + } +} + const visuallyHidden = css({ border: 0, clip: 'rect(0 0 0 0)', @@ -93,8 +103,16 @@ export default function Home() { return (
I am invisible
- -

+ +

Get started by editing  src/app/page.tsx

@@ -117,7 +135,12 @@ export default function Home() { -
+

Instantly deploy your Next.js site to a shareable URL with Vercel.

+
); diff --git a/apps/pigment-css-next-app/tsconfig.json b/apps/pigment-css-next-app/tsconfig.json index 49a98502..2342c64b 100644 --- a/apps/pigment-css-next-app/tsconfig.json +++ b/apps/pigment-css-next-app/tsconfig.json @@ -25,15 +25,6 @@ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"], "references": [ - { - "path": "../../packages/mui-system/tsconfig.build.json" - }, - { - "path": "../../packages/mui-base/tsconfig.build.json" - }, - { - "path": "../../packages/mui-material/tsconfig.build.json" - }, { "path": "../../packages/pigment-css-react/tsconfig.json" } From ede976bacf65eb5cb6a351348fdcd993ad842284 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 13:31:11 +0700 Subject: [PATCH 14/20] remove ts-ignore --- packages/pigment-css-react/src/processors/sx.ts | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 6e949373..656dac79 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -143,13 +143,10 @@ export class SxProcessor extends BaseProcessor { * to * to */ - this.replacer( - // @ts-ignore - (tagPath: NodePath) => { - return t.callExpression(tagPath.get('callee').node, [result]); - }, - false, - ); + this.replacer((_tagPath) => { + const tagPath = _tagPath as NodePath; + return t.callExpression(tagPath.get('callee').node, [result]); + }, false); /** * For JSX calls, replace the sx prop with runtime sx From c1ec425b10abbed9a54f79b563c3843007f8f2d6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 15:41:20 +0700 Subject: [PATCH 15/20] combine replacement --- .../pigment-css-react/src/processors/sx.ts | 183 +++++++++--------- 1 file changed, 87 insertions(+), 96 deletions(-) diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 656dac79..8cac56b2 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -149,116 +149,107 @@ export class SxProcessor extends BaseProcessor { }, false); /** - * For JSX calls, replace the sx prop with runtime sx + * Replace the sx prop with runtime sx */ this.replacer((_tagPath) => { const tagPath = _tagPath as NodePath; - const jsxElement = tagPath.findParent((p) => - p.isJSXOpeningElement(), - ) as NodePath; - if (!jsxElement) { - return tagPath.node; - } + const target = tagPath.findParent( + (p) => p.isJSXOpeningElement() || p.isObjectExpression(), + ) as NodePath | NodePath | null; - const attributes: any[] = []; - let sxAttribute: undefined | NodePath; - (jsxElement.get('attributes') as NodePath[]).forEach((attr) => { - if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { - sxAttribute = attr; - } else if (attr.isJSXSpreadAttribute()) { - let containRuntimeSx = false; - attr.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - attributes.push(t.spreadElement(attr.node.argument)); + if (target?.isJSXOpeningElement()) { + const attributes: any[] = []; + let sxAttribute: undefined | NodePath; + (target.get('attributes') as NodePath[]).forEach((attr) => { + if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { + sxAttribute = attr; + } else if (attr.isJSXSpreadAttribute()) { + let containRuntimeSx = false; + attr.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + attributes.push(t.spreadElement(attr.node.argument)); + } + } else if ( + attr.isJSXAttribute() && + (attr.node.name.name === 'className' || attr.node.name.name === 'style') + ) { + const value = attr.get('value'); + if (value.isJSXExpressionContainer()) { + attributes.push( + t.objectProperty( + t.identifier(attr.node.name.name), + value.get('expression').node as any, + ), + ); + } else { + attributes.push( + t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), + ); + } } - } else if ( - attr.isJSXAttribute() && - (attr.node.name.name === 'className' || attr.node.name.name === 'style') - ) { - const value = attr.get('value'); - if (value.isJSXExpressionContainer()) { - attributes.push( - t.objectProperty( - t.identifier(attr.node.name.name), - value.get('expression').node as any, - ), - ); - } else { - attributes.push( - t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), + }); + if (sxAttribute) { + const expContainer = sxAttribute.get('value'); + if (expContainer.isJSXExpressionContainer()) { + target.node.attributes.push( + t.jsxSpreadAttribute(expContainer.node.expression as Expression), ); } + sxAttribute.remove(); } - }); - if (sxAttribute) { - const expContainer = sxAttribute.get('value'); - if (expContainer.isJSXExpressionContainer()) { - jsxElement.node.attributes.push( - t.jsxSpreadAttribute(expContainer.node.expression as Expression), - ); - } - sxAttribute.remove(); - } - tagPath.node.arguments.push(t.objectExpression(attributes)); - return tagPath.node; - }, false); - - // For non-JSX calls, replace the sx prop with runtime sx - this.replacer((_tagPath) => { - const tagPath = _tagPath as NodePath; - const objExpression = tagPath.findParent((p) => - p.isObjectExpression(), - ) as NodePath; - if (!objExpression) { + tagPath.node.arguments.push(t.objectExpression(attributes)); return tagPath.node; } - const properties: any[] = []; - let sxProperty: undefined | NodePath; - (objExpression.get('properties') as NodePath[]).forEach((prop) => { - if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - prop.node.key.name === 'sx' - ) { - sxProperty = prop; - } else if (prop.isSpreadElement()) { - let containRuntimeSx = false; - prop.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - properties.push(t.spreadElement(prop.node.argument)); + if (target?.isObjectExpression()) { + const properties: any[] = []; + let sxProperty: undefined | NodePath; + (target.get('properties') as NodePath[]).forEach((prop) => { + if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + prop.node.key.name === 'sx' + ) { + sxProperty = prop; + } else if (prop.isSpreadElement()) { + let containRuntimeSx = false; + prop.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + properties.push(t.spreadElement(prop.node.argument)); + } + } else if ( + prop.isObjectProperty() && + prop.node.key.type === 'Identifier' && + (prop.node.key.name === 'className' || prop.node.key.name === 'style') + ) { + properties.push( + t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), + ); } - } else if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - (prop.node.key.name === 'className' || prop.node.key.name === 'style') - ) { - properties.push( - t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), - ); + }); + if (sxProperty) { + const expression = sxProperty.get('value'); + target.node.properties.push(t.spreadElement(expression.node as CallExpression)); + sxProperty.remove(); } - }); - if (sxProperty) { - const expression = sxProperty.get('value'); - objExpression.node.properties.push(t.spreadElement(expression.node as CallExpression)); - sxProperty.remove(); + tagPath.node.arguments.push(t.objectExpression(properties)); + return tagPath.node; } - tagPath.node.arguments.push(t.objectExpression(properties)); - return tagPath.node; + throw tagPath.buildCodeFrameError('`sx` prop must be used with a JSX element or an object.'); }, false); } From 49fab1bd74bee5327e0e42caabe75198d92ad1fb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 17:36:38 +0700 Subject: [PATCH 16/20] move logic to spreadSxProp util --- .../pigment-css-react/src/processors/sx.ts | 107 +------------- .../src/utils/spreadSxProp.ts | 130 ++++++++++++++++++ 2 files changed, 134 insertions(+), 103 deletions(-) create mode 100644 packages/pigment-css-react/src/utils/spreadSxProp.ts diff --git a/packages/pigment-css-react/src/processors/sx.ts b/packages/pigment-css-react/src/processors/sx.ts index 8cac56b2..401d71ed 100644 --- a/packages/pigment-css-react/src/processors/sx.ts +++ b/packages/pigment-css-react/src/processors/sx.ts @@ -1,12 +1,5 @@ import type { NodePath } from '@babel/core'; -import type { - CallExpression, - Expression, - JSXAttribute, - JSXOpeningElement, - ObjectExpression, - ObjectProperty, -} from '@babel/types'; +import type { CallExpression, Expression } from '@babel/types'; import { validateParams, type Params, @@ -18,6 +11,7 @@ import type { IOptions } from './styled'; import { processCssObject } from '../utils/processCssObject'; import { cssFnValueToVariable } from '../utils/cssFnValueToVariable'; import BaseProcessor from './base-processor'; +import spreadSxProp from '../utils/spreadSxProp'; export class SxProcessor extends BaseProcessor { sxArguments: ExpressionValue[] = []; @@ -153,103 +147,10 @@ export class SxProcessor extends BaseProcessor { */ this.replacer((_tagPath) => { const tagPath = _tagPath as NodePath; - const target = tagPath.findParent( - (p) => p.isJSXOpeningElement() || p.isObjectExpression(), - ) as NodePath | NodePath | null; - if (target?.isJSXOpeningElement()) { - const attributes: any[] = []; - let sxAttribute: undefined | NodePath; - (target.get('attributes') as NodePath[]).forEach((attr) => { - if (attr.isJSXAttribute() && attr.node.name.name === 'sx') { - sxAttribute = attr; - } else if (attr.isJSXSpreadAttribute()) { - let containRuntimeSx = false; - attr.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - attributes.push(t.spreadElement(attr.node.argument)); - } - } else if ( - attr.isJSXAttribute() && - (attr.node.name.name === 'className' || attr.node.name.name === 'style') - ) { - const value = attr.get('value'); - if (value.isJSXExpressionContainer()) { - attributes.push( - t.objectProperty( - t.identifier(attr.node.name.name), - value.get('expression').node as any, - ), - ); - } else { - attributes.push( - t.objectProperty(t.identifier(attr.node.name.name), attr.node.value as any), - ); - } - } - }); - if (sxAttribute) { - const expContainer = sxAttribute.get('value'); - if (expContainer.isJSXExpressionContainer()) { - target.node.attributes.push( - t.jsxSpreadAttribute(expContainer.node.expression as Expression), - ); - } - sxAttribute.remove(); - } - tagPath.node.arguments.push(t.objectExpression(attributes)); - return tagPath.node; - } + spreadSxProp(tagPath); - if (target?.isObjectExpression()) { - const properties: any[] = []; - let sxProperty: undefined | NodePath; - (target.get('properties') as NodePath[]).forEach((prop) => { - if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - prop.node.key.name === 'sx' - ) { - sxProperty = prop; - } else if (prop.isSpreadElement()) { - let containRuntimeSx = false; - prop.traverse({ - CallExpression(path) { - const callee = path.get('callee'); - if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { - containRuntimeSx = true; - } - }, - }); - if (!containRuntimeSx) { - properties.push(t.spreadElement(prop.node.argument)); - } - } else if ( - prop.isObjectProperty() && - prop.node.key.type === 'Identifier' && - (prop.node.key.name === 'className' || prop.node.key.name === 'style') - ) { - properties.push( - t.objectProperty(t.identifier(prop.node.key.name), prop.node.value as any), - ); - } - }); - if (sxProperty) { - const expression = sxProperty.get('value'); - target.node.properties.push(t.spreadElement(expression.node as CallExpression)); - sxProperty.remove(); - } - tagPath.node.arguments.push(t.objectExpression(properties)); - return tagPath.node; - } - throw tagPath.buildCodeFrameError('`sx` prop must be used with a JSX element or an object.'); + return tagPath.node; }, false); } diff --git a/packages/pigment-css-react/src/utils/spreadSxProp.ts b/packages/pigment-css-react/src/utils/spreadSxProp.ts new file mode 100644 index 00000000..57caff21 --- /dev/null +++ b/packages/pigment-css-react/src/utils/spreadSxProp.ts @@ -0,0 +1,130 @@ +import { NodePath, types as astService } from '@babel/core'; +import { + CallExpression, + Expression, + JSXAttribute, + JSXOpeningElement, + JSXSpreadAttribute, + ObjectExpression, + ObjectMethod, + ObjectProperty, + SpreadElement, +} from '@babel/types'; + +function isSxProp(path: NodePath) { + if (path.isJSXAttribute() && path.node.name.name === 'sx') { + return true; + } + if ( + path.isObjectProperty() && + path.node.key.type === 'Identifier' && + path.node.key.name === 'sx' + ) { + return true; + } + return false; +} + +function isSpreadExpression(path: NodePath) { + return path.isSpreadElement() || path.isJSXSpreadAttribute(); +} + +function getProps(paths: NodePath[]) { + const props: Array = []; + let sxPath: undefined | NodePath | NodePath; + paths.forEach((attr) => { + if (isSxProp(attr)) { + sxPath = attr as NodePath | NodePath; + } else if (isSpreadExpression(attr)) { + let containRuntimeSx = false; + attr.traverse({ + CallExpression(path) { + const callee = path.get('callee'); + if (callee.isIdentifier() && callee.node.name.startsWith('_sx')) { + containRuntimeSx = true; + } + }, + }); + if (!containRuntimeSx) { + props.push( + astService.spreadElement( + (attr as NodePath).node.argument, + ), + ); + } + } else if ( + attr.isJSXAttribute() && + (attr.node.name.name === 'className' || attr.node.name.name === 'style') + ) { + const value = attr.get('value'); + if (value.isJSXExpressionContainer()) { + props.push( + astService.objectProperty( + astService.identifier(attr.node.name.name), + value.get('expression').node as any, + ), + ); + } else { + props.push( + astService.objectProperty( + astService.identifier(attr.node.name.name), + attr.node.value as any, + ), + ); + } + } else if ( + attr.isObjectProperty() && + attr.node.key.type === 'Identifier' && + (attr.node.key.name === 'className' || attr.node.key.name === 'style') + ) { + props.push( + astService.objectProperty( + astService.identifier(attr.node.key.name), + attr.node.value as any, + ), + ); + } + }); + return { props, sxPath }; +} + +/** + * Convert the sx prop that contains the sx() call to runtime {...sx()} spread. + * + * It will try to find the sibling `className` and `style` props and put them in the second argument of + * the runtime sx call. + */ +export default function spreadSxProp(tagPath: NodePath) { + const target = tagPath.findParent((p) => p.isJSXOpeningElement() || p.isObjectExpression()) as + | NodePath + | NodePath + | null; + if (!target) { + return; + } + let paths: + | NodePath[] + | NodePath[] = []; + if (target.isJSXOpeningElement()) { + paths = target.get('attributes'); + } + if (target.isObjectExpression()) { + paths = target.get('properties'); + } + const { props, sxPath } = getProps(paths); + if (sxPath) { + const expression = sxPath.get('value'); + if ('node' in expression) { + if (target.isObjectExpression()) { + target.node.properties.push(astService.spreadElement(expression.node as Expression)); + } + if (target.isJSXOpeningElement() && expression.isJSXExpressionContainer()) { + target.node.attributes.push( + astService.jsxSpreadAttribute(expression.node.expression as Expression), + ); + } + } + sxPath.remove(); + } + tagPath.node.arguments.push(astService.objectExpression(props)); +} From f680a677eba39ceabeea4777acd3671969eae670 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 18:29:20 +0700 Subject: [PATCH 17/20] fix jsx expression --- .../pigment-css-react/src/utils/sx-plugin.ts | 6 ++- .../tests/Box/fixtures/box-jsx.output.css | 13 ----- .../tests/Box/fixtures/box-jsx.output.js | 16 ++++-- .../tests/sx/fixtures/sx-jsx.input.js | 18 +++++-- .../tests/sx/fixtures/sx-jsx.output.css | 14 +++-- .../tests/sx/fixtures/sx-jsx.output.js | 53 ++++++++++++++----- 6 files changed, 81 insertions(+), 39 deletions(-) diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts index 227bfe6c..b8fd2ed0 100644 --- a/packages/pigment-css-react/src/utils/sx-plugin.ts +++ b/packages/pigment-css-react/src/utils/sx-plugin.ts @@ -91,7 +91,11 @@ export const babelPlugin = declare<{ return; } const valuePath = path.get('value'); - if (!valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression()) { + if ( + !valuePath.isArrowFunctionExpression() && + !valuePath.isConditionalExpression() && + !valuePath.isLogicalExpression() + ) { return; } const parentJsxCall = path.findParent((p) => p.isCallExpression()); diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css index 181b1abe..e69de29b 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css @@ -1,13 +0,0 @@ -.sd5jss7 { - margin: 0; - margin-block: 1rem; - padding: 0; - padding-left: 1.5rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.sk625fs { - display: flex; - flex-direction: column; -} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js index 47a9f092..9c1853c5 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js @@ -1,20 +1,30 @@ -import { sx as _sx, sx as _sx2 } from '@pigment-css/react'; import Box from '@pigment-css/react/Box'; import { jsx as _jsx } from 'react/jsx-runtime'; export function App(props) { return /*#__PURE__*/ _jsx(Box, { as: 'ul', 'aria-label': props.label, + sx: { + margin: 0, + marginBlock: '1rem', + padding: 0, + paddingLeft: '1.5rem', + display: 'flex', + flexDirection: 'column', + gap: '0.5rem', + }, children: 'Hello Box', - ..._sx('sd5jss7', {}), }); } function App2(props) { return /*#__PURE__*/ _jsxDEV( Box, { + sx: { + display: 'flex', + flexDirection: 'column', + }, children: 'Test', - ..._sx2('sk625fs', {}), }, void 0, false, diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js index f59dbe38..a98ae099 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js @@ -7,6 +7,8 @@ function App() { flexDirection: 'column', }, children: 'Test', + className: 'foo', + style: { textAlign: 'center' }, }, void 0, false, @@ -19,16 +21,21 @@ function App() { ); } -function App2() { +function App2(props) { return /*#__PURE__*/ _jsx('div', { sx: { display: 'flex', flexDirection: 'column', }, + className: props.className, + style: props.style, children: /*#__PURE__*/ _jsx('p', { - sx: { - color: 'red', - }, + sx: ({ theme }) => ({ + color: (theme.vars || theme).palette.primary.main, + ...theme.applyStyles('dark', { + color: 'white', + }), + }), children: 'Test', }), }); @@ -44,12 +51,15 @@ function App3(props) { color: 'red', }, children: 'test', + ...props, }); } function App4(props) { return /*#__PURE__*/ _jsx('div', { sx: props.variant === 'secondary' && { color: props.isRed ? 'red' : 'blue' }, + className: `foo ${props.className}`, + ...props, children: 'test', }); } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css index 9d217210..00b44e81 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css @@ -1,11 +1,17 @@ .s5molx8 { - display: flex; - flex-direction: column; + color: red; +} +@media (prefers-color-scheme: dark) { + .s5molx8 { + color: white; + } } .s7fszdm { - display: flex; - flex-direction: column; + opacity: 0.4; } .s2bbd3t { color: red; } +.s1ou6jyi { + color: var(--s1ou6jyi-0); +} diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js index 1b6aa1a4..4dd8fbf6 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js @@ -3,8 +3,15 @@ function App() { return /*#__PURE__*/ _jsx( 'div', { + sx: { + display: 'flex', + flexDirection: 'column', + }, children: 'Test', - ..._sx('s5molx8', {}), + className: 'foo', + style: { + textAlign: 'center', + }, }, void 0, false, @@ -16,32 +23,50 @@ function App() { this, ); } -function App2() { +function App2(props) { return /*#__PURE__*/ _jsx('div', { + sx: { + display: 'flex', + flexDirection: 'column', + }, + className: props.className, + style: props.style, children: /*#__PURE__*/ _jsx('p', { children: 'Test', - ..._sx3('s2bbd3t', {}), + ..._sx('s5molx8', {}), }), - ..._sx2('s7fszdm', {}), }); } function App3(props) { return /*#__PURE__*/ _jsx('div', { - sx: props.disabled - ? { - opacity: 0.4, - } - : { - color: 'red', - }, children: 'test', + ...props, + ...(props.disabled + ? _sx2('s7fszdm', { + ...props, + }) + : _sx2('s2bbd3t', { + ...props, + })), }); } function App4(props) { return /*#__PURE__*/ _jsx('div', { - sx: props.variant === 'secondary' && { - color: props.isRed ? 'red' : 'blue', - }, + className: `foo ${props.className}`, + ...props, children: 'test', + ...(props.variant === 'secondary' && + _sx3( + { + className: 's1ou6jyi', + vars: { + 's1ou6jyi-0': [props.isRed ? 'red' : 'blue', false], + }, + }, + { + className: `foo ${props.className}`, + ...props, + }, + )), }); } From 118c6be8b4e5841909b1a2fb878b229abaaf34f1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 19:31:58 +0700 Subject: [PATCH 18/20] explicitly add pigment-css/react to root package --- package.json | 1 + pnpm-lock.yaml | 3 +++ 2 files changed, 4 insertions(+) diff --git a/package.json b/package.json index 8aa7b937..8b4c76fc 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "dependencies": { "@googleapis/sheets": "^5.0.5", "@slack/bolt": "^3.17.1", + "@pigment-css/react": "workspace:^", "execa": "^8.0.1", "google-auth-library": "^9.7.0", "util": "^0.12.5" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55b0fd67..8acf406e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,9 @@ importers: '@googleapis/sheets': specifier: ^5.0.5 version: 5.0.5 + '@pigment-css/react': + specifier: workspace:^ + version: link:packages/pigment-css-react '@slack/bolt': specifier: ^3.17.1 version: 3.17.1 From 344c70a09da018c3eb3c20ef46d898646e6098ab Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 26 Apr 2024 19:34:50 +0700 Subject: [PATCH 19/20] fix jsx() objectExpression --- .../pigment-css-react/src/utils/sx-plugin.ts | 1 + .../tests/Box/fixtures/box-jsx.output.css | 13 ++++++++ .../tests/Box/fixtures/box-jsx.output.js | 16 ++-------- .../tests/sx/fixtures/sx-jsx.output.css | 18 ++++++++--- .../tests/sx/fixtures/sx-jsx.output.js | 32 ++++++++++--------- 5 files changed, 47 insertions(+), 33 deletions(-) diff --git a/packages/pigment-css-react/src/utils/sx-plugin.ts b/packages/pigment-css-react/src/utils/sx-plugin.ts index b8fd2ed0..145b12e5 100644 --- a/packages/pigment-css-react/src/utils/sx-plugin.ts +++ b/packages/pigment-css-react/src/utils/sx-plugin.ts @@ -92,6 +92,7 @@ export const babelPlugin = declare<{ } const valuePath = path.get('value'); if ( + !valuePath.isObjectExpression() && !valuePath.isArrowFunctionExpression() && !valuePath.isConditionalExpression() && !valuePath.isLogicalExpression() diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css index e69de29b..181b1abe 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.css @@ -0,0 +1,13 @@ +.sd5jss7 { + margin: 0; + margin-block: 1rem; + padding: 0; + padding-left: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.sk625fs { + display: flex; + flex-direction: column; +} diff --git a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js index 9c1853c5..47a9f092 100644 --- a/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js +++ b/packages/pigment-css-react/tests/Box/fixtures/box-jsx.output.js @@ -1,30 +1,20 @@ +import { sx as _sx, sx as _sx2 } from '@pigment-css/react'; import Box from '@pigment-css/react/Box'; import { jsx as _jsx } from 'react/jsx-runtime'; export function App(props) { return /*#__PURE__*/ _jsx(Box, { as: 'ul', 'aria-label': props.label, - sx: { - margin: 0, - marginBlock: '1rem', - padding: 0, - paddingLeft: '1.5rem', - display: 'flex', - flexDirection: 'column', - gap: '0.5rem', - }, children: 'Hello Box', + ..._sx('sd5jss7', {}), }); } function App2(props) { return /*#__PURE__*/ _jsxDEV( Box, { - sx: { - display: 'flex', - flexDirection: 'column', - }, children: 'Test', + ..._sx2('sk625fs', {}), }, void 0, false, diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css index 00b44e81..35b51edb 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css @@ -1,17 +1,25 @@ .s5molx8 { + display: flex; + flex-direction: column; +} +.s7fszdm { + display: flex; + flex-direction: column; +} +.s2bbd3t { color: red; } @media (prefers-color-scheme: dark) { - .s5molx8 { + .s2bbd3t { color: white; } } -.s7fszdm { +.s1ou6jyi { opacity: 0.4; } -.s2bbd3t { +.s1lqy6hu { color: red; } -.s1ou6jyi { - color: var(--s1ou6jyi-0); +.swssabr { + color: var(--swssabr-0); } diff --git a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js index 4dd8fbf6..3277161a 100644 --- a/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js +++ b/packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js @@ -1,17 +1,19 @@ -import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react'; +import { sx as _sx, sx as _sx2, sx as _sx3, sx as _sx4, sx as _sx5 } from '@pigment-css/react'; function App() { return /*#__PURE__*/ _jsx( 'div', { - sx: { - display: 'flex', - flexDirection: 'column', - }, children: 'Test', className: 'foo', style: { textAlign: 'center', }, + ..._sx('s5molx8', { + className: 'foo', + style: { + textAlign: 'center', + }, + }), }, void 0, false, @@ -25,15 +27,15 @@ function App() { } function App2(props) { return /*#__PURE__*/ _jsx('div', { - sx: { - display: 'flex', - flexDirection: 'column', - }, className: props.className, style: props.style, children: /*#__PURE__*/ _jsx('p', { children: 'Test', - ..._sx('s5molx8', {}), + ..._sx3('s2bbd3t', {}), + }), + ..._sx2('s7fszdm', { + className: props.className, + style: props.style, }), }); } @@ -42,10 +44,10 @@ function App3(props) { children: 'test', ...props, ...(props.disabled - ? _sx2('s7fszdm', { + ? _sx4('s1ou6jyi', { ...props, }) - : _sx2('s2bbd3t', { + : _sx4('s1lqy6hu', { ...props, })), }); @@ -56,11 +58,11 @@ function App4(props) { ...props, children: 'test', ...(props.variant === 'secondary' && - _sx3( + _sx5( { - className: 's1ou6jyi', + className: 'swssabr', vars: { - 's1ou6jyi-0': [props.isRed ? 'red' : 'blue', false], + 'swssabr-0': [props.isRed ? 'red' : 'blue', false], }, }, { From b3ea954f6ec5d17eba9b09d991840999de923165 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 29 Apr 2024 09:31:17 +0700 Subject: [PATCH 20/20] use Chip --- apps/pigment-css-next-app/src/app/page.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx index 3bc21b10..467529a6 100644 --- a/apps/pigment-css-next-app/src/app/page.tsx +++ b/apps/pigment-css-next-app/src/app/page.tsx @@ -1,6 +1,6 @@ import Image from 'next/image'; import { styled, css } from '@pigment-css/react'; -import Button from '@mui/material/Button'; +import Chip from '@mui/material/Chip'; import styles from './page.module.css'; declare global { @@ -199,7 +199,7 @@ export default function Home() {

Instantly deploy your Next.js site to a shareable URL with Vercel.

- + label="Hello" + /> );