Defining hash: true in config breaks recipe

[Gytjarek]

I defined a button recipe:

const buttonRecipe = defineRecipe({
  className: 'button',
  description: 'The styles for the Button component',
  base: {
    display: 'inline-flex',
  },
});

What works well, it also styles each button in my app with button class name. However, whenever I set hash:true in my config, it breaks this functionality; my HTML buttons no longer have styling. What am I doing wrong?

[anubra266]

@Gytjarek Could you create a reproduction with play.panda-css.com

[segunadebayo]

There's a pretty good chance you want to run panda codegen when you set hash: true

[Gytjarek]

const buttonRecipe = defineRecipe({
className: 'button',
description: 'The styles for the Button component',
base: {
display: 'inline-flex',
},
});

@anubra266 yes, created one: https://play.panda-css.com/Aj_Ylka4zi, so, if you go to the panda config and set hash to true, the button is no longer styled

[segunadebayo]

This is not a bug. You should not be hardcoding the className; instead, use the button function. When hash: true is set, the class name of the button is no longer "button" but rather a generated hash of that className.

https://play.panda-css.com/Aj_Ylka4zi/oTFJida6lo

[Gytjarek]

@segunadebayo yea, that's clear, but what if I want to style buttons to which I don't have access? Like, I want to style each button in my app without specifying a button function. Is that possible?

[segunadebayo]

You could use the staticCss option and set the hash: false

It's currently not possible with the hash option.

[anubra266]

Also @Gytjarek I think you could just pass the button() call anywhere you'd have passed the button string.

[Gytjarek]

@anubra266 yeah, I don't have access to some buttons because they're being generated by third-party libraries