Local CSS vars optimization within recipe

[yumin-chen]

Description

Feature Request

Automatic Recipe Optimizer

I would like to suggest a feature that would automatically optimize local CSS variables declared within Panda recipes. Currently, I can declare CSS variables within a variant, such as colorScheme, and use them in other variants. However, this sometimes leads to unused variables in the final CSS output, depending on the combination of variants I choose.

Problem Statement/Justification

For example, in the recipe below, some CSS variables are only used in the subtle look, but not in the solid look. If I select the colorScheme to be blue and the look to be solid, I would end up with some redundant variables. Such as the example below, --color-a2 is not used by solid, and --color-a3 is not used by subtle, and they should not used in the final CSS output. Those CSS variables are being surfaced on the client side in the users' browser consuming RAM.

{
  variants: {
    colorScheme: {
      blue: {
        "--color-a1":  "token(colors.blue.600)",
        "--color-a2":  "token(colors.blue.700)",
        "--color-a3":  "token(colors.blue.500)",
        ....
     }
  },
  look: { 
    solid: { bg: "var(--color-a1)", color: "var(--color-a3)" },
    subtle: { bg: "var(--color-a1)", color: "var(--color-a2)" },
  }
}

One way to solve this problem is to use compoundVariants to define the combinations of variants that use specific CSS variables, and remove them from the other variants. However, this can be very verbose and result in numerous combinations for this use case. It results in very ugly and unreadable code (at least in this case, we're seeing a large number of declarations needed to achieve very small optimization).

On a separate note, if we could support hashing for local CSS variable names, that'd be perfect!

Real World Example

Below recipe is for a Badge component, it has all local CSS variables (colors) declared within colorScheme variant, and those CSS variables are then being used in other variants. If we were to use compoundVariants in order to clean up unused CSS variables, it would result in 12 different permutations.

const badgeRecipe = {
  base: {
    borderRadius: "xs",
    fontWeight: "600",
    textTransform: "uppercase",
  },
  variants: {
    size: {
      sm: { fontSize: "xs", padding: "0 2px" },
      md: { fontSize: "sm", padding: "0 token(spacing.1x)" },
      lg: { fontSize: "md", padding: "1px token(spacing.1x)" },
    },
    variant: {
      solid: {
        border: {
          base: "1px ridge var(--color-accent)",
          _osDark: "1px ridge var(--color-accent-inv)",
        },
        color: { base: "white", _osDark: "black" },
        background: {
          base: "var(--color-accent)",
          _osDark: "var(--color-accent-inv)",
        },
      },
      subtle: {
        border: {
          base: "1px ridge var(--color-darker-inv)",
          _osDark: "1px ridge var(--color-darker)",
        },
        background: {
          base: "var(--color-darker-inv)",
          _osDark: "var(--color-darker)",
        },
        color: {
          base: "var(--color-darker)",
          _osDark: "var(--color-darker-inv)",
        },
      },
      outline: {
        border: {
          base: "1px outset var(--color-accent)",
          _osDark: "1px ridge var(--color-accent-inv)",
        },
        color: {
          base: "var(--color-accent)",
          _osDark: "var(--color-accent-inv)",
        },
        borderColor: {
          base: "var(--color-accent)",
          _osDark: "var(--color-accent-inv)",
        },
      },
    },
    // TODO: Clean up unused CSS vars using compoundVariants
    colorScheme: {
      blue: {
        "--color-accent": {
          base: "token(colors.blue.600)",
          _highContrast: "token(colors.blue.700)",
        },
        "--color-accent-inv": {
          base: "token(colors.blue.200)",
          _highContrast: "token(colors.blue.100)",
        },
        "--color-darker": "token(colors.blue.800)",
        "--color-darker-inv": {
          base: "token(colors.blue.100)",
          _highContrast: "token(colors.blue.50)",
        },
      },
      green: {
        "--color-accent": {
          base: "token(colors.green.600)",
          _highContrast: "token(colors.green.700)",
        },
        "--color-accent-inv": {
          base: "token(colors.green.200)",
          _highContrast: "token(colors.green.100)",
        },
        "--color-darker": "token(colors.green.800)",
        "--color-darker-inv": {
          base: "token(colors.green.100)",
          _highContrast: "token(colors.green.50)",
        },
      },
      red: {
        "--color-accent": {
          base: "token(colors.red.600)",
          _highContrast: "token(colors.red.700)",
        },
        "--color-accent-inv": {
          base: "token(colors.red.200)",
          _highContrast: "token(colors.red.100)",
        },
        "--color-darker": "token(colors.red.800)",
        "--color-darker-inv": {
          base: "token(colors.red.100)",
          _highContrast: "token(colors.red.50)",
        },
      },
      gray: {
        "--color-accent": {
          base: "token(colors.gray.600)",
          _highContrast: "token(colors.gray.700)",
        },
        "--color-accent-inv": {
          base: "token(colors.gray.200)",
          _highContrast: "token(colors.gray.100)",
        },
        "--color-darker": "token(colors.gray.800)",
        "--color-darker-inv": {
          base: "token(colors.gray.100)",
          _highContrast: "token(colors.gray.50)",
        },
      },
    },
  },
};

Proposed Solution or API

We could have a preprocessor to parse the recipe and track all local CSS variables declared within the recipe, and iterates over the variants looking for any corresponding CSS variables usage, and automatically generate the corresponding compoundVariants from variants.

Alternatives

No response

Additional Information

No response

[kaiqueaguilar]

I had this need and it was satisfied with Virtual Color