Use custom functions to pass values to properties.

[xphstos]

Hi all!

I'm coming from the world of CSS Modules with SCSS, over years I've accumulated a good amount of mixins, functions etc. that I use all the time.
My most used function is one that calculates the slope of two values at specific breakpoints based on current view width, the result is very smooth and that way I write way less breakpoints.

For example I have something like this.
font-size: clamp(1.25rem, 6.928vw + -0.543rem, 5rem);
At 414px the font size will be at it's lowest value 1.25rem (20px) and at 1280px it will reach it's max value of 5rem (80px).
Those weird numbers at the end are calculated inside the function.

I tried to use my function, which I've converted from SCSS to JS, fontSize: fluidType(1.25rem, 5rem, 414, 1280), inside the css function but the css is not generated.
I can see the class fs_clamp(1.25rem,_6.928vw_+_-0.543rem,_5rem) being generated but the actual CSS is not there.

I tried successfully to recreate the function as a panda utility which it's not the best solution because I have to also pass the property name. It works fine but...
I have to use it like this clamp: "fontSize 1.25 5 414 1280" and if I want to use the same clamp function for paddings, margins etc. I can't do because an object literal cannot have multiple properties with the same name.

Ideally I would like to be able to use my own function inside the css function or at least recreate as utility, recipe or something and use it like that.
Any ideas?

[anubra266]

Works fine @xphstos

[xphstos]

It works fine if you type directly the css rule.
But it doesn't work if you need to get the css rules from a function.
The preferred value inside the clamp function is being calculated by a function.
It's not the same for all cases.

So if you try to pass a function that returns that clamp as a string it does generate the css class but not the actual CSS code.

[anubra266]

@xphstos this is because it breaks static extraction.
https://panda-css.com/docs/guides/dynamic-styling

[xphstos]

I see, that makes sense but it's a real bummer.
I can't use recipes either for that... :(

Thanks for you answer!

[anubra266]

@xphstos use this https://www.npmjs.com/package/postcss-functions

[trompx]

I tried postcss-functions but it doesn't work to generate multiple properties. I would like to output media-queries and multiples css properties, similar to what a mixin does, is it possible in panda? I use template literal so I can't use the utilities feature.