[Bug?]: "A" Component causes FOUC and weird props

[caseybaggz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

After much research migrating my SS app to use Panda-CSS I have come to find out the A tag is doing some weird stuff when combined with Panda CSS.

When using a native <a> element:

When using the Solid-start <A> Component:

This compilation is causing some major FOUC on the browser rendering mentioned in the above issue.

Expected behavior 🤔

SS components should not be adding any extra props that are not from the user or enhance a11y of the component itself.

Steps to reproduce 🕹

Steps:

1. Create a basic SS app
2. Add Panda CSS
3. Create a <A> component with custom styles via Panda
4. See FOUC and weird props

Context 🔦

This started appearing recently in my large app using the latest version of SS. I know we are moving to Astro in the future, but this is a blocker for me to publicly release my app.

Your environment 🌎

No response

[ryansolid]

Yeah this looks like a Solid compilation bug on the serverside class merging.. I will take a look. Albeit a reproduction will save me a ton of time. I will try to just copy the CSS shown in the anchor above.

[ryansolid]

So Panda adds this stuff. If I was to guess it has to do with escaping.. because writing what is there works fine, but I see escaped quotes and my guess is whatever is combining this on the server is getting tripped up by it. It'd be great to see actual project and inspect what the transform is doing.

[caseybaggz]

@anubra266 adding you here since this might be beneficial to Panda configuration.

@ryansolid what's also interesting is that I also created a new example project (albeit not a real world example) and it works fine. However, in my real world example that is now a large scale SS app using panda...it does exist.

It's a private repo, so I can't share the link to that one or else I would. 🙈

[anubra266]

@caseybaggz Is the escape thingy still an issue?

[caseybaggz]

@anubra266 from my perspective, yes - I'm still having to use a local altered version of the SS A tag to prevent the FOUC.

[anubra266]

@caseybaggz I'm referring to the styles that were leaking to the html as props. Do you still have them?

[caseybaggz]

@caseybaggz I'm referring to the styles that were leaking to the html as props. Do you still have them?

Yeah, that's what I was talking about. 😄

[ryansolid]

In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.