From 1464460f13933be37e955de5951c2819fa89d6bc Mon Sep 17 00:00:00 2001 From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com> Date: Fri, 8 Dec 2023 16:38:37 +0100 Subject: [PATCH] fix(extractor): JSX nodes as JSX attributes (#1792) --- .changeset/brave-cars-smell.md | 25 ++++++ packages/extractor/__tests__/extract.test.ts | 80 ++++++++++++++++++- packages/extractor/src/extract.ts | 32 ++++---- .../studio/styled-system/jsx/aspect-ratio.mjs | 7 +- packages/studio/styled-system/jsx/bleed.mjs | 7 +- packages/studio/styled-system/jsx/box.mjs | 10 ++- packages/studio/styled-system/jsx/center.mjs | 7 +- packages/studio/styled-system/jsx/circle.mjs | 7 +- .../studio/styled-system/jsx/container.mjs | 10 ++- packages/studio/styled-system/jsx/divider.mjs | 7 +- packages/studio/styled-system/jsx/flex.mjs | 7 +- packages/studio/styled-system/jsx/float.mjs | 7 +- .../studio/styled-system/jsx/grid-item.mjs | 7 +- packages/studio/styled-system/jsx/grid.mjs | 7 +- packages/studio/styled-system/jsx/hstack.mjs | 7 +- .../studio/styled-system/jsx/link-box.mjs | 10 ++- .../studio/styled-system/jsx/link-overlay.mjs | 10 ++- packages/studio/styled-system/jsx/spacer.mjs | 7 +- packages/studio/styled-system/jsx/square.mjs | 7 +- packages/studio/styled-system/jsx/stack.mjs | 7 +- .../studio/styled-system/jsx/styled-link.mjs | 10 ++- .../styled-system/jsx/visually-hidden.mjs | 10 ++- packages/studio/styled-system/jsx/vstack.mjs | 7 +- packages/studio/styled-system/jsx/wrap.mjs | 7 +- .../studio/styled-system/types/recipe.d.ts | 5 -- 25 files changed, 237 insertions(+), 70 deletions(-) create mode 100644 .changeset/brave-cars-smell.md diff --git a/.changeset/brave-cars-smell.md b/.changeset/brave-cars-smell.md new file mode 100644 index 000000000..f93cf6672 --- /dev/null +++ b/.changeset/brave-cars-smell.md @@ -0,0 +1,25 @@ +--- +'@pandacss/extractor': patch +--- + +Fix static extraction issue when using JSX attributes (props) that are other JSX nodes + +While parsing over the AST Nodes, due to an optimization where we skipped retrieving the current JSX element and instead +kept track of the latest one, the logic was flawed and did not extract other properties after encountering a JSX +attribute that was another JSX node. + +```tsx +const Component = () => { + return ( + <> + {/* ❌ this wasn't extracting ml="2" */} + } ml="2" /> + + {/* ✅ this was fine */} + } /> + + ) +} +``` + +Now both will be fine again. diff --git a/packages/extractor/__tests__/extract.test.ts b/packages/extractor/__tests__/extract.test.ts index 8c7cb4944..42ceb3dc3 100644 --- a/packages/extractor/__tests__/extract.test.ts +++ b/packages/extractor/__tests__/extract.test.ts @@ -22,7 +22,7 @@ const config: Record = { const componentsMatcher: ComponentMatchers = { matchTag: ({ tagName }) => Boolean(config[tagName]), - matchProp: ({ tagName, propName }) => config[tagName].includes(propName), + matchProp: ({ tagName, propName }) => config[tagName]?.includes(propName), } type TestExtractOptions = Omit & { tagNameList?: string[]; functionNameList?: string[] } @@ -5795,6 +5795,84 @@ it('extracts arrays without removing nullish values', () => { `) }) +it('extracts props after a JSX attribute containing a JSX element', () => { + expect( + extractFromCode( + ` + export const App = () => { + return ( + <> + } ml="2" /> + } /> + + ); + }; + `, + { tagNameList: ['Flex', 'Stack'] }, + ), + ).toMatchInlineSnapshot(` + { + "Flex": [ + { + "conditions": [], + "raw": { + "ml": "2", + }, + "spreadConditions": [], + }, + ], + "Stack": [ + { + "conditions": [], + "raw": { + "ml": "4", + }, + "spreadConditions": [], + }, + ], + } + `) +}) + +it('extracts props after a JSX spread containing a JSX element', () => { + expect( + extractFromCode( + ` + export const App = () => { + return ( + <> + }} ml="2" /> + }} /> + + ); + }; + `, + { tagNameList: ['Flex', 'Stack'] }, + ), + ).toMatchInlineSnapshot(` + { + "Flex": [ + { + "conditions": [], + "raw": { + "ml": "2", + }, + "spreadConditions": [], + }, + ], + "Stack": [ + { + "conditions": [], + "raw": { + "ml": "4", + }, + "spreadConditions": [], + }, + ], + } + `) +}) + it('handles TS enum', () => { const code = `import { sva } from 'styled-system/css'; diff --git a/packages/extractor/src/extract.ts b/packages/extractor/src/extract.ts index 7986ce661..fcb2d5d3b 100644 --- a/packages/extractor/src/extract.ts +++ b/packages/extractor/src/extract.ts @@ -28,6 +28,7 @@ interface Component { type ComponentMap = Map const isImportOrExport = (node: Node) => Node.isImportDeclaration(node) || Node.isExportDeclaration(node) +const isJsxElement = (node: Node) => Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node) export const extract = ({ ast, ...ctx }: ExtractOptions) => { const { components, functions, taggedTemplates } = ctx @@ -43,14 +44,6 @@ export const extract = ({ ast, ...ctx }: ExtractOptions) => { */ const componentByNode: ComponentMap = new Map() - // keep track of the current component node - // so we don't have to traverse the tree upwards again - let componentNode: JsxElement | undefined - let componentName: string - let isFactory: boolean - let boxByProp: ExtractedComponentResult['nodesByProp'] - let component: Component - ast.forEachDescendant((node, traversal) => { // quick win if (isImportOrExport(node)) { @@ -60,12 +53,11 @@ export const extract = ({ ast, ...ctx }: ExtractOptions) => { if (components) { if (Node.isJsxOpeningElement(node) || Node.isJsxSelfClosingElement(node)) { - componentNode = node - componentName = getComponentName(componentNode) - isFactory = componentName.includes('.') + const componentNode = node + const componentName = getComponentName(componentNode) + const isFactory = componentName.includes('.') if (!components.matchTag({ tagNode: componentNode, tagName: componentName, isFactory })) { - componentNode = undefined return } @@ -73,21 +65,23 @@ export const extract = ({ ast, ...ctx }: ExtractOptions) => { byName.set(componentName, { kind: 'component', nodesByProp: new Map(), queryList: [] }) } - boxByProp = byName.get(componentName)!.nodesByProp - if (!componentByNode.has(componentNode)) { componentByNode.set(componentNode, { name: componentName, props: new Map(), conditionals: [] }) } - - component = componentByNode.get(componentNode)! } if (Node.isJsxSpreadAttribute(node)) { + const componentNode = node.getFirstAncestor(isJsxElement) as JsxElement + const component = componentByNode.get(componentNode) + // spread // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ if (!componentNode || !component) return + const componentName = getComponentName(componentNode) + const boxByProp = byName.get(componentName)!.nodesByProp + const matchProp = ({ propName, propNode }: MatchPropArgs) => components.matchProp({ tagNode: componentNode!, tagName: componentName, propName, propNode }) @@ -136,8 +130,14 @@ export const extract = ({ ast, ...ctx }: ExtractOptions) => { // // ^^^^^ ^^^^^^^^^^^^^^^ + const componentNode = node.getFirstAncestor(isJsxElement) as JsxElement + const component = componentByNode.get(componentNode) + if (!componentNode || !component) return + const componentName = getComponentName(componentNode) + const boxByProp = byName.get(componentName)!.nodesByProp + const propName = node.getNameNode().getText() if (!components.matchProp({ tagNode: componentNode, tagName: componentName, propName, propNode: node })) { return diff --git a/packages/studio/styled-system/jsx/aspect-ratio.mjs b/packages/studio/styled-system/jsx/aspect-ratio.mjs index 60ca8b6e3..383970c3e 100644 --- a/packages/studio/styled-system/jsx/aspect-ratio.mjs +++ b/packages/studio/styled-system/jsx/aspect-ratio.mjs @@ -5,5 +5,8 @@ import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'; export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) { const { ratio, ...restProps } = props const styleProps = getAspectRatioStyle({ratio}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/bleed.mjs b/packages/studio/styled-system/jsx/bleed.mjs index e4349ac4d..e98bfd1e2 100644 --- a/packages/studio/styled-system/jsx/bleed.mjs +++ b/packages/studio/styled-system/jsx/bleed.mjs @@ -5,5 +5,8 @@ import { getBleedStyle } from '../patterns/bleed.mjs'; export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { const { inline, block, ...restProps } = props const styleProps = getBleedStyle({inline, block}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/box.mjs b/packages/studio/styled-system/jsx/box.mjs index 3bebb2d69..8d1734d1a 100644 --- a/packages/studio/styled-system/jsx/box.mjs +++ b/packages/studio/styled-system/jsx/box.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getBoxStyle } from '../patterns/box.mjs'; export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { - const styleProps = getBoxStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getBoxStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/center.mjs b/packages/studio/styled-system/jsx/center.mjs index b266d4929..b08eeace5 100644 --- a/packages/studio/styled-system/jsx/center.mjs +++ b/packages/studio/styled-system/jsx/center.mjs @@ -5,5 +5,8 @@ import { getCenterStyle } from '../patterns/center.mjs'; export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { const { inline, ...restProps } = props const styleProps = getCenterStyle({inline}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/circle.mjs b/packages/studio/styled-system/jsx/circle.mjs index 6d3138c5c..677c2169d 100644 --- a/packages/studio/styled-system/jsx/circle.mjs +++ b/packages/studio/styled-system/jsx/circle.mjs @@ -5,5 +5,8 @@ import { getCircleStyle } from '../patterns/circle.mjs'; export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { const { size, ...restProps } = props const styleProps = getCircleStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/container.mjs b/packages/studio/styled-system/jsx/container.mjs index 91dc9648a..a9821c974 100644 --- a/packages/studio/styled-system/jsx/container.mjs +++ b/packages/studio/styled-system/jsx/container.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getContainerStyle } from '../patterns/container.mjs'; export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) { - const styleProps = getContainerStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getContainerStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/divider.mjs b/packages/studio/styled-system/jsx/divider.mjs index 43532d009..d0c997b38 100644 --- a/packages/studio/styled-system/jsx/divider.mjs +++ b/packages/studio/styled-system/jsx/divider.mjs @@ -5,5 +5,8 @@ import { getDividerStyle } from '../patterns/divider.mjs'; export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { const { orientation, thickness, color, ...restProps } = props const styleProps = getDividerStyle({orientation, thickness, color}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/flex.mjs b/packages/studio/styled-system/jsx/flex.mjs index a0c4580ff..67d7dab90 100644 --- a/packages/studio/styled-system/jsx/flex.mjs +++ b/packages/studio/styled-system/jsx/flex.mjs @@ -5,5 +5,8 @@ import { getFlexStyle } from '../patterns/flex.mjs'; export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) { const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/float.mjs b/packages/studio/styled-system/jsx/float.mjs index b9e429c42..2e96024ac 100644 --- a/packages/studio/styled-system/jsx/float.mjs +++ b/packages/studio/styled-system/jsx/float.mjs @@ -5,5 +5,8 @@ import { getFloatStyle } from '../patterns/float.mjs'; export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { const { offsetX, offsetY, offset, placement, ...restProps } = props const styleProps = getFloatStyle({offsetX, offsetY, offset, placement}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/grid-item.mjs b/packages/studio/styled-system/jsx/grid-item.mjs index 47159c4e5..ce4529491 100644 --- a/packages/studio/styled-system/jsx/grid-item.mjs +++ b/packages/studio/styled-system/jsx/grid-item.mjs @@ -5,5 +5,8 @@ import { getGridItemStyle } from '../patterns/grid-item.mjs'; export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) { const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/grid.mjs b/packages/studio/styled-system/jsx/grid.mjs index c45e782c5..f56ded878 100644 --- a/packages/studio/styled-system/jsx/grid.mjs +++ b/packages/studio/styled-system/jsx/grid.mjs @@ -5,5 +5,8 @@ import { getGridStyle } from '../patterns/grid.mjs'; export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) { const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/hstack.mjs b/packages/studio/styled-system/jsx/hstack.mjs index d2bcd74f1..5e4bd3007 100644 --- a/packages/studio/styled-system/jsx/hstack.mjs +++ b/packages/studio/styled-system/jsx/hstack.mjs @@ -5,5 +5,8 @@ import { getHstackStyle } from '../patterns/hstack.mjs'; export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { const { justify, gap, ...restProps } = props const styleProps = getHstackStyle({justify, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/link-box.mjs b/packages/studio/styled-system/jsx/link-box.mjs index 44f9e2a09..fb7124bbc 100644 --- a/packages/studio/styled-system/jsx/link-box.mjs +++ b/packages/studio/styled-system/jsx/link-box.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getLinkBoxStyle } from '../patterns/link-box.mjs'; export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) { - const styleProps = getLinkBoxStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getLinkBoxStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/link-overlay.mjs b/packages/studio/styled-system/jsx/link-overlay.mjs index 90d5265c7..908908794 100644 --- a/packages/studio/styled-system/jsx/link-overlay.mjs +++ b/packages/studio/styled-system/jsx/link-overlay.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'; export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) { - const styleProps = getLinkOverlayStyle() -return createElement(panda.a, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getLinkOverlayStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.a, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/spacer.mjs b/packages/studio/styled-system/jsx/spacer.mjs index a823dbb22..184993010 100644 --- a/packages/studio/styled-system/jsx/spacer.mjs +++ b/packages/studio/styled-system/jsx/spacer.mjs @@ -5,5 +5,8 @@ import { getSpacerStyle } from '../patterns/spacer.mjs'; export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { const { size, ...restProps } = props const styleProps = getSpacerStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/square.mjs b/packages/studio/styled-system/jsx/square.mjs index 799ea7d7a..a9a044d3b 100644 --- a/packages/studio/styled-system/jsx/square.mjs +++ b/packages/studio/styled-system/jsx/square.mjs @@ -5,5 +5,8 @@ import { getSquareStyle } from '../patterns/square.mjs'; export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { const { size, ...restProps } = props const styleProps = getSquareStyle({size}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/stack.mjs b/packages/studio/styled-system/jsx/stack.mjs index 729e6d48b..954fccdf0 100644 --- a/packages/studio/styled-system/jsx/stack.mjs +++ b/packages/studio/styled-system/jsx/stack.mjs @@ -5,5 +5,8 @@ import { getStackStyle } from '../patterns/stack.mjs'; export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { const { align, justify, direction, gap, ...restProps } = props const styleProps = getStackStyle({align, justify, direction, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/styled-link.mjs b/packages/studio/styled-system/jsx/styled-link.mjs index 0dbbdb7e8..3d6d20457 100644 --- a/packages/studio/styled-system/jsx/styled-link.mjs +++ b/packages/studio/styled-system/jsx/styled-link.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getStyledLinkStyle } from '../patterns/styled-link.mjs'; export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) { - const styleProps = getStyledLinkStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getStyledLinkStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/visually-hidden.mjs b/packages/studio/styled-system/jsx/visually-hidden.mjs index 6b5758f11..554f74c99 100644 --- a/packages/studio/styled-system/jsx/visually-hidden.mjs +++ b/packages/studio/styled-system/jsx/visually-hidden.mjs @@ -3,6 +3,10 @@ import { panda } from './factory.mjs'; import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'; export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) { - const styleProps = getVisuallyHiddenStyle() -return createElement(panda.div, { ref, ...styleProps, ...props }) -}) \ No newline at end of file + const restProps = props +const styleProps = getVisuallyHiddenStyle() +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/vstack.mjs b/packages/studio/styled-system/jsx/vstack.mjs index 4537816c8..7b13f463c 100644 --- a/packages/studio/styled-system/jsx/vstack.mjs +++ b/packages/studio/styled-system/jsx/vstack.mjs @@ -5,5 +5,8 @@ import { getVstackStyle } from '../patterns/vstack.mjs'; export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { const { justify, gap, ...restProps } = props const styleProps = getVstackStyle({justify, gap}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/jsx/wrap.mjs b/packages/studio/styled-system/jsx/wrap.mjs index 118be1f74..4328211e6 100644 --- a/packages/studio/styled-system/jsx/wrap.mjs +++ b/packages/studio/styled-system/jsx/wrap.mjs @@ -5,5 +5,8 @@ import { getWrapStyle } from '../patterns/wrap.mjs'; export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { const { gap, rowGap, columnGap, align, justify, ...restProps } = props const styleProps = getWrapStyle({gap, rowGap, columnGap, align, justify}) -return createElement(panda.div, { ref, ...styleProps, ...restProps }) -}) \ No newline at end of file +const cssProps = styleProps +const mergedProps = { ref, ...cssProps, ...restProps } + +return createElement(panda.div, mergedProps) + }) \ No newline at end of file diff --git a/packages/studio/styled-system/types/recipe.d.ts b/packages/studio/styled-system/types/recipe.d.ts index 7a83746e0..26b753d53 100644 --- a/packages/studio/styled-system/types/recipe.d.ts +++ b/packages/studio/styled-system/types/recipe.d.ts @@ -1,5 +1,4 @@ /* eslint-disable */ -import type { RecipeRule } from './static-css'; import type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'; type StringToBoolean = T extends 'true' | 'false' ? boolean : T @@ -64,10 +63,6 @@ export interface RecipeDefinition { * The styles to apply when a combination of variants is selected. */ compoundVariants?: Pretty>>[] - /** - * Variants to pre-generate, will be include in the final `config.staticCss` - */ - staticCss?: RecipeRule[] } export type RecipeCreatorFn = (config: RecipeDefinition) => RecipeRuntimeFn