Advanced JSX Tracking

[cgatian]

I'm new to the framework and trying to wrap my head around the "Advanced JSX Tracking".

https://panda-css.com/docs/concepts/recipes#advanced-jsx-tracking

Why do you need to track the usage? Isn't the usage tracked by consumers importing the built style-system/recipe imports?

[segunadebayo]

This concept is only relevant if your recipe lives in the panda.config not directly in your app.

Recipes can be created in two ways: directly in your app (cva/sva) or in the config.

Recipes defined in the config are 'smart' recipes, meaning only the variants you use will be generated. This also means you can have as many variants as you want, but you pay for the vairants you use in CSS (saving some KB in CSS)

Let's say you create a recipe called 'tabs', and you add it to the config.

defineConfig({
  theme: {
    extend: {
      recipes: {
        // tabs recipe
        tabs: {
          base: {},
          variants: { 
              size: { sm: {}, md: {} }
          },
        },
      },
    },
  },
})

Then in your app, you consume that recipe in a JSX component.

import { tabs } from 'styled-system/recipes'

const Tabs = (props) => {
     const [recipeProps, restProps] = tabs.splitVariantProps(props)
     const className = tabs(recipeProps)
     return <div className={className} />
}

Because the recipe was called tabs, when you use the Tabs component, Panda automatically tracks the recipe props you pass to the Tabs component and generates the equivalent css.

<Tabs size="sm" />

Does this make sense?

Now, let's say instead of Tabs, you called your component something like Foo.

import { tabs } from 'styled-system/recipes'

// recipe doesn't match component name
const Foo = (props) => {
     const [recipeProps, restProps] = tabs.splitVariantProps(props)
     const className = tabs(recipeProps)
     return <div className={className} />
}

This breaks the inference semantics, and Panda doesn't know that Foo uses the tabs recipe (technically, we could infer this, but this will impact speed).

So you need to hint the compiler that Foo uses the tabs recipe by configuring the jsx property in the recipe.

tabs: {
   jsx: ['Tabs', 'Foo']
}

With that, Panda will pick this up and when you do

<Foo size="sm" />

Hope you get it now?

[cgatian]

Thank you for such a well-written answer with examples!

If the recipe was defined in the config of a component library, and someone consumed this library in a monorepo, would the hinting work? Would they have to follow the inference semantics or perhaps the consumer App would need to define these in their config?

Thanks again.

[cgatian]

Just to follow up. I believe if you were to build a shared library and you wanted the ability for consumers to augment the recipe, the correct approach would be to use an atomic recipe.

[cgatian]

@segunadebayo is it possible to use a config recipe to get minimal CSS generation and also export the config recipe for a consumer to use it as an Atomic Recipe?

I see you can extend the config recipe here. But I'm trying to have consumers not have to modify panga.config as much as possible. For example:

1. Button component is available in shared library, and a config recipe is used
2. Consumer wants to build MyButton
3. Is it possible for them to import the config recipe to use as an atomic?

[cgatian]

The only way I've found to share and allow dynamic css on the config recipe is to enable staticCss on the recipe. Is there another approach I'm missing?