Performance improvement: Minifying compoundVariants

[theMasix]

Description

You can add a simple static analyzer to merge and combine compoundVariants that have the same conditions.

This means that both these conditions:

    {
      variant: 'contained',
      css: {
        color: 'black',
      },
    },
    {
      variant: 'contained',
      css: {
        backgroundColor: 'colorPalette',
        _hover: {
          backgroundColor: 'colorPalette.hover.overlay',
        },
        _focus: {
          backgroundColor: 'colorPalette.focus.opacity',
        },
     },

can be merged into one:

 {
      variant: 'contained',
      css: {
        color: 'black',
        backgroundColor: 'colorPalette',
        _hover: {
          backgroundColor: 'colorPalette.hover.overlay',
        },
        _focus: {
          backgroundColor: 'colorPalette.focus.opacity',
        },
      },
    },

Problem Statement/Justification

Since Panda ships all the provided compoundVariants to the final bundle, there should be a static analyzer that minifies the compoundVariants as much as possible.

Proposed Solution or API

Let's take a look at minifyCompoundVariants method called here:

https://stackblitz.com/edit/vitejs-vite-ivbkjf?file=src%2Fcomponents%2Fbutton.style.ts

Alternatives

No response

Additional Information

No response

[segunadebayo]

It seems you attached the wrong link @theMasix. Curious to see minify method

[theMasix]

Link fixed.
Here is the usage of minifyCompoundVariants method:
https://stackblitz.com/edit/vitejs-vite-ivbkjf?file=src%2Fcomponents%2Fbutton.style.ts%3AL39

[astahmer]

I feel like this could easily be done in your side, what's the reasoning behind creating those variants that should later be merged anyway ?

btw instead of using compoundVariants to match only 1 variant (from your example), the styles should instead live directly in the given variant style object, this way 0 compoundVariants for those simple cases would be generated

[theMasix]

You're right. but imagine a systematic or some conventions for developers to easily know where to put styles.
Also, by combining the type-safety features that I wrote in that reproduction link, in which the types are created based on PandaCSS inputs, it's better to separate types and base variants from styles and not write styles inside variants directly.

I'm looking forward to better approaches and great conventions for developers to work on the codebase easily.