Dynamic styles when using CSP

[outofthisworld]

I was wondering if there is a better way to pass dynamic variables to styled jsx components rather than using the style attribute.

I had a component before introducing CSP which looked something like this:

<StyledSnowfallSnow key={i} style={{'--data-delay': Math.random(), '--data-left': Math.random()}}/>

Then I introduced Content Security Policy (CSP), which does not like inline styles like this.

I tried <StyledComponent className={css({'-data-dynamic-var':Math.random()}}}/> however, although it generates the class name on the component the css variable does not get output in the generated css (Next13 new app dir). I'm not sure why this is, as it would seem like this should be possible?

Finally, I resorted to a solution to allow styles to work with CSP, however its not pretty and requires extra elements in the generated html.. increasing the file size quite a bit

    const cname = `snowfall-${index}`;
    <StyledSnowfallSnow key={i} className={cname} />
      <style nonce={nonce}>
                {`
                  .${cname}{
                    --data-left: ${Math.abs(Math.random() * 100)}%;
                    --data-delay: ${Math.abs(Math.random() * 15)}s;
                  }
                `}
       </style>

Also, I noticed that even using style={{'--dynamic-var':1}} the linter/compiler complains that this style attribute doesn't exist. How can I fix that?

Thanks!

[anubra266]

Panda works by static extraction. Also your particular usecase; where you're defining those dynamic variables does not require panda or any css framework. You can consume the variables in panda, but defining them doesn't require it.

[outofthisworld]

I understand that. The thing is those css variables have to been defined dynamically in order to give the component the effect I need. CSP disallows style={{}} on a component, so this is the only way to dynamically define the variables ?

Since it works by static extraction, is it then not possible to extract the computed style into the css - maybe I'm missing something?. This is a server component.

[anubra266]

Panda generates styles into css files at build time, so if you have a value that changes dynamically at runtime like this one, there's no way that exists in the generated css.

@outofthisworld https://panda-css.com/docs/guides/dynamic-styling

[outofthisworld]

Fair, so to be clear a <style> element with nonce for dynamic variables is the best way currently to achieve this?