allow pre-evaluation of dynamic code for recipes

[abdelrhman-adel]

so I'm using cva to build a recipe for a Box component that allows a bunch of predefined css props like "display, flex props, paddings and margins" for a Design system, the problem is that I have alot of variants that has the same values like padding, p, paddingY, py ,...etc I tried something like this but it didn't work because of how Panda do static analysis.

const spacingTokens = Object.entries({
    xs: 'token(spacing.1)',
    sm: 'token(spacing.2)',
    md: 'token(spacing.3)',
    lg: 'token(spacing.4)',
    xl: 'token(spacing.5)',
});

const spacingProps: {[name: string]: keyof Spacing} = {
    'grow': 'flexGrow',
    'shrink': 'flexShrink',
    'gap': 'gap',
    'p': 'padding',
    'pl': 'paddingLeft',
    'pr': 'paddingRight',
    'pt': 'paddingTop',
    'pb': 'paddingBottom',
    'px': 'paddingX',
    'py': 'paddingY',
};

const variants = Object.entries(spacingProps)
    .map(([name, styleProp]) => {
        const variants = spacingTokens
            .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
            .reduce((_agg, kv) => ({ ..._agg, ...kv }));

        return { [name]: variants };
    })
    .reduce((_agg, kv) => ({ ..._agg, ...kv }));

cva({
  ...
  variants,
  ...
})

is there a way where I can dynamically generate config for CVA or to ensure that all of these variants css is generated ?

[anubra266]

@abdelrhman-adel For something this complex, why not use a config recipe instead?

[abdelrhman-adel]

how would a config recipe achieve this ?

[abdelrhman-adel]

yes, you are right, turns out I can do these complex calculations with config recipes, the only thing that was missing is to also use config.staticCSS to ensure the css gets generated

[smoogly]

Seems that the only thing required to support evaluated functions is swapping the ts-evaluator env preset from NONE to ECMA along with matching changes for config type:

panda/packages/parser/src/parser.ts

Line 63 in bc3b077

const defaultEnv: EvalOptions['environment'] = { preset: 'NONE' }

Here's a test case for the parser:

  test('should evaluate variants supplied as a function', () => {
    const code = `
    import {cva} from ".panda/css"

    const variants = () => {
      const spacingTokens = Object.entries({
          s: 'token(spacing.1)',
          m: 'token(spacing.2)',
          l: 'token(spacing.3)',
      });
      
      const spacingProps = {
          'px': 'paddingX',
          'py': 'paddingY',
      };
      
      // Generate variants programmatically
      return Object.entries(spacingProps)
          .map(([name, styleProp]) => {
              const variants = spacingTokens
                  .map(([variant, token]) => ({ [variant]: { [styleProp]: token } }))
                  .reduce((_agg, kv) => ({ ..._agg, ...kv }));
      
              return { [name]: variants };
          })
          .reduce((_agg, kv) => ({ ..._agg, ...kv }));
    }

    const baseStyle = cva({
        variants: variants(),
    })
     `

    expect(cvaParser(code)).toMatchInlineSnapshot(`
      {
        "cva": Set {
          {
            "box": {
              "column": 23,
              "line": 28,
              "node": "CallExpression",
              "type": "map",
              "value": Map {
                "variants" => {
                  "column": 19,
                  "line": 29,
                  "node": "CallExpression",
                  "type": "object",
                  "value": {
                    "px": {
                      "l": {
                        "paddingX": "token(spacing.3)",
                      },
                      "m": {
                        "paddingX": "token(spacing.2)",
                      },
                      "s": {
                        "paddingX": "token(spacing.1)",
                      },
                    },
                    "py": {
                      "l": {
                        "paddingY": "token(spacing.3)",
                      },
                      "m": {
                        "paddingY": "token(spacing.2)",
                      },
                      "s": {
                        "paddingY": "token(spacing.1)",
                      },
                    },
                  },
                },
              },
            },
            "data": [
              {
                "variants": {
                  "px": {
                    "l": {
                      "paddingX": "token(spacing.3)",
                    },
                    "m": {
                      "paddingX": "token(spacing.2)",
                    },
                    "s": {
                      "paddingX": "token(spacing.1)",
                    },
                  },
                  "py": {
                    "l": {
                      "paddingY": "token(spacing.3)",
                    },
                    "m": {
                      "paddingY": "token(spacing.2)",
                    },
                    "s": {
                      "paddingY": "token(spacing.1)",
                    },
                  },
                },
              },
            ],
            "name": "cva",
            "type": "object",
          },
        },
      }
    `)
  })

[smoogly]

FYI, here's the above as a PR: #1333

[astahmer]

was merged here #1376 (comment)