CVA with dynamic styling

[cini9]

Description

I define my vertical spacer recipes as atomic recipes :

export const verticalSpacer = cva({
  base: {
    w: 'full',
  },
  variants: {
    size: {
      sm: {
        h: 'var(--spacing-gap-sm)',
      },
      md: {
        h: 'var(--spacing-gap-md)',
      },
      lg: {
        h: 'var(--spacing-gap-lg)',
      },
      xl: {
        h: 'var(--spacing-gap-xl)',
      },
    },
  },
})

The variable values come from semantic tokens as follows :

export const semanticTokens = defineSemanticTokens({
  spacing: {
    gap: {
      none: {
        value: { base: 0 },
      },
      xs: {
        value: { base: '{spacing.1}', xl: '{spacing.4}' },
      },
      sm: {
        value: { base: '{spacing.1}', xl: '{spacing.6}' },
      },
      md: {
        value: { base: '{spacing.2}', xl: '{spacing.14}' },
      },
      lg: {
        value: { base: '{spacing.3}', xl: '{spacing.24}' },
      },
      xl: {
        value: { base: '{spacing.4}', xl: '{spacing.64}' },
      },
    },
  },
})

The documentation for Atomic Recipes states :

When a recipe is created, Panda will extract and generate CSS for every variant and compoundVariant css ahead of time, as atomic classes.

From this, I figure that the classes to be created at runtime, regardless of whether they are used or not, so that I may potentially use them dynamically when needed.

I create my VerticalSpacer component as follows :

/**
 * The internal imports
 */
import { styled, type HTMLStyledProps } from '@/styled-system/jsx'
import { verticalSpacer } from '@/theme/recipes/verticalSpacer'

/**
 * Compnonents
 */
export const VerticalSpacer = styled('div', verticalSpacer)

/**
 * Type definitions
 */
export interface VerticalSpacerProps
  extends HTMLStyledProps<typeof VerticalSpacer> {}

And then use that component in a generic component as follows :

const Grid: GridComponent = ({
  children,
  px = 10,
  columns = 12,
  columnGap = 6,
  topSpacingSize = null,
  bottomSpacingSize = null,
  ...rest
}) => (
  <StyledGrid
    columns={columns}
    px={px}
    columnGap={columnGap}
    w='full'
    maxW='1920px'
    {...rest}
  >
    {topSpacingSize && (
      <GridItem colStart={1} colEnd={-1}>
        <VerticalSpacer size={topSpacingSize} />
      </GridItem>
    )}
    {children}
    {bottomSpacingSize && (
      <GridItem colStart={1} colEnd={-1}>
        <VerticalSpacer size={bottomSpacingSize} />
      </GridItem>
    )}
  </StyledGrid>
)

Where topSpacingSize and bottomSpacingSize are sizes defined in the atomic recipe. h_var(--spacing-gap-xl) classes are applied to the class list but the actual css is not generated.

Following the documentation

Panda provides a way to generate static CSS for your recipes. This is useful when you want to generate CSS for a recipe without using the recipe in your code or if you use dynamic styling that Panda can't keep track of.

I've also tried to create staticCss by converting verticalSpacer to a config recipe and adding the staticCss: [{ size: ['*'] }] flag but this didn't seem to work either.

The only way to get this dynamic functionality working is by using inline styles and interpolating the topSpacingSize and bottomSpacingSize into a height css rule (see below), which I would like to avoid if I can.

<VerticalSpacer
              style={{
                height: token(`spacing.gap.${topSpacingSize}` as Token),
              }}
            />

I understand that PandaCSS is not ideal for dynamic styling, but the documentation hints that it is possible. What am I missing to get this to work ? Any help is appreciated !

Link to Reproduction

Check description above. Will provide repro link if needed

Steps to reproduce

Check description

JS Framework

NextJS (TS)

Panda CSS Version

0.21

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

the way you're referencing your spacing tokens is not "right" from Panda PoV, as the static extractor expects to see the token path instead of the raw CSS variable (that could be defined from anywhere, not specific to Panda)
https://play.panda-css.com/wbu7t3Ypda

const verticalSpacer = cva({
  base: {
    w: 'full',
  },
  variants: {
    size: {
      sm: {
-        h: 'var(--spacing-gap-sm)',
+        h: '{spacing.gap.sm}',
      },
      md: {
-        h: 'var(--spacing-gap-md)',
+        h: '{spacing.gap.md}',
      },
      lg: {
-        h: 'var(--spacing-gap-lg)',
+        h: '{spacing.gap.lg}',
      },
      xl: {
-        h: 'var(--spacing-gap-xl)',
+        h: '{spacing.gap.xl}',
      },
    },
  },
})

[cini9]

Thanks @astahmer for the solution. That seemed to do the trick, but I had to define my verticalSpacer cva in the same file as the component. When I defined it elsewhere (ex. in recipes) and imported it from there, panda wasn't creating the classes. Any idea why this may be ?

Also, for use cases like this, what do you guys recommend ? Is this a correct approach or should we be using some other way of defining our recipes and components ?

[astahmer]

I had to define my verticalSpacer cva in the same file as the component.

this is not needed, cva will always be entirely extracted (and generate the matching CSS for every prop+value+condition combinations found in there)

When I defined it elsewhere (ex. in recipes) and imported it from there, panda wasn't creating the classes.
Any idea why this may be ?

yes, for 2 reasons:

1 - property renaming:

in your Grid component, you're renaming size to topSpacingSize, which breaks the static extraction: <VerticalSpacer size={topSpacingSize} />

2 - since those variant aren't found as being used, no matching CSS will be generated

quoting the docs:

Config recipes are extracted and generated just in time, this means regardless of the number of recipes in the config, only the recipes and variants you use will exist in the generated CSS.

you can also check the comparison table

---

for your use-case, e.g renaming things and using dynamic stuff, I wouldn't use config recipe (which require your code to be static enough) and instead just rely on cva and/or staticCss when needed

[cini9]

Awesome. Thank you for the explanations and your quick responses ! It is much appreciated.