Config Recipe: Shared Styles Not Consolidating Across Multiple Recipes

[tongari07]

Hello. First of all, thank you so much for all your hard work on Panda CSS! It's been an incredibly useful tool, and I really appreciate the thought and care that has gone into making it so versatile and easy to use. 🐼

I'm using Panda CSS's Config Recipe feature, and I've noticed that when multiple recipes share the same styles, the classes are generally consolidated. However, there seems to be a limit to this behavior.

For example, in this playground example, I have three recipes for button, input, and checkbox, all of which share the same border style. However, looking at the generated CSS, it seems that button and input are standardized, but checkbox is not:

    .button,
    .input {
      border: 1px solid gainsboro;
      color: gainsboro;
      border-radius: 9999px;
    }

    .checkbox {
      border: 1px solid gainsboro;
    }

The expected generated CSS would be something like this:

.button,
.input,
.checkbox {
  border: 1px solid gainsboro;
}

.button,
.input {
  color: gainsboro;
  border-radius: 9999px;
}

Is there a reason why the checkbox style isn't being consolidated with the others? If this is intentional, could you please explain the conditions under which styles are consolidated or not?

Thank you again for creating and maintaining such an amazing tool. I’m looking forward to your guidance!

[segunadebayo]

We use postcss-discard-duplicates internally for this feature, so we cannot control how this actually works.

[tongari07]

Thanks for the reply! Make sense 🙂
I'll catch up on the plugin.