Expose utility.transform to allow className generation to be used outside of Panda

[oe-josh-martin]

Howdy

We're integrating Panda in a package we have that interfaces with a CMS. The CMS allows consumers to, for example, set a minimum width on a container. This comes through as a numeric value, which we pass through to a component. Obvious issue here is that although Panda can generate the class name internally, it wont generate any styles as it doesn't know about that value at build time.

To get around this, we've created a context that collects all of these values and injects them as a style. The collection looks something like

{
    className: `max-w_${blok.maxWidthNumber}`,
    property: 'max-width',
    value: blok.maxWidthNumber + 'px',
}

Ideally I'd like to be able to use your transform function so that I don't need to rely on manually tooling these class names (and means they'll always scale and update in line with the underlying Panda integration)

{
    className: transform('max-width', blok.maxWidthNumber),
    property: 'max-width',
    value: blok.maxWidthNumber + 'px',
}

I did look in @pandacss/shared but it doesn't look like this functionality is there.

[segunadebayo]

I don't think you need access to the utility.transform method since it's already available in the css() and css.raw() functions.

Here's a quick hack of an approach to consider

import { css } from './styled-system/css';
import { serializeStyles } from '@emotion/serialize';

const cmsStyles = [
  { property: 'maxWidth', value: '240px' },
  { property: 'color', value: 'red' },
  { property: 'background', value: 'pink' },
  { property: 'padding', value: '20px' },
];

let styleObject = {};
let styleString = '';

cmsStyles.forEach((entry) => {
  const obj: any = { [entry.property]: entry.value };
  const name = css(obj);
  const { styles } = serializeStyles([css.raw(obj) as any]);
  Object.assign(styleObject, obj);
  styleString += `\n.${name}{${styles}}`;
});

function App() {
  return (
    <div>
      <h1 className={css(styleObject)}>dsfsdf</h1>
      <style>{styleString}</style>
    </div>
  );
}

[oe-josh-martin]

Hey @segunadebayo

Thanks for the reply. I can get it working with something like the below

let styleString = '';

Object.entries(styles).forEach(([property, value]) => {
    const obj: any = { [property]: Number(value) };
    const name = css(obj);
    const { styles } = serializeStyles([css.raw(obj) as any]);
    styleString += `\n.${name}{${styles}}`;
});

with a styles object that looks like

{  property: 'maxWidth', value: '100' } // this is cast to string via CMS, hence the `Number` above

which does return the generated classname and CSS.

However, the CMS allows our consumers to change these values responsively, too. I can update the function to be

let styleString = '';

Object.entries(styles).forEach(([property, keys]) => {
    Object.entries(keys).forEach(([key, value]) => {
        if (value === undefined || value === '') {
            return;
        }
        const obj: any = { [key]: { [property]: value } };
        const rawObj: any = { [property]: Number(value) };
        const name = css(obj);
        const { styles } = serializeStyles([css.raw(rawObj) as any]);
        styleString += `\n.${name}{${styles}}`;
    });
});

which does generate the correct string

// would need to figure out how to escape the `.sm:` to be `.sm\:`
.sm:max-h_150{max-height:150px}.max-w_400{max-width:400px} 

provided a styles object like

{
        property: 'maxWidth',
        keys: {
            base: blok.maxWidthNumber || undefined,
            xs: blok.maxWidthNumberXs || undefined,
            sm: blok.maxWidthNumberSm || undefined,
            md: blok.maxWidthNumberMd || undefined,
            lg: blok.maxWidthNumberLg || undefined,
            xl: blok.maxWidthNumberXl || undefined,
        },
    },
    {
        property: 'maxHeight',
        keys: {
            base: blok.maxHeight || undefined,
            xs: blok.maxHeightXs || undefined,
            sm: blok.maxHeightSm || undefined,
            md: blok.maxHeightMd || undefined,
            lg: blok.maxHeightLg || undefined,
            xl: blok.maxHeightXl || undefined,
        },
    },

but of course this won't add the breakpoints.

---

For reference, this is the code I was working with before, with a styles object that looks like

{
        className: 'max-w_',
        property: 'max-width',
        keys: {
            base: { value: blok.maxWidthNumber },
            xs: { value: blok.maxWidthNumberXs },
            sm: { value: blok.maxWidthNumberSm},
            md: { value: blok.maxWidthNumberMd },
            lg: { value: blok.maxWidthNumberLg },
            xl: { value: blok.maxWidthNumberXl },
        },
    },

const css = useMemo(() => {
        const baseClassDeclarations: string[] = [];
        const responsiveClassDeclarations: Record<string, string[]> = {};

        Object.entries(styles).map(([className, props]) => {
            if (
                props.keys.base.value !== '' &&
                props.keys.base.value !== undefined
            ) {
                baseClassDeclarations.push(
                    `.${className}${props.keys.base.value} { ${props.property}: ${props.keys.base.value} }`
                );
            }

            breakpointKeys.forEach((breakpoint) => {
                if (breakpoint === 'base') return;

                if (
                    props.keys[breakpoint].value !== '' &&
                    props.keys[breakpoint].value !== undefined
                ) {
                    if (!responsiveClassDeclarations[breakpoint]) {
                        responsiveClassDeclarations[breakpoint] = [];
                    }

                    responsiveClassDeclarations[breakpoint].push(
                        `.${breakpoint}\\:${className}${props.keys[breakpoint].value} { ${props.property}: ${props.keys[breakpoint].value}}`
                    );
                }
            });
        });

        const baseClasses = baseClassDeclarations.join('\n');
        const responsiveClasses = Object.entries(
            responsiveClassDeclarations
        ).map(([breakpoint, declarations]) => {
            const minWidth = token(`breakpoints.${breakpoint}` as Token);
            return `@media (min-width: ${minWidth}) {\n${declarations.join(
                '\n'
            )}\n}`;
        });
        return [baseClasses, ...responsiveClasses].join('\n');
    }, [styles]);

As mentioned in the OP, being able to just generate the className would allow me to remove the need to do something like ${className}${props.keys[breakpoint].value} as I would just be able to generate the class directly in className: 'max-w_',

[oe-josh-martin]

So I made a combination of both that resolves this:

{
      property: 'maxWidth',
      keys: {
          base: { value: blok.maxWidthNumber },
          xs: { value: blok.maxWidthNumberXs },
          sm: { value: blok.maxWidthNumberSm },
          md: { value: blok.maxWidthNumberMd },
          lg: { value: blok.maxWidthNumberLg },
          xl: { value: blok.maxWidthNumberXl },
      },
},

() => {
    const baseClassDeclarations: string[] = [];
    const responsiveClassDeclarations: Record<string, string[]> = {};

    Object.entries(styles).map(([_, props]) => {
        if (
            props.keys.base.value !== '' &&
            props.keys.base.value !== undefined
        ) {
            const obj: any = { [props.property]: props.keys.base.value };
            const name = css(obj);
            const { styles } = serializeStyles([css.raw(obj) as any]);

            baseClassDeclarations.push(`.${name} { ${styles} }`);
        }

        breakpointKeys.forEach((breakpoint) => {
            if (breakpoint === 'base') return;

            if (
                props.keys[breakpoint].value !== '' &&
                props.keys[breakpoint].value !== undefined
            ) {
                if (!responsiveClassDeclarations[breakpoint]) {
                    responsiveClassDeclarations[breakpoint] = [];
                }

                const obj: any = { [props.property]: props.keys[breakpoint].value };
                const name = css(obj);
                const { styles } = serializeStyles([css.raw(obj) as any]);

                responsiveClassDeclarations[breakpoint].push(
                    `.${breakpoint}\\:${name} { ${styles} }`
                );
            }
        });
    });
}

Thanks for your help in pointing me in the right direction!